3.4 表单
表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。表单在网页上随处可见，如用于在登录页面输入账号、客户留言、搜索产品等，如图3-16中的留言板表单所示。
3.4.1 表单的基本概念
表单被广泛用于各种信息的搜集与反馈。一个完整的交互表单由两部分组成，一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务器端的应用程序，用于处理浏览者提交的信息。当访问者在Web浏览器中显示的表单中输入信息后，单击“提交”按钮，这些信息将被发送给服务器。服务器端脚本或应用程序将对这些信息进行处理，并将结果发送回访问者。表单的工作原理如图3-17所示。
图3-16 留言板表单
图3-17 表单的工作原理
3.4.2 表单标签
网页上由可输入表项或选择项目的控件所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单。
14 表单
在一个HTML页面中允许有多个表单，表单的基本语法及格式如下。
<form>标签主要处理表单结果的处理和传送，常用属性的含义如下。
①name属性：name属性用于表单命名，表单命名之后就可以用JavaScript脚本语言对它进行控制。
②action属性：action属性用于指定表单处理的方式，即指定处理表单信息的服务器端应用程序，往往是E-mail地址或网址。
③method属性：method属性用于指定表单处理表单数据的方法，method的值可以为get或post，默认方式是get。
3.4.3 表单元素
表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单中通常包含一个或多个表单元素，常见的表单元素见表3-1。
表3-1 常见的表单元素
例如，常见的网络问卷调查表单，其中包含的表单元素如图3-18所示。
图3-18 常见的网络问卷调查表单
1.<input>标签
<input>标签用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。<input>标签的基本语法及格式如下。
<input>标签常用属性的含义如下。
①type属性：指定要加入表单项目的类型（text，password，checkbox，radio，button，hidden，email，date pickers，number，range，image，file，submit或reset等）。
②name属性：该表项的控制名，主要在处理表单时起作用。
③size属性：输入字段中的可见字符数。
④maxlength属性：允许输入的最大字符数。
⑤checked属性：当页面加载时是否预先选择该input元素（适用于epub:type="checkbox"或type="radio"的情况）。
⑥step属性：输入字段的合法数字间隔。
⑦max属性：输入字段的最大值。
⑧min属性：输入字段的最小值。
⑨required属性：设置必须输入字段的值。
⑩pattern属性：输入字段的值的模式或格式。
⑪readonly属性：设置字段的值无法修改。
⑫placeholder属性：设置用户填写输入字段的提示。
⑬autocomplete属性：设置是否使用输入字段的自动完成功能。
⑭autofocus属性：设置输入字段在页面加载时是否获得焦点（不适用于type="hidden"的情况）。
⑮disabled属性：当页面加载时是否禁用该input元素（不适用于type="hidden"的情况）。
（1）文字和密码的输入
使用<input>标签的type属性，可以在表单中加入表项，并控制表项的风格。如果type属性值为text，则输入的文本以标准的字符显示；如果type属性值为password，则输入的文本显示为“*”。在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中应该输入的内容。文本框和密码框的格式如下。
（2）重置和提交
表单按钮用于控制网页中的表单。表单按钮有4种类型，即提交按钮、重置按钮、普通按钮和图片按钮。使用提交按钮（submit）可以将填写在表单中的内容发送到服务器；使用重置按钮（reset）可以将表单的内容返回初始值；使用普通按钮（button）可以制作一个用于触发事件的按钮；使用图片按钮（image）可以制作一个美观的按钮。
4种按钮的格式如下。
（3）复选框和单选按钮
在页面中有些地方需要列出几个项目，让浏览者通过选择钮来选择项目。选择钮可以是复选框（checkbox）或单选按钮（radio）。用<input>标签的type属性可设置选择钮的类型；value属性可设置该选择钮的控制初值，用以告诉表单制作者选择结果；用checked属性表示是否为默认选中项；name属性是控制名，同一组的选择钮的控制名是一样的。复选框和单选钮的格式如下。
（4）电子邮件输入框
当用户需要通过表单提交电子邮件信息时，可以将<input>标签的type属性设置为email类型，即可设计用于包含Email地址的输入框。当用户提交表单时，会自动验证输入的Email地址的合法性。电子邮件输入框的格式如下。
（5）日期时间选择器
HTML5提供了日期时间选择器date pickers，拥有多个可供选取日期和时间的新型输入文本框，类型如下。
①date：选取日、月、年。
②month：选取月、年。
③week：选取周和年。
④time：选取时间（小时和分钟）
⑤datetime：选取时间日、月、年（UTC世界标准时间）。
⑥datetime-local：选取时间日、月、年（本地时间）。
日期时间选择器的语法格式如下。
（6）URL输入框
当用户需要通过表单提交网站的URL地址时，将<input>标签的type属性设置为url类型，即可设计用于输入URL地址的输入框。当用户提交表单时，会自动验证输入的URL地址的合法性。格式如下。
（7）数值输入框
当用户需要通过表单提交数值型数据时，将<input>标签的type属性设置为number类型，即可设计用于包含数值型数据的输入框。当用户提交表单时，会自动验证输入的数值型数据的合法性。格式如下。
（8）范围滚动条
当用户需要通过表单提交限定在一定范围内的数值型数据时，将<input>标签的type属性设置为range类型，即可设计用于设置输入数值范围的滚动条。当用户提交表单时，会自动验证输入数值的范围合法性。格式如下。
另外，用户在使用数值输入框和范围滚动条时可以配合使用max（最大值）、min（最小值）、step（数字间隔）和value（默认值）属性来限定数值。
2.选择栏<select>标签
当浏览者选择的项目较多时，如果用选择钮来选择，所占页面的空间就会较大，这时可以用<select>标签和<option>标签来设置选择栏。
（1）<select>标签
<select>标签的格式如下。
<select>标签各个属性的含义如下。
①size属性：可选项，用于改变下拉列表的大小。size属性的值是数字，表示显示在下拉列表中选项的数目，当size属性的值小于列表项数目时，浏览器会为该下拉列表添加滚动条，用户可以使用滚动条来查看所有的选项，size属性默认值为1。
②name属性：选择栏的名称。
③multiple属性：如果加上该属性，表示允许用户从列表中选择多项。
（2）<option>标签
<option>标签的格式如下。
<option>标签各个属性的含义如下。
①selected属性：用来指定选项的初始状态，表示该选项在初始时被选中。
②value属性：用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。
选择栏有两种形式：弹出式选择栏和字段式选择栏。字段式选择栏与弹出式选择栏的主要区别在于，前者在<select>标签中的size属性值取大于1的值，此值表示在选择栏中不拖动滚动条可以显示的选项的数目。
3.多行文本域<textarea>…</textarea>
意见反馈栏可以供浏览者发表意见和建议，所以提供的输入区域一般较大，可以输入较多的文字。使用<textarea>标签可以定义高度超过一行的文本输入框。<textarea>标签是成对标签，开始标签<textarea>和结束标签</textarea>之间的内容就是显示在文本输入框中的初始信息。格式如下。
其中的行数和列数是指不拖动滚动条就可看到的部分。
3.4.4 案例——制作爱心包装会员注册表单
前面讲解了表单元素的基本用法，其中，文本字段比较简单，也是最常用的表单标签。选择栏在具体的应用过程中有一定的难度，读者需要结合实践、反复练习才能够掌握。下面通过一个综合的案例将这些表单元素集成在一起，制作爱心包装会员注册表单。
【例3-13】 制作爱心包装会员注册表单。本例在浏览器中显示的效果如图3-19所示。
图3-19 会员注册表单
【说明】“职业”选择栏使用的是弹出式选择栏；“收入”选择栏使用的是字段式选择栏，<select>标签中的size属性值设置为3。
3.4.5 表单分组
大型表单容易在视觉上产生混淆，通过对表单分组可以将表单上的元素在形式上进行组合，达到一目了然的效果。常见的分组标签有<fieldset>和<legend>标签，格式如下。
其中，<fieldset>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示；<legend>标签则是为<fieldset>标签边框添加相关的标题。
【例3-14】 表单分组示例。本例文件3-14.html在浏览器中显示的效果如图3-20所示。
图3-20 表单分组示例
3.4.6 使用表格布局表单
从第3.4.4节的爱心包装会员注册表单案例中可以看出，由于表单没有经过布局，页面整体看起来不太美观，如图3-19所示。在实际应用中，可以采用以下两种方法布局表单：一是使用表格布局表单，二是使用CSS样式布局表单。本节主要讲解使用表格布局表单。
【例3-15】使用表格布局制作爱心包装联系我们表单，表格布局示意图如图3-21所示，最外围的虚线表示表单，表单内部包含一个6行3列的表格。其中，第一行和最后一行使用了跨2列的设置。本例文件3-15.html在浏览器中显示的效果如图3-22所示。
图3-21 表格布局示意图
图3-22 表格布局表单的页面显示效果
3.4.7 表单的高级用法
在某些情况下，用户需要对表单元素进行限制，如设置表单元素为只读或禁用。限制表单元素常应用于以下场景。
1）只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。
2）禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。
只读和禁用两种效果分别通过设置readonly和disabled属性来实现。
【例3-16】 制作爱心包装服务协议页面，服务协议只能阅读而不能修改，并且只有用户同意注册协议后，才允许单击“注册”按钮。本例在浏览器中显示的效果如图3-23所示。
图3-23 只读和禁用表单元素的页面显示效果
【说明】用户勾选“同意以上协议”复选框并不能真正实现使“注册”按钮有效，还需要为复选框添加JavaScript脚本才能实现这一功能，这里只是讲解如何使表单元素只读和禁用。