3.3 表单元素

在上一章的块级标签中，已经讲解了表单的工作原理和表单标签的基本语法，本节将讲解表单元素的基本用法。表单中通常包含一个或多个表单元素，常见的表单元素见表3-1。

例如，常见的网上问卷调查表单，其中包含的表单元素如图3-11所示。

3.3.1 <input>元素

<input>元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、图像、文件等。<input>元素的基本格式为：

<input>元素常用属性的含义如下。

type属性：指定要加入表单项目的类型（text，password，checkbox，radio，button，hidden，image，file，submit或reset等）。

name属性：该表项的控制名，主要在处理表单时起作用。

size属性：输入字段中的可见字符数。

maxlength属性：允许输入的最大字符数目。

checked属性：当页面加载时是否预先选择该input元素（适用于epub:type="checkbox"或type="radio"）。

readonly属性：设置字段的值无法修改。

autofocus属性：设置输入字段在页面加载时是否获得焦点（不适用于type="hidden"）。

disabled属性：当页面加载时是否禁用该input元素（不适用于type="hidden"）。

1.文字框

使用<input>元素的type属性，可以在表单中加入表项，并控制表项的风格。如果type属性值为text，则定义的表单元素为文本框，输入的文本以标准的字符显示；在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中应该输入的内容。文本框的格式为：

例如，以下输入用户名的文本框的代码如下：

其中，type="text"表示<input>元素的类型为文本框，name="userName"表示文本框的名字为userName，size="18"表示文本框的宽度为18个字符，value="tom"表示文本框中初始显示的内容为“肥猫”，页面中的效果如图3-12所示。

2.密码框

将<input>元素type属性值为password，则定义的表单元素为密码框，输入的文本显示为“*”。密码框的格式为：

例如，以下输入用户名的文本框的代码如下：

其中，type="password"表示<input>元素的类型为密码框，name="pass"表示密码框的名字为pass，size="18"表示密码框的宽度为18个字符，页面中的效果如图3-13所示。

3.按钮

表单中的按钮有4种类型，即重置按钮、提交按钮、普通按钮和图片按钮。

（1）重置按钮

如果浏览者想清除输入到表单中的全部内容，可以使用<input>元素中的type属性设置重置（reset）按钮，以省去在重新输入前，一项一项删除的麻烦。重置按钮的格式为：

当省略value的设置值时，重置按钮的默认显示为“重置”。

（2）提交按钮

当浏览者完成表单的填写，想要发送时，可使用<input>元素的type属性设置的提交（submit）按钮，将表单内容送给action属性中的网址或函件信箱。提交按钮的格式为：

当省略value的设置值时，提交按钮的默认显示为“提交”。

（3）普通按钮

如果浏览者想制作一个用于触发事件的普通按钮，可使用<input>元素的type属性设置普通（button）按钮。普通按钮的格式为：

（4）图片按钮

如果浏览者想制作一个美观的图片按钮，可使用<input>元素的type属性设置图片（image）按钮。图片按钮的格式为：

【演练3-7】制作不同类型的表单按钮，本例文件3-7.html在浏览器中显示的效果如图3-14所示。

代码如下：

如果用户觉得上面的提交按钮不太美观，在实际应用中，可以用图片按钮代替，如图3-15所示。实现图片按钮最简单的方法就是配合使用type属性和src属性。例如，将上面定义“注册”提交按钮的代码修改如下：

【说明】使用这种方法实现的图片按钮比较特殊，虽然type属性没有设置为“submit”，但仍然具有提交功能。

4.复选框

在页面中有些地方需要列出多个选项，浏览者可以通过复选框来选择其中的一项或多项。将<input>元素的type属性设置为“checkbox”，则定义的表单元素为复选框。复选框的格式为：

其中，value属性可设置复选框的提交值，用checked属性表示是否为默认选中项，name属性是复选框的名称，同一组的复选框的名称是一样的。

例如，以下选择“关注的最新橱柜”复选框的代码如下：

其中，“不锈钢橱柜”和“实木橱柜”两个复选框设置了checked="checked"默认选中属性，页面浏览后，这两种橱柜名称前面的复选框自动勾选，如图3-16所示。

5.单选按钮

单选按钮用于一组相互排斥的选项，组中的每个选项应具有相同的名称，以确保浏览者只能选择一个选项。单选按钮的格式为：

其中，value属性可设置单选按钮的提交值，用checked属性表示是否为默认选中项，name属性是单选按钮的名称，同一组的单选按钮的名称是一样的。

例如，以下选择“最喜欢的橱柜类型”单选按钮的代码如下：

其中，类型为“欧式系列”的单选按钮设置了checked="checked"默认选中属性，页面浏览后，“欧式系列”的单选按钮自动选中，如图3-17所示。

6.隐藏域

网站服务器发送到客户端的信息，除用户直观看到的页面内容之外，可能还包含一些“隐藏”信息。例如，用户登录后的用户名、用于区别不同用户的用户ID等。这些信息对于用户可能没用，但对网站服务器有用，一般将这些信息“隐藏”起来，而不在页面中显示。

