1、什么是表单？
表单是用form标签创建的，表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等；作用是向服务传输数据，例如：注册表单，信息提交表单等。
2、表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input元素：是表单最重要的元素；具有不同形态，取决于type属性。
type属性有：
text----定义文本输入的单行输入字段。
password----定义密码字段。
submit----定义提交表单数据至表单处理程序的按钮。
radio----定义单选按钮。
checkbox----定义复选框。
button----定义按钮。
HTML5新增：
number----用于应该包含数字值得输入字段。
data----用于应该包含日期的输入字段。
color----用于应该包含颜色的输入字段。
range----用于应该包含一定范围内的值的输入字段。
month----允许用户选择月份和年份。
week----允许用户选择周和年。
time----允许用户选择时间（不显示时区）。
datetime----允许用户选择日期和时间（显示时区）。
datetime-local----允许用户选择日期和时间（不显示时区）。
email----用于应该包含电子邮件地址的输入字段。
search----用于搜索字段（搜索字段的表现类似常规文本字段）。
tel----用于应该包含电话号码的输入字段。
url----用于应该包含 URL 地址的输入字段。
注意：以上HTML5新增的有些浏览器不支持。
select元素（下拉列表）： 元素定义下拉列表：
option元素定义待选择的选项。一般会把第一个选项显示为预定义选项，也可以通过添加selected属性来定义预定义选项。
textarea元素：textarea 元素定义多行输入字段（文本域）：
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
button元素：button元素定义可点击的按钮：
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。
datalist元素：datalist>元素为 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。
input 元素的 list 属性必须引用 datalist 元素的 id 属性。
keygen元素: 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。简单来讲就是提供一种验证用户的方法，详情请自行百度。
output元素:output>标签定义不同类型的输出，比如脚本的输出。
3、常用表单元素属性
form属性
input属性：
value----value 属性规定输入字段的初始值。
readonly----readonly 属性规定输入字段为只读（不能修改）。readonly属性不需要值。
disabled----disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的,且不会被提交。disabled 属性不需要值。
size----size 属性规定输入字段的尺寸（以字符计）。
maxlength----maxlength 属性规定输入字段允许的最大长度。
HTML5 属性
HTML5 为 增加了如下属性：
•autocomplete----autocomplete 属性规定表单或输入字段是否应该自动完成。
•autofocus----布尔属性，规定当页面加载时 元素应该自动获得焦点。
•form----form 属性规定 元素所属的一个或多个表单。
提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
•formaction----formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
formaction 属性覆盖 form元素的 action 属性。
formaction 属性适用于 type=“submit” 以及 type=“image”。
•formenctype----formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formenctype 属性覆盖 元素的 enctype 属性。
formenctype 属性适用于 type=“submit” 以及 type=“image”。
•formmethod----formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formmethod 属性覆盖 元素的 method 属性。
formmethod 属性适用于 type=“submit” 以及 type=“image”。
•formnovalidate----布尔属性，规定在提交表单时不对 元素进行验证。
formnovalidate 属性覆盖 元素的 novalidate 属性。
formnovalidate 属性可用于 type=“submit”。
•formtarget----formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
formtarget 属性会覆盖 元素的 target 属性。
formtarget 属性可与 type=“submit” 和 type=“image” 使用。
•height 和 width----height 和 width 属性规定 元素的高度和宽度。
height 和 width 属性仅用于 。
•list----list 属性引用的 元素中包含了 元素的预定义选项。
•min 和 max----min 和 max 属性规定 元素的最小值和最大值。
min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
•multiple----是布尔属性。
如果设置，则规定允许用户在 元素中输入一个以上的值。
multiple 属性适用于以下输入类型：email 和 file。
•pattern (regexp)----pattern 属性规定用于检查 元素值的正则表达式。
pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
提示：请使用全局的 title 属性对模式进行描述以帮助用户。
•placeholder----placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password
•required----是布尔属性。
如果设置，则规定在提交表单之前必须填写输入字段。
required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
•step----step 属性规定 元素的合法数字间隔。
示例：如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。
提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
并为 增加如需属性：
•autocomplete----上同。
•novalidate----novalidate 规定在提交表单时不对表单数据进行验证。
4、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头部</title>
</head>
<body>
<form action="#" method="get">
<!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框 -->
<p>
<label>姓名：</label>
<input type="text" name="username" />
</p>
<!-- input类型为password定义了一个密码输入框 -->
<p>
<label>密码：</label>
<input type="password" name="password" />
</p>
<!-- input类型为radio定义了单选框 -->
<p>
<label>性别：</label>
<label><input type="radio" name="gender" value="0" /> 男</label>
<label><input type="radio" name="gender" value="1" /> 女</label>
</p>
<!-- input类型为checkbox定义了单选框 -->
<p>
<label>爱好：</label>
<label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
<label><input type="checkbox" name="like" value="run" /> 跑步</label>
<label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
</p>
<!-- input类型为file定义上传照片或文件等资源 -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定义多行文本输入 -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<!-- select定义下拉列表选择 -->
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<!--
input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">
</p>
</form>
</body>
</html>
结语
亲爱的浏览者：
你好哈，感谢你的浏览；由于作者水平尚浅理解不深，望多多包涵，有不足或错误之处请在评论指出，我会改正的。简单介绍了一些HTML表单的东西，当然有很多没有总结到，例如表单属性的取值之类的，会在以后总结，你可以下载w3School离线手册自行学习，拜拜。
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
