html表单模板(html表单模板代码案例)
需要一个HTML模板，用来做简单的表单数据录入
HTML做个数据录入的模板。如下参考：
1、首先新建一个html，点击body/body中间，先填入表格内容：
2.内容可根据要求编写，示例代码如下：
table
p style="text-align:center "功课表/p
tr
th语文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th数学/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th英文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
/table
3.然后在head/head中间输入样式表的样式，如下图：
4.样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：
style type="text/css"
body
{
width:340px;
height:800px;
}
table
{
border-collapse:collapse;
}
th,td
{
width:100px;
height:40px;
border:1pxsolidblack;
font-size:12px;
text-align:center;
}
/style
5.注意，此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。
6.预览结果如下图所示，一个制作简单的HTML模板。
什么是HTML模板，什么是WORD文档模板，两者之间有什么区别？
华天oa的审批模板可分为两种，即文档型和表单型。
⑴文档型。即ＷＯＲＤ和ＥＸＣＥＬ模板。文档型的模板适用于审批内容基于文档的，可以对文档进行痕迹保留，电子签名，加盖电子印章。
⑵表单型。即ＨＴＭＬ模块，该类型模板是基于ＨＴＭＬ表单的，类似于一个应用系统，可以有Ｎ多个输入域，并且与实体的数据表相结合，可以方便地根据每个域进行数据查询和统计汇总。相对而言，
EXCEL、WORD流程没有html表单功能强大，
HTML表单审批流程是全新的表单工作流，它的特点是可以处理任何可见表单。完全实现按条件流程跳转，可自动完成复杂的申请流程。可实现根据不同的条件把表单自动发送给经办人员处理，通过自定义查询统计表单内容，管理表单更方便。
文档型一般应用于不需要统计、按域查询的。表单型一般应用于需要对审批表的数据进行查询和分析的。客户可根据自己的实际情况，某些采用文档型模板，某些采用ＨＴＭＬ表单型模板。如人事任免等一般为可采用文档型模板，而采购单、销售单一般采用ＨＴＭＬ表单型模板。
html 怎么设置漂亮的表单样式
html 设置漂亮的表单样式，以下是代码：
1、编写一个from表单
form id="payment"
fieldset
legend用户详细资料/legend
ol
li
label for="name"用户名称：/label
input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus
/li
li
label for="email"邮件地址：/label
input id="email" name="email" type="email" placeholder="example@163.com" required
/li
li
label for="phone"联系电话：/label
input id="phone" name="phone" type="tel" placeholder="010-12345678" required
/li
/ol
/fieldset
fieldset
legend家庭住址（收货地址）：/legend
ol
li
label for="address"详细地址：/label
textarea id="address" name="address" rows="1" required/textarea
/li
li
label for="postcode"邮政编码：/label
input id="postcode" name="postcode" type="text" required
/li
li
label for="country"国 家：/label
input id="country" name="country" type="text" required
/li
/ol
/fieldset
fieldset
legend付费方式/legend
ol
li
fieldset
legend信用卡类型/legend
ol
li
input id="visa" name="cardtype" type="radio"
label for="visa"中国工商银行/label
/li
li
input id="amex" name="cardtype" type="radio"
label for="amex"中国人民银行/label
/li
li
input id="mastercard" name="cardtype" type="radio"
label for="mastercard"中国建设银行/label
/li
/ol
/fieldset
/li
li
label for="cardnumber"银行卡号：/label
input id="cardnumber" name="cardnumber" type="number" required
/li
li
label for="secure"验 证 码：/label
input id="secure" name="secure" type="number" required
/li
li
label for="namecard"持 卡 人：/label
input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required
/li
/ol
/fieldset
fieldset
button type="submit"现在购买/button
/fieldset
/form
2、编写css样式
style type="text/css"
/*分别定义HTML中和标记之的距离样式*/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
/*定义body标记样式*/
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 20px;
}
/*定义付费内容的样式*/
form#payment {
background: #9cbc2c;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:auto;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type { margin-bottom: 0; }
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment fieldset legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255, 255, 255, .3);
border-color: #e3ebc3;
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 2px;
-webkit-border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background: none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment fieldset fieldset label:hover { cursor: pointer; }
form#payment input:not([type=radio]), form#payment textarea {
background: #ffffff;
border: #FC3 solid 1px;
-webkit-border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not([type=submit]):focus, form#payment textarea:focus {
background: #eaeaea;
border: #F00 solid 1px;
}
form#payment input[type=radio] {
float: left;
margin-right: 5px;
}
/style
3、漂亮的表单生成。
怎样用html写表单的教程
我们在浏览一些网站时经常会用到一种网页元素--表单。如下图，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来介绍HTML表单相关的一些知识点。
1)表单:帮助服务器收集客户端信息的一种机制
form?action="提交到的页面"?method="提交的方法"
表单控件
form
action:数据最后所提交的页面 绝对路径/相对路径
method:数据提交服务器时的提交方法 post get
2)表单控件:表单用于用户填写信息的控件
1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件
(注册时，用户名填写)
格式:
input?type="text"?name=""??id=""??value=""?size=""?placeholder=""/
type:设置控件样式 text
name:用于表单收集信息的一种标示符，也就是控件的名称
2、密码框:只是用户输入的内容看不到
input?type="password"?name=""?id=""??size=""/
3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组
input?type='radio'?name=""?value=""?checked标示符
name:为了保证传递服务器数据只有一个，所以name值必须相同
value：是用提交服务器时，该标签被提交的数据,value不能相同;
checked:默认按钮组中的那个按钮被选中
性别:input?type='radio'?name=""?value=""?checked男
input?type='radio'?name=""?value=""?checked女
input?type='radio'?name=""?value=""?checked保密
所有表单控件name值不能相同!!!
4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]
格式:
input?type='checkbox'?name=""?id=""?value=""?checked标示
选课:
input?type='checkbox'?name='classes[]'?checked?value='1'语文
input?type='checkbox'?name='classes[]'??value='2'数学
input?type='checkbox'?name='classes[]'??value='3'历史
input?type='checkbox'?name='classes[]'??value='4'政治
input?type='checkbox'?name='classes[]'??value='5'物理
input?type='checkbox'?name='classes[]'??value='6'化学
input?type='checkbox'?name='classes[]'?checked?value='7'美术
注意：一定要在name属性后面添加[]
5)下拉列表框:
格式:
select?name=""?
option?value=""?selected下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
option?value=""?下拉列表项option
select
multiple:允许用户选中多个下拉列表项
optgroup: 设置下拉分类标示
6) 文本域：可以输入多行数据的表单控件
textarea?name=""?id=""?cols=""?rows=""
内容
textarea
rows:设置文本域可以输入的行数
cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)
个人介绍:
textarea?name='descs'?cols="50"?rows="10"
我是个学生
textarea
7)隐藏域：
input?type="hidden"?name?=?“”value?=””
8)上传控件：
input?type="file"?name=””
9)按钮标签:
普通按钮:为js提供的控件
input?type='button'?name=””?value=""/
value：按钮中显示的数据和提交到服务器后该控件提交的值
input?type='button'?name='clicks'?value="点我"/
提交按钮:点击后可以提交表单
input?type='submit'?name="add"?value='注册'/
重置按钮:点击后可以将用户输入的数据清空
input?type='reset'?name='cancel'?value='重置'
图片提交按钮:使用图片作为提交按钮
input?type='image'?src='图片地址'?name=””
本文的分享就到这，希望我的回答能帮到你。