6.3 使用FORM表单实现浏览器端的数据采集
FORM表单由以下3部分组成。
（1）表单标签：定义了表单处理程序及数据提交方式等信息。
（2）表单控件：包括单行文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮。
6.3.1 表单标签<form></form>
表单标签<form>常用的属性有action、method、enctype、title、name等。
（1）action 属性设置当前表单数据“提交”的目的地址。当不设置 action 属性，或设置值等于空字符串（即action=""）时，表单数据提交给当前页面。
（2）method属性设置表单数据的提交方式。method属性的值为GET或POST，默认为GET。
（3）title 属性设置表单的提示信息。当用户的鼠标指针在表单处停留时，浏览器用一个黄色的小浮标显示提示文本。
（4）enctype属性设置提交表单数据时的编码方式。enctype属 性 的 值 为 multipart/form-data 或 application/x-www-form-urlencoded，默认为application/x- www-form-urlencoded。当一个FORM表单中存在文件上传框时，必须将enctype属性设置为multipart/form-data编码方式。
（5）name属性为当前的FORM表单命名。
例如程序form.html如下，该程序的运行结果如图6-7所示。
<form action="register.php" method="post" title="简单的用户注册" enctype="multipart/form-data">
这是FORM表单区域
</form>
6.3.2 表单控件
表单标签<form></form>及其属性设置完毕后，就要在表单标签<form></form>中添加表单控件采集浏览器用户的数据。这些表单控件包括：单行文本框、密码框、多行文本框、隐藏域、复选框、单选框、文件上传框和下拉列表等。
1．单行文本框
单行文本框是一种让浏览器用户自己输入内容的表单控件，通常被用来填写简短的回答如姓名、地址等。
代码格式：<input type="text" name="…" size="…" maxlength="…" value="…" />
属性解释如下。
type="text"定义单行文本输入框。
name属性为单行文本框的命名。
size属性定义单行文本框的宽度。
maxlength属性定义最多输入的字符数。
value属性定义单行文本框的初始值。
2．密码框
密码框是一种特殊的单行文本框，当浏览器用户输入文字时，文字会被星号或其他符号代替。
代码格式：<input type="password" name="…" size="…" maxlength="…" />
属性解释如下。
type="password"定义密码框。
name属性为密码框命名。
size属性定义密码框的宽度。
maxlength属性定义最多输入的字符数。
3．多行文本框
多行文本框是一种让浏览器用户自己输入内容的表单对象，能够让浏览器用户填写较长的内容。
代码格式：<textarea name="…" cols="…" rows="…">content</textarea>
属性解释如下。
name属性为多行文本框命名。
cols属性定义多行文本框的宽度。
rows属性定义多行文本框的高度。
content定义了多行文本框中显示的文字内容。
4．隐藏域
隐藏域用来保存一些特定信息，对于浏览器用户来说，隐藏域是看不见的，但在表单提交时，隐藏域的name属性和value属性组成的信息将被发送给WEB服务器。
代码格式：<input type="hidden" name="…" value="…" />
属性解释如下。
type="hidden"定义隐藏域。
name属性为隐藏域命名。
value属性定义隐藏域的值。
5．复选框
复选框用来为浏览器用户提供一系列选项进行选择。
代码格式：<input type="checkbox" name="…" value="…" checked/>
属性解释如下。
type="checkbox"定义复选框。
name属性为复选框命名。
value属性定义复选框的值。
checked属性定义初始状态时该复选框被选中，该属性没有具体的取值。
6．单选框
单选框用来为浏览器用户提供一个选项进行选择，同一组内的单选框之间是相互排斥的。
代码格式：<input type="radio" name="…" value="…" checked/>
属性解释如下。
type="radio"定义单选框。
name 属性为单选框命名。单选框都是以组为单位使用的，同一组中的单选框 name 属性值必须相同。
value属性定义单选框的值。
checked属性定义初始状态时该单选框是被选中的，该属性没有具体的取值。
7．文件上传框
浏览器用户可以使用文件上传框来选择上传文件，表单提交时，该上传文件将与其他表单数据一起提交。文件上传框看上去和其他文本框差不多，只不过它还包含了一个“浏览”按钮。浏览器用户既可以在文本框中输入需要上传的文件路径，也可以单击“浏览”按钮选择需要上传的文件。
代码格式：<input type="file" name="…" size="…" maxlength="…" />
属性解释如下。
type="file"定义文件上传框。
name属性为文件上传框命名。
size属性定义文件上传框的宽度。
maxlength属性定义最多输入的字符数。
每个文件上传框只能选择一个文件。
使用文件上传框时，表单标签<form>的enctype属性必须设置为multipart/form-data， method属性必须设置为POST提交方式。
8．下拉选择框
下拉选择框分为单选与多选两种下拉选择框。单选下拉选择框允许浏览器用户在一系列下拉选项中选择一个选项，其功能类似于单选框radio；多选下拉选择框允许浏览器用户在一系列下拉选项中选择多个选项，其功能类似于复选框checkbox。
代码格式：
<select name="…" size="…" multiple>
<option value="…" selected>…</option>
<option value="…">…</option>
……
</select>
select标签用来创建一个下拉选择框。select标签属性解释如下。
name属性为下拉选择框命名。
size属性指定下拉选择框的高度，默认值为1。
multiple属性指定该下拉选择框是单选还是多选下拉选择框，默认为单选下拉选择框，该属性没有具体的取值；当下拉选择框为多选下拉选择框时，按住Ctrl键，同时单击选择项进行多选，或者按住Shift键进行连续多选。
option 标签用于定义下拉选择框中的一个选项，它放在<select></select>标签对之间。option标签属性解释如下。
value 属性指定每个选项的值。如果该属性没有定义，选项的值为<option>和</option>之间的内容。
selected属性指定初始状态时，该选项是选中状态。该属性没有具体的取值。
HTML 标签名和属性名大小写不敏感（不包括属性值），即<input type="text" name="userName" size="20" maxlength="33" value="victor" /> 等 效 于 <INPUT TYPE="text" NAME="userName" SIZE="20" MAXLENGTH="33" VALUE="victor" />。
表单控件嵌套在FORM表单中才有意义，且每个表单控件都要用一个name属性进行标识。这是因为WEB服务器将依据表单控件的name属性判断传递给服务器的每个值分别是由哪个表单控件产生的。为了确保数据的准确采集，需要为每个表单控件定义一个独一无二的名称（同为一个组的单选框以及在表单控件中使用数组两种情况除外）。
6.3.3 在表单控件中使用数组
在一个HTML页面中，有时并不清楚某种表单控件的具体个数，例如在进行多文件上传时，并不能确定浏览器用户究竟选择多少个上传文件，更无法确定页面中需要多少个文件上传框。在表单控件中使用数组可以解决类似的问题。
在表单控件的 name 属性值后面加上方括号“[ ]”从而实现在表单控件中使用数组。使用表单控件数组后，当表单提交时，相同name属性的表单控件则以数组的方式向WEB服务器提交多个数据。
6.3.4 表单按钮
表单按钮包括提交按钮submit、图像提交按钮image、重置按钮reset和自定义按钮button。提交按钮和图像提交按钮用于提交表单数据，重置按钮用于将表单数据恢复到初始状态，自定义按钮需要和JavaScript结合使用才有意义。
1．提交按钮
提交按钮用于将表单数据提交到 WEB 服务器。单击提交按钮后，表单数据被提交给表单标签action属性指定的PHP文件。
代码格式：<input type="submit" name="…" value="…" />
属性解释如下。
type="submit"定义提交按钮。
name属性为提交按钮命名。
value属性定义提交按钮上的显示文字。
2．图像提交按钮
图像提交按钮的作用与普通提交按钮的功能一样，不同之处在于使用图像提交按钮时，必须添加src属性指定图像所在的路径（该路径可以是绝对路径或相对路径）。
代码格式：<input type="image" name="…" src="…" />
属性解释如下。（图像提交按钮的其他属性请参考图像标签<img />的属性。）
type="image"定义图像提交按钮。
name属性为图像提交按钮命名。
src属性定义图像提交按钮中图像所在的路径。
3．重置按钮
重置按钮用于清除表单中所有输入信息，并将表单数据恢复到初始状态。
代码格式：<input type="reset" name="…" value="…" />
属性解释如下。
type="reset"定义复位按钮。
name属性为重置按钮命名。
value属性定义重置按钮上的显示文字。
4．自定义按钮
自定义按钮需要结合JavaScript代码使用。
代码格式：<input type="button" name="…" value="…" onClick="..." />
属性解释如下。
type="button"用于定义自定义按钮。
name属性为自定义按钮命名。
value属性定义自定义按钮上的显示文字。
onClick属性定义单击自定义按钮后的行为。
一个HMTL页面中可以存在多个FORM表单，FORM表单之间使用name属性标识；一个FORM表单中可以存在多个表单提交按钮，这些提交按钮同样使用name属性标识。
6.3.5 FORM表单综合应用
通过前面知识的讲解，相信读者有能力模仿一些大型网站制作自己的用户注册页面。将register.html文件的代码修改为如下代码。
<form action="register.php" method="post" enctype="multipart/form-data">
用 户 名：
<input type="text" name="userName" size="20" maxlength="15" value="必须填写用户名" />
@
<select name="domain">
<option value="@163.com" selected>163.com</option>
<option value="@126.com">126.com</option>
</select>
<br/>
登录密码：
<input type="password" name="password" size="20" maxlength="15" />
<br/>
确认密码：
<input type="password" name="confirmPassword" size="20" maxlength="15" />
<br/>
选择性别：
<input name="sex" type="radio" value="male" checked />男
<input name="sex" type="radio" value="female" />女
<br/>
个人爱好：
<input name="interests[]" type="checkbox" value="music" checked />音乐
<input name="interests[]" type="checkbox" value="game" checked />游戏
<input name="interests[]" type="checkbox" value="film" />电影
<br/>
个人相片：
<input type="hidden" name="MAX_FILE_SIZE" value="1024" />
<input type="file" name="myPicture" size="25" maxlength="100" />
<br/>
备注信息 :
<textarea name="remark" cols="30" rows="4">请填写备注信息</textarea>
<br/>
提交按钮：
<input type="submit" name="submit1" value="普通提交按钮" />
<br/>
图片按钮：
<input type="image" name="submit2" src="http://www.google.cn/intl/zh-CN/images/logo.gif" height="40" />
<br/>
重置按钮：
<input type="reset" name="cancel" value="重新填写" />
</form>
打开浏览器并在地址栏中输入“http://localhost/6/register.html”，将看到如图6-8所示的页面显示效果。
register.html代码说明如下。
（1）register.html 页面的 FORM 表单中“个人爱好”选项为复选框，并且3个复选框定义为一个数组（在 interests 属性值后加上[] ），从而实现名字为interests的复选框一次可以提交多个数据。
（2）由于register.html页面的FORM表单中存在文件上传框，<form>标签的 method 属性必须设置为post，enctype属性必须设置为multipart/form-data。
（3）该表单中存在隐藏域 MAX_FILE_SIZE，其值为1024（单位：字节）。当表单中有多个文件上传框时，可以使用隐藏域MAX_FILE_SIZE限制每个上传文件的大小。
需将定义 MAX_FILE_SIZE 的表单控件放置在文件上传框之前，否则无法实现MAX_FILE_SIZE限制上传文件的大小。
（4）register.html页面的FORM表单中存在多个提交按钮时，可以为每个提交按钮设置name属性进行区分。
（ 5 ）名字为 submit2 的提交按钮使用了 Google 的 LOGO 图片，该图片为绝对路径：http://www.google.cn/intl/zh-CN/images/logo.gif，只有连接了互联网才可以访问到该图片。
至此一个较为复杂的用户注册表单制作完成，如何在PHP程序中“采集”表单数据成了一个亟待解决的问题。