将<input>元素的type属性设置为hidden类型即可创建一个隐藏域。格式为：

例如，在登录页的表单中隐藏用户的ID信息“u01”，代码如下：

页面浏览后，隐藏域信息并不显示，如图3-18所示，但能通过页面的HTML代码查看到。

7.文件域

文件域用于上传文件，将<input>元素的type属性设置为file类型即可创建一个文件域。文件域会在页面中创建一个不能输入内容的地址文本框和一个“浏览”按钮。格式为：

【演练3-8】制作上传橱柜图片的表单页面，使用文件域上传文件，用户单击“浏览”按钮后，将弹出“选择要加载的文件”对话框。选择文件后，路径将显示在地址文本框中，页面的显示效果如图3-19所示。

代码如下：

【说明】需要注意的是，在设计包含文件域的表单时，由于提交的表单数据包括普通的表单数据和文件数据等多部分内容，所以必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

3.3.2 选择栏<select>

当浏览者选择的项目较多时，如果用单选按钮来选择，占页面的空间就会较大，这时可以用<select>标签和<option>标签来设置选择栏。

<select>标签的格式为：

<select>标签各个属性的含义如下。

size：取数字，表示在带滚动条的下拉列表中一次可显示的列表项数，默认值为1。

name：控制操作名。

multiple：加上本项表示可选多个选项，否则只能单选。

<option>标签的格式为：

<option>标签各个属性的含义如下。

selected：加上本项表示该项是默认选中的。

value：指定控制操作的初始值。若省略，则初值为option中的内容表示选项值。

选择栏有两种形式：字段式列表和下拉式菜单。二者的主要区别在于，前者在<select>中的size属性值取大于1的值，此值表示在选择栏中不拖动滚动条可以显示的选项的数目。

【演练3-9】制作“用户年龄”问卷调查的下拉菜单，页面加载时菜单显示的默认选项为“20--35岁”，用户可以单击菜单下拉箭头选择其余的选项。本例文件3-9.html在浏览器中显示的效果如图3-20所示。

代码如下：

【说明】菜单中的选项“20--35岁”设置了selected="selected"属性值，因此，页面加载时显示的默认选项为“20--35岁”。

3.3.3 多行文本域<textarea>…</textarea>

在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用<textarea>标签可以设置允许成段文字的输入，格式为：

其中的行数和列数是指不拖动滚动条就可看到的部分。另外，<textarea>…</textarea>标签对中不能使用value属性赋初始值。

例如，以下输入“评论天地”多行文本域内容的代码如下：

其中，cols="40"表示多行文本域的列数为40列，rows="4"表示多行文本域的行数为4行，效果如图3-21所示。

3.3.4 表单的高级用法

在某些情况下，用户需要对表单元素进行限制，设置表单元素为只读或禁用，常应用于以下场景。

只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。

禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。

只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。

【演练3-10】制作梦想橱柜服务协议页面，页面浏览后，服务协议只能阅读而不能修改，并且只有用户同意注册协议后，才允许单击“注册”按钮，本例文件3-10.html在浏览器中显示的效果如图3-22所示。

代码如下：

【说明】用户单击“同意以上协议”复选框并不能真正实现使“注册”按钮有效，还需要为复选框添加JavaScript脚本才能实现这一功能，这里只是讲解如何使表单元素只读和禁用。

3.3.5 案例——制作梦想橱柜会员注册表单

在讲解了以上表单元素的基础上，下面通过一个综合的案例将这些表单元素集成在一起，制作梦想橱柜会员注册表单。

【演练3-11】制作梦想橱柜会员注册表单，收集会员的个人资料。本例文件3-11.html在浏览器中显示的效果如图3-23所示。

代码如下：

【说明】“职业”选择栏使用的是字段式列表，其<select>标签中的size属性值设置为3，表示一次可显示的列表项数为3，而“收入”选择栏使用的是下拉菜单。

3.3.6 表单布局

从上面的梦想橱柜会员注册表单案例中可以看出，由于表单没有经过布局，页面整体看起来不太美观。在实际应用中，可以采用以下两种方法布局表单：一是使用表格布局表单，二是使用CSS样式布局表单。本节主要结合上个章节讲解的表格来实现表单的布局。

【演练3-12】使用表格布局的方法制作梦想橱柜会员登录表单，表格布局示意图如图3-24所示，最外围的虚线表示表单，表单内部包含一个4行3列的表格，其中的第1行和第4行分别使用了跨2列的设置。页面在浏览器中显示的效果如图3-25所示。

代码如下：

【说明】

①在使用表格布局表单的应用中，要注意结合表单的数据信息计算表格布局所需要的行数和列数。

②在制作某些特殊元素的时候，往往需要使用表格的跨行跨列技术，例如，登录图片按钮需要跨2列。

③当单元格内没有布局的内容时，必须使用“空格”填充以实现布局效果。