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）

在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）

在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）

在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）

在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）

在IE 11.0中的浏览效果如图5-6所示，其中有5个复选框，其中【黑客攻防】复选框被默认选中。

图5-6 复选框的效果

5.2.6 选择列表标记<select>

选择列表主要用于在有限的空间里设置多个选项，既可以用作单选，也可以用作多选，代码格式如下：

     <select name="..." size="..." multiple>
     <option value="..." selected>
     ...
     </option>
      ...
     </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）

在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）

在IE 11.0中的浏览效果如图5-10所示，输入内容后单击【重置】按钮，即可实现将表单中的数据清空的目的。

图5-10 重置按钮