第八章表单表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。
无论是提交搜索的信息，还是网上注册等都需要使用表单。
用户可以通过提交表单信息与服务器进行动态交流。
表单主要可以分为两部分：一是用HTML源代码描述的表单，可以直接通过插入的方式添加到网页中；二是提交后的表单处理，需要调用服务器端编写好的脚本对客户端提交的信息作出回应。
1 表单的概念表单通常用来做调查表、注册登录界面、搜索界面等。
通过表单收集到的用户反馈信息，通常是以某种分隔符分隔的文字形式提交到服务器。
表单使用的<form>标记是成对出现的，在首标记<form>和尾标记</form>之间的部分就是一个表单。
表单form基本语法：<form name="…" action=".." method="…"><input>….<select>…..</select>…<textarea>…</textarea></form>✓name：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript 或VBScript)对它进行控制。
✓action：指定处理表单信息的服务器端应用程序。
✓method：用于指定表单向服务器提交数据的方法，method的值可以为get或是post，默认方式是get。
(1)get方法，使用get方法提交数据，浏览器将把表单中的各个值添加到action指定的URL后(这两者之间用问号进行分隔)并向服务器发送get请求，每个值之间用符号“&”链接。
(2)post方法，如果采用post方法，浏览器将首先与action属性中指定的表单处理程序建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
(3)get将表单中的数据按照“变量=值”的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；post是将表单中的数据放在表单的数据体中，按照变量和值相对应的方式，传递到action所指向的URL。
(4)get是不安全的，post的所有操作对用户来说都是不可见的。
(5)post可以传输大量的数据，所以在上传文件时只能使用post。
(6)get是表单的默认方法。
2 输入<input>是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。
格式：<form><input name=" " type=" "></form>✓<input>标记主要有六个属性，type，name，size，value，maxlength，check。
其中name和type是必选的两个属性。
✓name属性的值是相应程序中的变量名。
✓在不同的输入方式下，<input>标记的格式略有不同，其它五种属性因type 类型的不同，其含义也不同。
✓type主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。
2.1 单行文本输入框text当type=text时，表示该输入项的输入信息是字符串。
此时，浏览器会在相应的位置显示一个文本框供用户输入信息。
格式：<form><input name="text" type="text" maxlength=" " size=" " value=" "> </form>text文本框是一个只能输入一行文字的输入框。
<input>标记除了两个必选的属性name和type外，还有3个可选的属性：maxlength，size和value。
✓maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等；✓size：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容；✓value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。
实例1.html：<html><head><title>输入用户姓名</title></head><body><form action="login" method="get">请输入你的姓名：<input type="text" name="yourname"></form></body></html>网页效果如图8-1所示。
8-1表单中的单行文本框2.2 提交按钮submit和重置按钮reset当type="submit"时，显示一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。
当type=reset时，显示一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。
一般情况下，提交与重置按钮经常同时出现。
格式：<form><input name="subbtn" type="submit" value="提交"><input name="resbtn" type="reset" value="重置"></form>✓提交按钮的name属性是可以默认的。
除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。
在一个表单中必须有提交按钮，否则将无法向服务器传送信息。
✓重置按钮的name属性也是可以默认的。
value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。
实例2.html：<html><head><title>注册</title></head><body><form action="login.jsp" method="get">请输入你的姓名：<input type="text" name="yourname"><br>请输入你的年龄：<input type="text" name="yourage"><br><input type="submit" value="提交"><input type="reset" value="重置"></form></body></html>网页效果如图8-2所示。
8-2在网页中添加空格2.3 密码输入框password密码输入框password与单行文本输入框text使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。
格式：<form><input name="password" type="password" maxlength= " " size= " "> </form>在表单中插入密码框，只要将<input>标记中type属性值设为password就可以插入密码框，maxlength、size属性同文件输入框text的属性一样。
实例3.html：<html><head><title>输入用户名和密码</title></head><body><form action=" index.aspx " method="post">用户名：<input type="text" name="yourname" size=15><br>密  码：<input type="password" name="yourpw" size=15><br><input type="submit" value="登录"><input type="reset" value="取消"></form></body></html>网页效果如图8-3所示。
图8-3 表单中的密码输入框2.4 复选框checkbox格式：<form><input name="text" type="checkbox" value= " "></form>用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取不同的值。
属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。
因此，value属性的参数值必须与选项内容相同或基本相同，该属性是必选项。
checked属性用于指定该选项在初始时是否被选中。
实例4.html：<html><head><title>选择</title></head><body>请选择你喜欢的运动：<br><form action="param.jsp" method="post"><input type="checkbox" name="ball" value="basktball">篮球<br><input type="checkbox" name="ball" value="football">足球<br><input type="checkbox" name="ball" value="tennis">网球<br><input type="submit" value="提交"></form></body></html>网页效果如图8-4图8-4表单中的复选框2.5 单选框radio格式：<form><input name="radio" type="radio" value=" "></form>单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值；不同的选项其属性value的值应是不同的；checked属性用于指定该选项在初始时是被选中的。