2.4 表单

用户在注册、登录、搜索等时，网页中用于输入内容的文本框、单选框、复选框、下拉列表框、按钮等，可以用表单来实现。当访问者在表单中输入信息并单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。

2.4.1 表单元素form

网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。﹤form﹥标签用于创建供用户输入的HTML表单。form元素是块级元素，其前后会产生折行。form元素的基本格式为：

﹤form﹥标签主要用于表单结果的处理和传送，常用属性如下。

1）action属性：规定当提交表单时向何处发送表单数据，是网址或E-mail地址。这个属性必须有。

2）method属性：规定用于发送表单数据时的发送类型，其属性值可以是get或post，具体是哪一个，取决于后台程序。这个属性必须有。

3）enctype属性：规定在发送表单数据之前如何对其进行编码。enctype属性有以下3个值。

● application/x-www-form-urlencoded：默认的编码方式，在发送前编码所有字符。

● multipart/form-data：被编码为一条二进制消息，网页上的每个控件对应消息中的一个部分，包括文件域指定的文件。在使用包含文件上传控件的表单时，必须使用这个值。

● text/plain：空格转换为加号（+），但不对特殊字符编码。

4）name属性：表单的名字，在一个网页中用于识别表单的唯一标识，与id属性值相同。

5）target属性：规定使用哪种方式打开目标URL，它的属性值可以是_blank、_self、_parent或_top中的一个，使用方法与a元素的target属性相同。

2.4.2 输入元素input

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

﹤input type="表项类型"name="元素名"size="x"maxlength="y"/﹥

input元素的常用属性如下。

1）type属性：指定要加入表单项目的类型，type属性值见表2-1。

2）name属性：定义input元素的名称。

3）size属性：定义该控件的宽度。

4）maxlength属性：规定输入字段中字符的最大长度。

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

6）readonly属性：规定输入字段为只读，字段的值无法修改。

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

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

9）value属性：规定input元素的默认值。

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

2.4.3 标签元素label

﹤label﹥标签用于为表单中的其他控件元素添加说明文字。当用户在浏览器中单击label元素生成的标签时，会自动将焦点转到与该标签相关的表单控件上。label元素的格式为：

﹤label for="id"﹥说明文字﹤/label﹥

﹤label﹥标签最重要的属性是for属性。for属性把label元素绑定到另外一个元素，把for属性的值设置为相关元素的id属性的值。使﹤label﹥标签与表单控件关联的方法有以下两种。

● 将﹤label﹥标签的for属性值，指定为关联表单控件的id。

● 把说明与表单控件一起放入﹤label﹥…﹤/label﹥标签内部。

【例2-14】 label元素的示例。本例文件2-14.html在浏览器中的显示效果如图2-14所示，单击“密码”标签，焦点将定位到其关联的文本框中。

2.4.4 选择栏元素select

select元素可用来创建菜单或者下拉列表框，实现单选或多选菜单。﹤select﹥标签必须配合﹤option﹥标签和﹤optgroup﹥标签使用，﹤option﹥标签定义列表中的可用选项；﹤optgroup﹥标签表示一个选项组，该元素中只能有option子元素。

select元素的属性如下。

1）size属性：指定下拉列表中同时显示选项的数目，默认值为1。

2）name属性：下拉列表的名称。

3）multiple属性：指定可选择多个选项，属性值只能是multiple。无此属性时则为单选。

2.option元素

option元素定义下拉列表中的一个选项。浏览器将﹤option﹥标签中的内容作为﹤select﹥标签的菜单或是滚动列表中的一个元素显示。option元素必须位于select元素内部。option元素的格式为：

﹤option value="选项值"selected="selected"﹥…﹤/option﹥

option元素的属性如下。

1）value属性：定义该列表项对应的送往服务器的参数。若省略，则初值为option中的内容。

2）selected属性：指定该选项的初始状态为选中，其属性值只能是selected。

3.optgroup元素

如果列表选项很多，可以使用﹤optgroup﹥标签对相关选项分组。optgroup元素的格式为：

ptgroup元素的属性如下。

1）label属性：为选项组指定说明文字，本属性必须设置。

2）disabled属性：设置该选项组是否可用，属性值是disabled。

【例2-15】制作问卷调查的下拉列表。本例文件2-15.html在浏览器中的显示效果如图2-15所示。

2.4.5 按钮元素button

button元素定义一个按钮。﹤button﹥与﹤/button﹥标签之间的所有内容都是按钮的内容，其中包括任何可接收的内容，包括文本、图像或多媒体内容。这是该元素与input元素创建的按钮之间的不同之处。button元素与﹤input type="button"﹥相比，前者提供了更强大的功能和更丰富的内容。button元素的格式为：

﹤button type="按钮的类型"﹥文本、图像元素﹤/button﹥

button元素的属性如下。

1）type属性：指定按钮的类型，只能是button、reset或submit，与input元素的3种类型的按钮相对应。

2）autofocus属性：指定当页面加载时按钮自动地获得焦点。

3）disabled属性：指定禁用该按钮。

4）name属性：指定按钮的名称。

5）value属性：指定按钮的初始值，可由脚本进行修改。

【例2-16】按钮元素示例。本例文件2-16.html在浏览器中的显示效果如图2-16所示。

2.4.6 多行文本元素textarea

textarea元素定义多行文本输入控件。该控件可以用来输入多个段落的文字，文本区中可容纳无限数量的文本。textarea元素的格式为：

textarea元素的属性如下。

1）cols属性：指定textarea文本区内的宽度。此属性必须设置。

2）rows属性：指定textarea文本区内的可见行数，即高度。此属性必须设置。

3）maxlength属性：指定文本区域的最大字符数。行数和列数是指不拖动滚动条就可看到的部分。

4）name元素：指定本标签的ID名称。

5）placeholder元素：指定描述文本区的简短提示。

6）readonly元素：指定文本区为只读。这个属性的属性值只能是readonly。

7）required元素：指定文本区是必填的。这个属性的属性值只能是required。

通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性。

注释：在文本区内的文本行间，用“%OD%OA”（回车/换行）进行分隔。

【例2-17】多行文本元素示例。本例文件2-17.html在浏览器中的显示效果如图2-17所示。