表单的概述
表单在网页中起着重要的作用，它是与用户交互信息的主要手段。比如我们常用的用户注册、在线联系、在线调查表等都是表单的具体应用形式。新的HTML5对目前的Web表单进行了全面的提升，HTML5 的一个重要的特性就是对表单的改进。过去，需要编写 JavaScript 以增强表单行为——例如，要求访问者提交表单之前必须填写某个字段。HTML5 通过引入新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证，让这一切变得很轻松。
表单的建立
在HTML中，只要在需要使用表单的地方插入成对的标记form，就可以很简单地完成表单的插入。其代码示例如下：
<form name=" " method=" " action=" " >
……
表单元素（如文本框、单选按钮、复选框、列表框、文本区域等）
……
</form>
其中各属性的含义为：
name：该属性表示表单的名称。
method：该属性用来定义提交信息的方式，取值为post或get，默认为get。
action：该属性用来指定处理表单数据的程序文件所在的位置，当单击提交按钮后，就将表单信息提交给该文件进行处理。
完整的属性列表如下所示，截图来自w3school
如下所示是一个建立表单的基本语句：
<form name="form1" method="post" action=" login.html" >
</form>
表单的基本元素
一个表单重要的两个组成部分是表单域和表单按钮。表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮包括提交按钮、复位按钮和一般按钮。
input标签
该标签可以在表单中定义单行文本框、单选按钮、复选框等表单元素。其基本语法如下：
<input name=" " type=" " />
其中，input标签的常用属性如下图所示：
其中type属性的各常用类型如下图所示：
由于input标签属性较多，完整列表移步至w3school
文本框、密码框
文本框和密码框是表单设计里面最常用的两个表单元素，比如登录、注册等页面设计都会用到这两个表单元素。其基本语法如下：
<input type="类型" name="名称" readonly="只读" size="宽度" maxlength="可输入字符数" value="默认值"/>
注：输入框的提示文本可以使用placeholder=“提示文本” 来设置，下面也会记录到。
示例代码如下：
<form>
用户名：<input type="text" name="uname" value="阿瓜"/>
<br /><br />
密码：<input type="password" name="upass" />
<br /><br />
年龄:<input type="text" name="uage" size="3" maxlength="3"/>
</form>
这里用户名的默认值为“阿瓜”，年龄的文本框长度和可输入长度都为3，具体效果如下图所示：
按钮
在表单中常用的按钮有四种，分别是提交按钮、重置按钮、普通按钮和图片按钮。
提交按钮的type属性值为submit。
重置按钮就是让所有表单数据都还原到初始值，其type属性值为reset。
普通按钮就是能生成一个按钮的形状，但单击按钮不会有任何操作，需要配合相关代码支持功能操作，其type属性值为button。
图片按钮当input标记的type属性值为image时，就成为一个图像域，图像域相当于一个图片样式的提交按钮。其中图片按钮的基本语法如下：
<input type="image" src="图片的位置" width="图片宽度" height="图片的高度" />
各按钮的代码如下所示：
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="button" value="普通按钮" onClick="window.alert('请输入用户信息')"/>
<input type="image" src="img/li.jpg" width="120" height="120"/>
其效果如下图所示：
单选按钮
单选按钮(radio button)是较小的圆形按钮，它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type特性设置为radio，就可以创建单选按钮。值得注意的是，在定义选项时，必须保证同一组的单选框的name属性值一样，这样才能在一组选项中作出一个选择。
单选按钮的示例代码如下：
<form>
性别<br /><br />
<input type="radio" name="radio1" value="男生" checked="checked" />男生<br />
<input type="radio" name="radio1" value="女生" />女生
</form>
上述代码效果为男生和女生只能选择其一，且默认选择为男生，具体效果如下图所示：
复选框
复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时，要注意如果name值一样的话，用户所有选项会组合为一个数据进行提交。
复选框的示例代码如下：
<form>
个人爱好<br /><br />
<input type="checkbox" name="checkgroup" value="跳舞" />跳舞<br />
<input type="checkbox" name=" checkgroup " value="唱歌" />唱歌<br />
<input type="checkbox" name=" checkgroup " value="羽毛球" />羽毛球<br />
<input type="checkbox" name=" checkgroup " value="乒乓球" />乒乓球<br />
</form>
其运行效果如下图所示：
文件域
文件域类型用于文件的上传。在设计网站时，有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便，可以让用户自行选择要上传的文件。设置文件域只需将input标记中的type属性值设置为file。文件域的代码示例如下：
<form>
<input type="file" name="user_file" />
</form>
其运行效果如下图所示：
隐藏的表单控件
将input标记中的type属性值设置为hidden类型，即可定义一个隐藏的表单控件。在浏览器中，这个隐藏项用户是看不到的。通常情况下，设计者可以利用隐藏表单控件存储一些数据，可以当作一个页面变量。其代码示例如下图所示：
<input type="hidden" name="hiddenText" value="1000"/>
textarea标签
textarea标记用于定义一个多行文本域，常用于需要输入大量文字的地方，如留言、自我介绍等。由textarea创建的文本域对输入的文本长度没有任何限制，该区域在垂直方向和水平方向上都可以有滚动条。其代码示例如下所示：
<textarea rows="行数" cols="列数">
这是多行文字框
</textarea>
其实例代码如下所示：
<form>
个人简介：
<textarea rows="10" cols="30" name="txtarea">
简介：
</textarea>
</form>
运行效果如下图所示：
列表标签合辑
select标签
select标记是和option标记配合使用的，一个option标记就是下拉菜单中的一项，select标记和option标记的属性分别如表7-4和表7-5所示。
可见一个select标签包含一个或多个option标签，其代码示例如下：
<form>
select：
<select>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Html">Html</option>
</select>
</form>
运行效果如下图所示：
datalist标签
datalist虽然也可以生成列表，但是不能独立使用这个表单。datalist标记除了也需要和option标签配合外，也必须和一个可输入文本框类型一起配合使用。其基本语法如下所示：
<input type="text" list="要绑定的datalist的id" name="名称" />
<datalist id=列表id >
<option label="列表项的说明1 " value="列表项的值1" />
……
<option label="列表项的说明n" value="列表项的值n" />
</datalist>
其实例代码如下所示：
<form>
Webpage:
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</form>
运行效果如下图所示：
新增高级验证表单
HTML5中对input定义了很多全新的表单输入类型，这些新的表单类型大大简化了程序员的编程复杂度，提供了很好的控制和便捷的验证方法。
url类型
定义url类型的输入表单，是在input标记中设置type属性值为url。当提交数据时，该表单会对输入的路径值自动进行验证，输入的是不合法路径时会有提示语句。其基本语法如下：
<input type="url" name="名称"/>
其实例代码如下所示：
<form>
请输入个人主页地址:
<input type="url" name="user_url" />
<input type="submit"/>
</form>
运行效果如下图所示：
email类型
定义email类型的输入表单，是在input标记中设置type属性值为email。当提交数据时，该表单会对输入的邮箱地址值自动进行验证，如果用户输入不符合格式就会给出提示。其基本语法如下：
<input type="email" name="名称"/>
其实例代码如下所示：
<form>
请输入邮箱地址：
<input type="email" name="Uemail" />
<input type="submit" value="提交"/>
</form>
运行效果如下图所示：
日期和时间
HTML5之前日期和时间是需要另外编程插入能选择日期和时间的控件，现在HTML5提供了多种新的日期和时间输入表单，用户可以方便的通过鼠标选择日期和时间。其基本语法如下：
<input type="时间日期关键字" name="名称" />
其实例代码如下所示：
<form>
日期与时间类型输入框：<br/><br/>
<input name="txtDate_1" type="date"/><br/><br/>
<input name="txtDate_2" type="time"><br/><br/>
月份与星期类型输入框：<br/><br/>
<input name="txtDate_3" type="month"/><br/><br/>
<input name="txtDate_4" type="week"/><br/><br/>
日期时间型输入框：<br/><br/>
<input name="txtDate_5" type="datetime"/><br/><br/>
<input name="txtDate_6" type="datetime-local"/><br/><br/>
</form>
运行效果如下图所示：
数字类型
如果要在HTML5中输入整数，有两种数字类型可以实现number和range，这两种类型的属性都是一样的，唯一不同之处在于页面中的展示形式。其中range是进度条的形式，number是文本框的形式，其基本语法如下：
<input type="range或者number" name="名称" min="最小值" max="最大值" step="步长" value="初始值" />
其实例代码如下所示：
<form>
输入0—100之间的数字：
<input type="range" name="inputNum3" min="1" max="100" value="30"/><br/><br/>
输入10-50之间的数字(步长为2)：
<input type="number" name="inputNum2" min="10" max="50" step="2" />
</form>
运行效果如下图所示：
color类型
HTML5提供了type为color的input表单，打破了以前设计网页时，如果想要任意选择一种颜色，必须依赖编辑工具的帮助。用户使用color新型表单控件可以通过鼠标在调色板上自由的选择颜色。其基本语法如下：
<input type="color" name="名称" />
其实例代码如下所示：
<form>
选择颜色：
<input type="color" name="select_color" />
<input type="submit"/>
</form>
运行效果如下图所示：
fieldset（容器）控件组
fieldset标记用于对同一个表单中的控件进行分组，也可以将一个网页上的不同表单进行分组，legend标记与fieldset标记搭配使用，legend标记可以为该控件组定义一个标题。相当于表单分组容器与其标题，其基本语法如下：
<form>
<fieldset>
<legend>控件组的标题</legend>
……
</fieldset>
</form>
其实例代码如下所示：
<form>
<fieldset>
<legend>用户登录</legend><br/>
用户名：<input type="text" name="uname" />
<br /><br />
密 码：<input type="password" name="upass" />
<br /><br />
<input type="submit" value="提交"/>
</fieldset>
</form>
运行效果如下图所示：
search类型
search类型用于搜索功能，但这个类型功能有限，真正的搜索功能是需要大量的代码和算法支持。所以此类型只展示基本语法：
<input type="search" name="usearch" />
tel类型
tel类型用于应该输入电话号码的地方，但HTML5这个类型的表单控件功能暂时没有特殊的验证功能，只是相当于一个普通文本输入框。要想实现可以使用正则表达式（pattern）对其进行验证，其基本语法如下：
<input type="tel" name="phone"/>
通用的表单属性
这些新的属性是input标记的常用的公用属性，如下图所示：
autofocus属性
autofocus属性可以让页面的某个表单元素在页面加载完成后自动地获得焦点，其基本语法如下：
<input autofocus="autofocus" />
使用时只需在目标input标签中加入此句，即可实现效果，故不累述实例。
multiple属性
multiple属性适用于file类型或者select的input标记。multiple属性设置了这种输入框可以同时选中多个输入值，其基本语法如下：
<input type="file" multiple="multiple" />
使用时只需在目标input标签中加入此句，即可实现效果，故不累述实例。
placeholder属性
placeholder属性称为占位属性，其属性值为占位文本。placeholder属性可以在输入域内给浏览者显示一段提示语句，当输入域获得焦点时，也就是当用户将光标定位进去后，这种提示就会自动消失，其基本语法如下：
<input type="属性值" placeholder="提示文本"/>
使用时只需在目标input标签中加入此句，即可实现效果，故不累述实例。
required属性
required属性是一个可用于各种表单的通用属性，该属性的作用是检测输入的内容是否为空，但不负责验证数据是否合法，其基本语法如下：
<inpu required="required" />
使用时只需在目标input标签中加入此句，即可实现效果，故不累述实例。
pattern属性
pattern属性的作用相当于给input输入域加上一个验证模式，这个验证模式（pattern）是一个正则表达式。在提交时，会将输入框中的内容与表达式进行匹配，如果不符，则提示错误信息，其基本语法如下：
<input pattern="正则表达式" />
其实例代码如下所示：
<form>
<fieldset>
<legend>pattern属性：</legend>
输入用户名:
<input name="txtAge" type="text" pattern="^[a-zA-Z]\w{6,8}$" />
<input name="frmSubmit" type="submit" value="提交" />
<br/>以字母开头,包含字符或数字和下划线,长度在6~8之间
</fieldset>
</form>
运行效果如下图所示：
更多正则表达式的方法请自行查阅。
结语
记录仓促，遗漏之处日后补充，如有错误或不足之处，还望指正
