2.6　表单

现实中的表单类似我们去银行办理信用卡填写的单子。在我们设计的网页中，也需要跟用户进行交互，收集用户资料，此时也需要表单。表单在网页中主要负责数据采集，它用<form>标签定义。用户输入的信息都要包含在<form>标签中，通过按钮提交后，<form>、</form>之间包含的数据将被提交到服务器或者电子邮件里。

表单在网页中用来供访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后执行提交（submit）操作，于是表单的内容就从客户端的浏览器传送到服务器端，经过服务器上的ASP或PHP等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。表单应用的场景一般有登录注册、搜索框等，如图2-35所示。

在HTML中，一个完整的表单通常由表单控件（表单元素）、提示信息和表单域3部分构成，如图2-36所示。

对表单构成中的表单控件、提示信息和表单域的具体解释如下。

（1）表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。

（2）提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

（3）表单域：指<form>标签本身，它是一个包含表单元素的区域。相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它处理表单数据所用程序的URL网址，定义数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

2.6.1　表单标签<form>

表单<form>标签是成对标签，用于定义一个完整的表单框架，其内部所包含的各式各样的表单控件数据将被完整地提交给服务器。

表单的基本语法格式如下：

表单标签的常用属性主要有name、action、method、enctype等，其属性、取值及描述如表2-16所示。

method属性用于设置表单数据的提交方式，其取值为get或post，二者的区别如下：

（1）get方式提交的数据参数会直接拼接在URL后面，直接在浏览器网址栏可以看到全部内容，而post方式则看不到。

（2）get方式一般用于提交少量数据，最多提交2KB数据；post方式用来提交大量数据，post理论上对数据量没有限制，完全取决于服务器的限制要求。

（3）post方式适用于安全级别相对较高的数据，而get方式相对不安全。

enctype属性用于规定表单数据发送时的编码方式，有以下3种属性值。

（1）text/plain：主要用于向服务器传递大量文本数据，比较适用于电子邮件的应用。

（2）multipart/form-data：上传二进制数据，只有使用了multipart/form-data才能完整地对文件数据进行上传操作。

（3）application/x-www-form-urlencoded：是其默认值。该属性主要用于处理少量文本数据的传递。在向服务器发送大量文件（包含非ASCII字符的文本或二进制数据）时效率很低。

单纯的<form>标签不包含任何可视化内容，需要与表单组件配合使用达到完整的表单效果。

2.6.2　输入标签<input>

<input>标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型，如文本输入框、密码框、单选和复选框等。除了type属性之外，<input>标签还可以定义很多其他的属性，其常用属性如表2-17所示。

<input>标签的基本语法格式如下：

1．单行文本框

在<input>标签中，type的属性值为text时表示单行文本输入框，这也是type属性的默认值。这是见得最多也是使用最多的属性值，例如登录时输入用户名，注册时输入电话号码、电子邮件、家庭住址等。

基本语法格式如下：

单行文本的name属性值必须是唯一的，可以使用size属性将文本框可见字符的宽度设置为20，使用maxlength属性设置最多允许输入10个字符。默认情况下，单行文本框首次加载时内容为空，可以为其value属性预设初始文本，代码如下：

2．密码框

在<input>标签中，type的属性值为password时表示密码框，和单行文本框最大的区别是当在此输入框输入信息时显示为保密字符，其余特征和单行文本框相同，如例2-27所示。

基本语法如下：

【例2-27】　用户信息输入

在浏览器中的显示效果如图2-37所示。

注意：表单控件要想正确提交，必须设置name属性。

3．单选按钮

在<input>标签中，type的属性值为radio时表示单选按钮，默认样式是小圆圈，通常出现在多选一的页面设定中。

基本语法格式如下：

多个radio类型的按钮可以组合在一起使用，为它们添加相同的name属性值即可表示这些单选按钮属于同一个组。name值一定要相同，否则就不能多选一，其中value属性值为该表单元素在提交数据时传递的数据值，示例代码如下：

单选按钮可以使用checked属性设置默认选项。checked属性的完整写法为checked="checked"，可简写为checked。如果没有使用checked属性，则首次加载时所有选项均处于未被选中状态，示例代码如下：

注意：只能为单选按钮组的其中一个选项使用checked属性。

4．复选框

在<input>标签中，type的属性值为checkbox时表示复选框，复选框也叫多选框。

基本语法格式如下：

用户可以选择多个选项，其中value属性中的值用来设置用户选中该项目后提交到服务器中的值，name为复选框的名称，相同的name属性值即可表示这些复选框属于同一个组，即使在同一个组内复选框也允许多选，而且在复选框中允许多个选项同时使用checked属性，并且允许默认选中多个选项，示例代码如下：

复选框与单选按钮的应用如例2-28所示。

【例2-28】　复选框与单选按钮的应用

在浏览器中的显示效果如图2-38所示。

5．提交按钮

在<input>标签中，type的属性值为submit时表示提交按钮，在单击“提交”按钮时可以向服务器发送表单数据，数据会发送到表单的action属性中指定的页面，value属性中的值为按钮上显示的文字。

基本语法格式如下：

如果不设置value属性值，则它的初始值为“提交查询按钮”。

6．重置按钮

在<input>标签中，type的属性值为reset时表示重置按钮，重置按钮的作用是单击按钮之后表单会刷新回到默认状态，清空表单中所有的数据。在value属性中输入的值为按钮上显示的文本。

基本语法格式如下：

7．普通按钮

在<input>标签中，type的属性值为button时表示普通按钮，value属性值为按钮上显示的文本。

基本语法格式如下：

该按钮在单击后无任何效果，需要和JS脚本配合使用。可以为其添加onclick事件，当用户单击按钮时触发事件并执行代码，示例代码如下：

