2.5.2 表单项标签

表单中的每一项，包括文本框、密码框、单选框、多选框等，都称为表单项，一个表单中可以包含多个表单项。

介绍表单项标签前，首先了解一下其常用属性，如name属性和value属性。

用户在使用一个软件系统时，有时需要一次性提交很多数据，在这种情况下肯定不可能要求用户一个数据一个数据地提交，而是将所有数据填好后一起提交。那么，由此会带来一个问题，服务器端如何从众多数据中识别出具体的用户信息呢（如收货人、所在地区、详细地址、手机号码等）？

很简单，需要给每个数据都起一个名字，发送数据时用名字携带对应的数据，接收数据时通过名字获取对应的数据。在各个具体的表单项标签中，我们通过name属性给数据起名字，通过value属性来保存要发送给服务器端的值。

但是，名字和值之间既有可能是一个名字对应一个值，也有可能是一个名字对应多个值。如此看来，这样的关系很像Java中的map集合，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的类型是：Map<String，String[]>，即name属性就是Map的键，value属性就是Map的值。

了解了name属性和value属性后，下面我们来看具体的表单项标签。前面的用户登录表单中已经介绍了文本框、密码框的用法，下面接着介绍其余表单项。

（1）单选框。

<input>标签的type属性为radio表示单选框，name属性相同的radio为一组，组内互斥，即一组只能选择一个值。示例代码如下。

上述代码中呈现了两组属性，name属性为“season”代表一组，name属性为“animal”的代表另一组。用户在选择了一个radio并提交表单后，这个radio的name属性和value属性将组成一个键值对发送给服务器端。另外，设置checked属性，表示该radio默认被选。

值得注意的是，如果属性名和属性值一致，可以省略属性值，只写checked即可。单选框的页面效果如图2-50所示。

（2）多选框。

<input>标签的 type 属性为 checkbox 表示多选框，与单选框的区别在于，name 属性相同的 checkbox为一组，组内一次可以选择多个值。示例代码如下。

同单选框，这里设置checked属性，表示该checkbox默认被选。多选框的页面效果如图2-51所示。

（3）下拉框。

下拉框用到了2种标签，其中，<select>标签用来定义下拉列表，<option>标签设置列表项。示例代码如下。

name 属性在<select>标签中设置。value 属性在<option>标签中设置。<option>标签的标签体是显示出来给用户看的，提交到服务器端的是value属性的值。

值得注意的是，通过在<option>标签中设置“selected="selected"”属性实现默认选中的效果。同理，其可以简化为只写selected。

下拉框的页面效果如图2-52所示。

（4）按钮。

按钮分为普通按钮、重置按钮和提交按钮三种。普通按钮，表示单击后无效果，需要通过 JavaScript绑定单击响应函数。重置按钮，表示单击后将表单内的所有表单项都恢复为默认值。提交按钮，表示单击后提交表单。

以上三种按钮分别包含两种形式，下面每种按钮选其一进行演示，按钮的演示效果如图2-53所示。

（5）隐藏域。

通过表单，隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。一般，隐藏域用来设置一些需要和表单一起提交但是不希望用户看到的数据，如用户id，示例代码如下。

（6）多行文本框。

<textarea>标签表示多行文本框。示例代码如下。

多行文本框的页面效果如图2-54所示，可以在其中输入多行文本。

值得注意的是，<textarea>标签没有value属性，如果要设置默认值，则其需要写在开始和结束标签之间。

（7）文件上传。

<input>标签的type属性为file表示文件上传。示例代码如下。

文件上传的演示效果如图2-55所示。