4.3 输入控件

HTML拥有多个输入控件，除了基本的文本框、密码框、单选按钮、复选框、选择框、文本区域、按钮等以外，HTML5又新增了一些表单输入类型。表4-1列出了原有input类型，表4-2列出了新增input类型。这些特性为表单提供了更好的输入控制和验证。本节将为大家介绍表单的常见输入控件。

表4-1 ＜input＞标签原有type属性值

表4-2 ＜input＞标签新增type属性值

4.3.1 创建文本框

文本框在表单中是最常用控件之一，如表单中需要用户填写姓名、家庭地址等信息都需要用到文本框。文本框的用法相对简单，其格式如下：

＜input type="text"name="文本框名称"size="文本框宽度"maxlength="最多输入字符数"value="文本框初始值"＞

其中type="text"定义文本框，name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size属性定义文本框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数；value属性定义文本框的初始值。

【例4-1】创建文本框，代码如下：

在浏览器中预览，效果如图4-11所示。

图4-11 文本框

4.3.2 创建密码框

密码框和文本框比较相像，在表单中主要用来用户填写密码等隐私信息。该控件表现形式和文本框相同。不同的是用户在使用密码框输入信息时，显示的形式为“*”或“●”，能够更好地保护用户的隐私。其语法结构为：

＜input type="password"name="密码框名字"size="密码框宽度"maxlength="最多输入字符数"＞

其中type="password"定义密码框，name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size属性定义密码框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数。

【例4-2】设置密码框，代码如下：

在浏览器中预览，效果如图4-12所示。

图4-12 密码框

4.3.3 创建单选按钮

单选按钮主要是让网页浏览者在一组选项中只能选择一个选项，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。其语法格式如下：

＜input type="radio"name="单选按钮名称"value="单选按钮的值"checked="checked"＞

其中，type="radio"定义单选按钮，name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选按钮都必须用同一个名称；value属性定义单选按钮的值，在同一组中，它们的域值必须是不同的。属性checked="checked"只能出现在其中一个选项中，表示该选项默认是被选中的状态，该属性为可选，如下面例子中就没有设置该属性。

【例4-3】设置单选按钮，代码如下：

在浏览器中预览，其效果如图4-13所示：

图4-13 单选按钮

4.3.4 创建复选框

在一组单选按钮中，只允许选择一个答案；但在一组复选按钮中，访问者可以选择任意数量的答案。同单选按钮一样，复选框也与name属性的值联系在一起。其语法格式如下：

＜input type="checkbox"name="复选框名字"value="复选框的值"checked="checked"＞

其中，type="checkbox"定义复选框，name属性定义复选框的名称，复选框也是以组为单位使用的，在同一组中的复选框都必须用同一个名称；value属性定义复选框的值。属性checked="checked"表示该选项默认是被选中的状态，该属性为可选。

【例4-4】设置复选框，代码如下：

在浏览器中预览，显示效果如图4-14所示：

图4-14 复选框

4.3.5 创建文本区域

文本区域在表单中是最常用控件之一，如表单中需要用户填写意见或建议等信息都需要用到文本区域。文本区域的用法相对简单，相当于可以多行输入的文本框，其格式如下：

＜textarea name="文本区域名称"rows="文本区域高度"cols="文本区域宽度"wrap="soft|hard"＞

＜/textarea＞

其中name属性定义文本区域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；cols属性定义文本区域的宽度，单位是单个字符宽度；rows属性定义文本区域的高度，单位是单个字符宽度；wrap属性定义输入内容大于文本域时显示的方式，使用soft表示textarea中的文本不换行，当使用"hard"时，textarea中的文本换行（包含换行符），此时必须规定cols属性。

【例4-5】创建文本区域，代码如下：

在浏览器中预览，效果如图4-15所示。

图4-15 textarea显示效果

4.3.6 创建选择框

选择框非常适合向访问者提供一组选项，从而允许访问者从中选取，通常呈现为下拉菜单的样式。如果允许用户选择多个选项，选择框就会呈现为一个带滚动条的项目框。其语法格式如下：

＜select name="选择框名称"size="选择框行数"multiple＞

＜option value="选择项的值"selected＞

…

＜/option＞

…

＜/select＞

选择框由两种HTML元素构成：select和option。通常，在select元素里设置name属性，在每个option元素里设置value属性。size属性定义选择框的行数；name属性定义选择框的名称；multiple属性定义是否多选；value属性定义选择项的值；selected属性表示默认选择本项目。

【例4-6】设置选择框，代码如下：

在浏览器中预览，显示效果如图4-16所示

图4-16 选择框显示效果

4.3.7 创建隐藏字段

隐藏字段可以用于存储表单中的数据，但不会显示给访问者。可以认为它们是不可见的文本框。它们通常用于存储先前的表单收集的信息，以便将这些信息同当前表单的数据一起交给脚本进行处理。其语法格式如下：

＜input type="hidden"name="field_name"value="value"＞

访问者不会看到这个输入框，但他们提交表单的时候，数据会随着表单一起传送给服务器。

创建隐藏字段的步骤如下。

1）输入＜input type="hidden"。

2）输入name="dataname"，这里的dataname确定要提交给服务器的信息。

3）输入value="data"，这里的data是要提交的信息本身。它通常是表单处理脚本中的一个变量。

4）输入＞。

【例4-7】隐藏字段，代码如下：

4.3.8 创建按钮

按钮在表单中占据很重要的地位，按钮可以分为三类：普通按钮、提交按钮和重置按钮。普通按钮用来控制其他定义了处理脚本的处理工作；提交按钮用来将输入的信息提交到服务器；重置按钮用来重置表单中输入的信息。其语法格式如下：

＜input type="button/submit/reset"name="按钮名称"value="显示在按钮上的信息"＞

其中type="button"定义普通按钮，type="submit"定义提交按钮，type="reset"定义重置按钮。name属性定义按钮的名称；value属性定义按钮显示的名称。

1.普通按钮

【例4-8】创建普通按钮，代码如下：

在浏览器中预览，效果如图4-17所示。单击按钮后效果如图4-18所示。

图4-17 按钮显示效果

图4-18 单击按钮后显示效果

在上例中onClick属性表示单击行为，也可以是其他的时间，通过指定脚本函数来定义按钮的行为。

2.提交按钮

提交按钮在表单中应用最为广泛，通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。

【例4-9】创建提交按钮，代码如下：

在浏览器中预览，效果如图4-19所示。

图4-19 提交按钮显示效果

3.重置按钮

重置按钮一般同其他按钮配合使用，比如用户填写表单内容后需要将表单内容全部清空，此时就可以使用重置按钮。

【例4-10】重置按钮，代码如下：

在浏览器中预览，效果如图4-20所示。

图4-20 重置按钮显示效果