8．图片按钮

在<input>标签中，type的属性值为image时表示图片按钮，这个功能是将图片转换为图片形式按钮，该按钮的单击效果与submit按钮的单击效果完全一样，也是用于表单数据的提交。

基本语法格式如下：

图片提交按钮需要配合src和alt属性使用，其中src是图片的路径，alt属性是图片无法正常显示时的替代文本内容，示例代码如下：

使用<input>标签中的image类型生成图片提交按钮，可以替代纯文字的submit按钮，如例2-29所示。

【例2-29】　3种按钮的应用

在浏览器中的显示效果如图2-39所示。

当单击图2-39（a）中的“提交”或图片“登录”按钮时会跳转到百度页面。输入的信息数据以“name属性值=value属性值”（键-值对）形式提交于服务器中，如username=admin。

注意：表单控件要想正确提交，必须设置name属性。用户在控件中输入的数据默认会赋值给value属性。

9．文件上传

在<input>标签中，type的属性值为file时表示文件上传，使用户可以选择一个或多个元素以提交表单的方式上传到服务器。

基本语法格式如下：

除了被所有<input>标签共享的公共属性，file类型的<input>标签还支持下列属性，如表2-18所示。

file类型的<input>标签特有属性的详细讲解如下。

（1）accept：accept属性是一个字符串，它定义了文件input应该接受的文件类型，示例代码如下：

（2）capture：capture属性指出了文件input是图片还是视频／音频类型，如果存在，则请求使用设备的媒体捕获设备（如摄像机），而不是请求一个文件输入。

（3）files：FileList对象每个已选择的文件。如果multiple属性没有指定，则这个列表只有一个成员。

（4）multiple：当将布尔类型属性指定为multiple时，文件input允许用户选择多个文件。用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件（如按住Shift或Ctrl键，然后单击）。如果只想让用户为每个<input>选择一个文件，则可省略multiple属性。

让我们来看一个完整文件上传的示例，如例2-30所示。

【例2-30】　多格式文件上传应用

在浏览器中的显示效果如图2-40所示。

10．隐藏域

在<input>标签中，type的属性值为hidden时表示隐藏域，隐藏域在页面中对于用户来讲是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。

基本语法格式如下：

浏览者单击“发送”按钮发送表单时，隐藏域的信息也被一起发送到服务器。有些时候我们要给用户一信息，让他在提交表单时确定用户的身份，如例2-31所示。

【例2-31】　隐藏域的应用

在浏览器中的显示效果如图2-41所示。

2.6.3　标记标签<label>

在HTML中<label>标签不会向用户展示任何特殊内容，它的作用是把自己与其他标签“绑定”起来，也可以说是与其他元素关联到一起。它提升了用户的使用体验，当用户单击由<label>元素定义的文本内容时，与该文本内容关联的输入控件将获得焦点。

<label>与其他元素关联的方式有以下两种。

（1）显式关联：显式关联只要<label>的"for"属性值和目标标签的ID属性值一致即可。

（2）隐式关联：隐式关联可通过标签嵌套完成。

1．显式关联

一个具有两个文本输入框及相关标签（label）的HTML表单，示例代码如下：

当单击文本内容或文本框时都会在文本框中聚焦，这就是<label>标签的功能。

2．隐式关联

现在把<input>标签嵌套到<label>标签中以实现隐式关联，示例代码如下：

2.6.4　多行文本标签<textarea>

在使用表单时，例如姓名、年龄字段一般使用单行文本框，但是当涉及描述信息且内容比较多时，单行文本框很有可能放不下所有的内容，这时就需要用到多行文本框。

在HTML中，使用<textarea>标签来表示多行文本框，又叫作文本域。与其他<input>标签不同，<textarea>标签是闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。

具体语法格式如下：

文本域<textarea>的属性解释：

（1）同所有表单元素相同，文本域要想正确提交数据，也必须设置name属性。

（2）cols属性用来指定每行可以显示的字符数，也就是文本域的可见宽度。一般情况下，如果内容超出文本域宽度，会自动换行显示。

（3）rows属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容。

默认情况下，<textarea>标签形成的多行文本框是可编辑状态，可以使用readonly属性将文本域设置为只读状态，或使用disabled属性禁用该文本域，如例2-32所示。

【例2-32】　文本域的应用

在浏览器中的显示效果如图2-42所示。

通过运行结果可以发现，文本域的右下角有一个收缩按钮，拖曳该按钮可以手动改变文本域的宽和高。

2.6.5　下拉列表标签<select>

下拉列表是网页中一种最节省页面空间的选择方式，最常见的用法是<select>标签配合<option>标签使用，形成下拉菜单。

基本语法格式如下：

<select>标签和<option>标签的属性、取值及描述如表2-19所示。

当下拉选项比较多且需要进行分类时，可以使用<optgroup>标签定义选项组。<optgroup>标签有两个属性，如表2-20所示。

具体语法格式，示例代码如下：

使用列表<select>标签配合选项<option>标签、选项组</optgroup>标签可形成不同样式的列表菜单，如例2-33所示。

【例2-33】　列表标签应用

在浏览器中的显示效果如图2-43所示。

2.6.6　域标签<fieldset>

<fieldset>标签可将表单内的相关元素分组，通常和<legend>标签一起用，<legend>标签定义了<fieldset>的提示信息。

具体语法格式如下：

示例显示效果如图2-44所示。

这个标签主要用于页面元素的分组，因为现在流行的页面布局方式是DIV+CSS，所以这些传统的HTML标签应用的机会已经非常少了。

2.6.7　综合实战

以“阿里巴巴注册页面”为例，其页面显示效果如图2-45所示。

页面整体采用表格布局来完成页面设计，注册页面使用表单和表单控件实现，实现代码如下：