5.2 表单基本元素的使用
表单元素是能够让用户在表单中输入信息的元素，常见的有文本框、密码框、下拉菜单、单选按钮、复选框等。
5.2.1 单行文本输入框text
文本框是一种让访问者自行输入内容的表单对象，通常被用来填写单个字或简短的回答，如用户姓名和地址。代码格式如下：
<input type="text" name="..." size="..." maxlength="..." value="...">
其中，type="text"定义单行文本输入框；name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size属性定义文本框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数；value属性定义文本框的初始值。
【例5.2】（实例文件：ch05\5.2.html）
<!DOCTYPE html> <html> <head><title>输入用户的姓名</title></head> <body> <form> 请输入您的姓名： <input type="text" name="yourname" size="20" maxlength="15"><br /> 请输入您的地址： <input type="text" name="youradr" size="20" maxlength="15"> </form> </body> </html>
在IE 11.0中浏览效果如图5-2所示，可以看到两个单行文本输入框。
图5-2 单行文本输入框
5.2.2 多行文本框标记<textarea>
多行文本框标记<textarea>主要用于输入较长的文本信息。代码格式如下：
<textarea name="..." cols="..." rows="..." wrap="..."></textarea >
其中，name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；cols属性定义多行文本框的宽度，单位是单个字符宽度；rows属性定义多行文本框的高度，单位是单个字符高度；wrap属性定义输入内容大于文本域时显示的方式。
【例5.3】（实例文件：ch05\5.3.html）
<!DOCTYPE html> <html> <head><title>多行文本输入</title></head> <body> <form> 请输入您最新的工作情况<br /> <textarea name="yourworks" cols="50" rows="5"></textarea> <br /> <input type="submit" value="提交"> </form> </body> </html>
在IE 11.0中浏览效果如图5-3所示，可以看到多行文本框。
图5-3 多行文本框
5.2.3 密码域password
密码输入框是一种特殊的文本域，主要用于输入一些保密信息。当网页浏览者输入文本时，显示的是黑点或其他符号，这样就增加了输入文本的安全性。代码格式如下：
<input type="password" name="..." size="..." maxlength="...">
其中，type="password"定义密码框；name属性定义密码框的名称，要保证唯一性；size属性定义密码框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数。
【例5.4】（实例文件：ch05\5.4.html）
<!DOCTYPE html> <html> <head><title>输入用户姓名和密码 </title></head> <body> <form > 用户姓名： <input type="text" name="yourname"> <br /> 登录密码： <input type="password" name="yourpw"><br /> </form> </body> </html>
在IE 11.0中浏览效果如图5-4所示，输入用户名和密码时可以看到密码以黑点的形式显示。
图5-4 密码输入框
5.2.4 单选按钮radio
单选按钮主要是让网页浏览者在一组选项里只能选其一。代码格式如下：
<input type="radio" name="..." value = "...">
其中，type="radio"定义单选按钮；name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；value属性定义单选按钮的值，在同一组中它们的域值必须是不同的。
【例5.5】（实例文件：ch05\5.5.html）
<!DOCTYPE html> <html> <head><title>选择感兴趣的图书</title></head> <body> <form > 请选择您感兴趣的图书类型： <br /> <input type="radio" name="book" value="Book1">网站编程<br /> <input type="radio" name="book" value="Book2">办公软件<br /> <input type="radio" name="book" value="Book3">设计软件<br /> <input type="radio" name="book" value="Book4">网络管理<br /> <input type="radio" name="book" value="Book5">黑客攻防<br /> </form> </body> </html>
在IE 11.0中浏览效果如图5-5所示，即可看到5个单选按钮，用户只能选中一个单选按钮。
图5-5 单选按钮
5.2.5 复选框checkbox
复选框主要是让网页浏览者在一组选项里可以同时选择多个选项。每个复选框都是一个独立的元素，必须有一个唯一的名称。代码格式如下：
<input type="checkbox" name="…" value ="…">
其中，type="checkbox"定义复选框；name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。
【例5.6】（实例文件：ch05\5.6.html）
<!DOCTYPE html> <html> <head><title>选择感兴趣的图书</title></head> <body> <form > 请选择您感兴趣的图书类型：<br /> <input type="checkbox" name="book" value="Book1">网站编程<br /> <input type="checkbox" name="book" value="Book2">办公软件<br /> <input type="checkbox" name="book" value="Book3">设计软件<br /> <input type="checkbox" name="book" value="Book4">网络管理<br /> <input type="checkbox" name="book" value="Book5" checked>黑客攻防<br /> </form> </body> </html>
技巧提示
checked属性主要用来设置默认选中项。
在IE 11.0中浏览效果如图5-6所示，即可看到5个复选框，其中【黑客攻防】复选框被默认选中。
图5-6 复选框
5.2.6 选择列表标记<select>
下拉列表主要用于在有限的空间里设置多个选项，它既可以用作单选，也可以用作多选。代码格式如下：
其中，name属性定义选择列表的名称；size属性定义选择列表的行数；multiple属性表示可以多选，如果不设置该属性，则只能单选；value属性定义选择项的值；selected属性表示默认已经选择本选项。
【例5.7】（实例文件：ch05\5.7.html）
在IE 11.0中浏览效果如图5-7所示，列表内显示了3个选项，用户可以按住Ctrl键选择多个选项。
图5-7 选择列表
5.2.7 普通按钮button
普通按钮用来控制其他定义了脚本的处理工作。代码格式如下：
<input type="button" name="..." value="..." onclick="...">
其中，type="button"定义普通按钮；name属性定义普通按钮的名称；value属性定义按钮的显示文字；onclick属性表示单击行为，也可以通过指定脚本函数来定义按钮的行为。
【例5.8】（实例文件：ch05\5.8.html）
在IE 11.0中浏览效果如图5-8所示，单击【单击我】按钮即可将文本框1中的内容复制到文本框2中。
图5-8 单击按钮后的复制效果
5.2.8 提交按钮submit
提交按钮用来将输入的信息提交到服务器。代码格式如下：
<input type="submit" name="..." value="...">
其中，type="submit"定义提交按钮；name属性定义提交按钮的名称；value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给action所指向的文件。
【例5.9】（实例文件：ch05\5.9.html）
<!DOCTYPE html> <html> <head><title>输入用户名信息</title></head> <body> <form action="http://www.yinhangit.com/yonghu.asp" method="get"> 请输入您的姓名： <input type="text" name="yourname"> <br /> 请输入您的住址： <input type="text" name="youradr"> <br /> 请输入您的单位： <input type="text" name="yourcom"> <br /> 请输入您的联系方式： <input type="text" name="yourcon"> <br /> <input type="submit" value="提交"> </form> </body> </html>
在IE 11.0中浏览效果如图5-9所示，输入内容后单击【提交】按钮，即可将表单中的数据提交到指定的服务器中。
图5-9 提交按钮
5.2.9 重置按钮reset
重置按钮用来清空表单中输入的信息。代码格式如下：
<input type="reset" name="..." value="...">
其中，type="reset"定义重置按钮；name属性定义重置按钮的名称；value属性定义按钮的显示文字。
【例5.10】（实例文件：ch05\5.10.html）
<!DOCTYPE html> <html> <body> <form> 请输入用户名称： <input type="text"> <br/> 请输入用户密码： <input type="password"> <br /> <input type="submit" value="登录"> <input type="reset" value="重置"> </form> </body> </html>
在IE 11.0中浏览效果如图5-10所示，输入内容后单击【重置】按钮，即可实现将表单中的数据清空的目的。
图5-10 【重置】按钮