8.1.2 表单元素
表单之所以能够呈现不同的格式，例如注册表单、登录表单、搜索框等，都是因为表单的不同元素组成了表单的特殊格式。为了收集不同的数据，根据数据量的大小和数据的类型等，表单可以提供多种元素来完成。
1）文本框
首先来给大家说一下我们最常见的文本框。文本框通常用来收集少量的文本内容，如搜索关键词、用户账号、用户昵称等字符较少的数据。文本框的代码，如例8.2所示。
【例8.2】文本框的使用。
运行结果如图8.2所示。
图8.2
例中type、name、value是＜input＞标签的常用属性，text是type属性的值，文本框专用，不可更改。account是name属性的值，是表单向服务器提交所收集数据的变量名称，可以根据需求自定义，将随数据一起被提交到服务器。“文本框的值”是value属性的值，是文本框的默认值，常用来提示用户文本框中可以填写的内容，或用户没有添加任何内容时，默认提交到服务器的内容。
2）密码框
密码框通常在用户注册或用户登录时用到，通常用来收集明文密码的内容。密码框元素如例8.3所示。
【例8.3】密码框的使用。
运行结果如图8.3所示。
图8.3
例中type、name、value是＜input＞标签的常用属性，password是type属性的值，密码框专用，不可更改。mypwd是name属性的值，是表单向服务器提交所收集数据的变量名称，可以根据需求自定义，将随数据一起被提交到服务器。该例中value属性值默认为空。如果用户添加密码，那么用户所添加的密码内容将作为value属性的值被提交到服务器。
3）隐藏域
隐藏域元素，通常用来向服务器提交一些网页上不需要被用户看到的内容，由网页制作者预先设置好隐藏域的内容，例如表单的编号、使用次数等信息。隐藏域元素如例8.4所示。
【例8.4】使用隐藏域。
运行结果如图8.4所示。
图8.4
例中type、name、value是＜input＞标签的常用属性，hidden是type属性的值，隐藏域专用，不可更改。id是name属性的值，是表单向服务器提交所收集数据的变量名称，可以根据需求自定义，将随数据一起被提交到服务器。该例中value属性值由网页制作者设置，用来提交不需要用户看到的数据。
4）复选框
表单中需要同时提供多个选项给用户选择的时候，我们就需要用到复选框。比如我们需要收集用户的一些爱好，如爬山、健身、游泳、听歌、读书、看电影等。创建复选框元素如例8.5所示。
【例8.5】使用复选框。
运行结果如图8.5所示。
图8.5
例中type、name、value是＜input＞标签的常用属性，checkbox是type属性的值，复选框专用，不可更改。name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称，如例8.5中所示。在开发过程中，也有一些特殊的情况，我们也可以如例8.6一样定义复选框的名称。
【例8.6】name相同时的复选框。
运行结果和例8.5相同。这样定义，服务器端接收到的复选框的数据会是一个数组。value属性会将用户选中的数据采集到服务器，如图8.6所示。
图8.6
5）单选框
单选框通常用来让用户选择唯一的答案，例如选择性别只有选男或女，或未知这样唯一确定性的答案。单选框通常以组的形式出现，这一组的单选按钮，名称必须一致，否则无法实现单选效果。单选框元素代码如例8.7，运行结果如图8.7所示。
【例8.7】使用单选框。
图8.7
如例8.7代码所示，单选框也是由input标签来实现的。其中，value属性的值为radio，不可更改，name属性的值由开发者设定，会随着表单一起提交到服务器。大家可以试着改变name属性的值，使每个单选框name的值都不同，看一看表单提交之后的效果。(https://www.daowen.com)
6）文本域
文本域又叫多行文本框，可以让用户输入多行文本，例如文章简介等一些信息。文本域和文本框都可以让用户输入文本，区别在于文本域可以让用户输入更多的文本，代码形式也略有不同。文本域元素的使用方法如例8.8所示。
【例8.8】使用文本域。
运行结果如图8.8所示。
图8.8
大家从例中可以看出文本域使用了＜textarea＞＜／textarea＞标签，该标签是成对出现的，并且没有value属性。name属性同样是文本域收集数据提交到服务器的变量名称，由开发者来设定。cols属性定义多行文本框的宽度，单位是单个字符宽度。rows属性定义多行文本框的高度，单位是单个字符宽度。
7）文件域
文件域又叫文件上传框，可以让用户上传一些文件，例如图片类型的文件、文本类型的文件、表格、word文档、应用文件等。使用文件域有一个特殊的要求，那就是表单的传输方式必须设置为post，表单标签中必须设置enctype＝＂multipart／form－data＂来确保文件被正确编码。文件域元素的使用方法如例8.9所示。
【例8.9】使用文域。
运行结果如图8.9所示。
图8.9
运行例可以看到，有一个文件上传的按钮出现，单击该按钮弹出文件夹选择文件，待上传的文件地址将被保留在表单中。name属性可以用来设定服务器接收数据的变量名。
8）下拉选择框
下拉选择框允许用户在一个有限的空间设置多种选项。例如地址信息，我们可以选择省市区等，而这种情况我们通常就可以使用下拉选择框。下拉选择框的元素设置方法如例8.10所示。
【例8.10】使用下拉选择框。
图8.10
运行结果如图8.10所示。
从案例中我们可以看出下拉选择框是由＜select＞标签表示的，整个下拉选择框分成了两部分，一部分是命名标签＜select＞，另一部分是取值标签＜option＞。＜select＞标签里面有name属性用来设置提交服务器数据的变量名称，下拉选框的数值由＜option＞标签里面的value属性来提供。＜option＞标签必须写在＜select＞标签里面，作为下拉选项。
9）表单按钮
以上介绍的表单元素能够共同使用以组成表单所需要的各项内容，而如果想要提交表单的数据，则需要使用到一些按钮，其中最重要的就是提交按钮。下面将介绍表单中经常用到的三种按钮：提交按钮、重置按钮和图片按钮。
（1）提交按钮。
提交按钮能够将表单的数据内容提交到＜form＞标签action属性值指定的地址。具体的使用方法请看例8.11。
【例8.11】使用提交按钮。
运行结果如图8.11所示。
图8.11
大家在运行例8.11的时候需要注意到，当我们用鼠标左键单击搜索按钮的时候应该注意浏览器地址栏的变化。
（2）图片按钮。
图片按钮和提交按钮，一样都是可以把表单的数据提交到指定的地址，唯一的区别就是图片按钮是以图片的形式出现的按钮，而提交按钮就是一种自定义提示文字的提交按钮。如果type属性设置为image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量，如例8.12所示。
【例8.12】使图片按钮实现提交。
例8.12运行结果如图8.12所示。
图8.12
从运行结果中，大家可以看到浏览器地址栏的变化其中多了个x和y的数值，这里的x和y就是鼠标在单击图片提交按钮的时候，鼠标位置相对于图片左边和上边的像素距离。
（3）重置按钮。
重置按钮具有清空表单数据的作用，单击重置按钮以后，表单中添加的各种数据将被清空。＜input＞标签type属性的值为reset的时候，该按钮即为重置按钮。
