1.5 网页表单设计

表单在网页设计中起着重要的作用，表单可以收集用户输入的信息，当用户提交表单后，浏览器将其在表单中输入的信息打包发送给服务器，实现用户与Web服务器的交互。

1.5.1 创建表单

HTML文档中表单主要用来实现客户端与服务器端的交互，例如提交的订单、搜索栏等。表单通过收集用户发送的信息，将信息送至服务器端进行处理，为客户端和服务器端之间数据的传送与处理提供服务。

HTML使用form元素创建表单。表单元素允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表、单选框（radio-buttons）、复选框（checkboxes）等。form元素中可以包含一个或多个如下的表单元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>。

form元素的action属性定义了处理表单数据的服务器端程序URL。method属性定义了表单数据发送到服务器端的方法，主要有两种。

1）method="get"：表单数据可被作为URL变量的形式来发送。将表单数据以名称/值对的形式附加到action属性设置的URL中（在URL中可见）。method="get"更适用于非安全数据，对于加入书签的表单提交很有用。

2）method="post"：表单数据作为HTTP post事务的形式来发送。将表单数据附加到HTTP请求的body内（数据不显示在URL中）。通过method="post"提交的表单不能加入书签。

target属性定义了在何处显示提交表单后接收到的响应，其_parent、_top和framename值大多与iframe配合使用。

autocomplete属性是HTML 5中的新属性，用于规定表单是否启用自动完成功能。自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，会显示出在字段中填写的选项。autocomplete="on"表示执行自动完成，适用于表单；autocomplete="off"表示不执行自动完成，适用于特定的输入字段。

novalidate属性也是HTML 5中的新属性，用于规定当提交表单时不对表单数据（输入）进行验证。

1.5.2 input元素创建控件

在HTML文档中常常包含一些可视的元件，如单选框、按钮、菜单等，这些元件被称为控件。通过改变控件的状态（比如选择单选框、选中菜单项等）可以完成表单，并将表单提交至服务器处理。用户与表单的交互就是通过控件进行的。

form元素通常不会单独使用，而是嵌套各种控件一起使用。大多数的控件可以用输入元素input来定义。input元素需要在form元素中使用，<input>为单标签，没有结束标签，最常用的属性是type属性，用于设定控件的类型。除了type属性，input元素常用的属性还有：

● name属性：定义控件的名称，可作为标识。

● value属性：设定控件的初始值。

● maxlength属性：设定控件允许输入的最大字符数。

● size属性：设定控件的宽度（当控件type="image"时，用width属性定义宽度）。

其他的属性在下列常用控件的创建过程中进行介绍。

1.单行文本输入框和密码输入框

将type属性值设为text可创建一个单行文本输入框，将type属性值设为password可创建一个密码输入框，例如：

输入信息后，在浏览器中的效果如图1-31所示。

2.单选按钮和复选按钮

当有两个及以上的选项时，单选按钮决定了只能选择其中一个选项提交，将type属性值设为radio可创建单选按钮，例如：

选择选项后，在浏览器中的效果如图1-32所示。

复选按钮允许在两个及以上的选项中任意选择多个选项。将type属性值设为checkbox可创建复选按钮，例如：

图1-31 单行文本框和密码输入框显示效果

图1-32 单选按钮显示效果

选择选项后，在浏览器中的效果如图1-33所示。

3.普通按钮、提交按钮和重置按钮

将type属性值设为button可创建一个普通按钮，普通按钮上的文字可用input元素的value属性来设置。例如：

将type属性值设为submit可创建提交按钮，提交按钮上的文字可用input元素的value属性来设置。当按下提交按钮后，表单中所有控件的值将被提交，并交给由form元素的action属性所定义的URL。

将type属性值设为reset可创建重置按钮，重置按钮上的文字可用input元素的value属性来设置。当按下重置按钮后，表单中所有控件的值将被重置为由各自的value属性所定义的初始值。

例如下面的代码设置了提交按钮和重置按钮。

在浏览器中的效果如图1-34所示。

图1-33 复选按钮显示效果

图1-34 提交和重置按钮显示效果

4.文件选择框

文件选择框可以从本地计算机中选择某个文件并将该文件上传。将type属性值设为file可创建文件选择框，例如：

未选择文件前，在浏览器中的显示效果如图1-35所示。单击“浏览”按钮，会弹出窗口，由用户通过浏览本地计算机从中选择要添加的文件。

5.数字输入

表单中数字的输入有两种形式：一种是文本框形式，将type属性值设为number可创建数字输入文本框；另一种是滑动条形式，将type属性值设为range可创建数字输入滑动条。number和range是HTML 5新增的属性值。

除了设置type属性，还可以设置input元素的max、min、step和value属性来分别设定输入数字的最大值、最小值、数字间隔和初始值。例如：

在浏览器中的显示效果如图1-36所示。

图1-35 文本选择框显示效果

图1-36 数字输入框和滑动条显示效果

6.E-mail地址输入和URL地址输入

email和url是HTML 5新增的属性值。

将type属性值设为email可创建E-mail地址输入框，在提交表单时，会自动验证输入的E-mail地址是否是有效的格式，如果不是，会给出提示信息。

将type属性值设为url可创建URL地址输入框，在提交表单时，会自动验证输入的URL地址是否是有效的格式，如果不是，会给出提示信息。例如：

当输入的E-mail地址格式有错时，浏览器中显示效果如图1-37所示。

7.日期选择器

HTML 5新增了多个供日期和时间选择的type属性值，例如：

浏览器中显示效果如图1-38所示。

图1-37 E-mail输入框和URL输入框显示效果

图1-38 日期选择器显示效果

8.搜索框

在网页中常常用到输入关键字的搜索框，将type属性值设为search可创建搜索框。search是HTML 5中新增的type属性值。例如：

9.拾色器

将type属性值设为color可创建拾色器，用于在颜色选板中选择一个颜色，默认值为#000000（黑色）。color是HTML 5中新增的type属性值。例如：

10.电话号码输入

将type属性值设为tel可实现电话号码的输入。tel是HTML 5中新增的type属性值。例如：

1.5.3 其他常用控件

1.多行文本输入框

在网页的文本输入框中输入多行文字时，需要使用<textarea>创建多行文本输入框。例如：

在浏览器中的显示效果如图1-39所示。

2.列表框

当需要在一个列表中选择一个或多个选项时，需要使用<select>创建列表框。<select>的常用属性如下。

● name属性：用于定义列表框的名称。

● size属性：用于定义下拉列表的行数，如果选项多于size设定的数值，将会出现滚动条。

● multiple属性：当该属性值为true时，可选择多个选项。

在<select>内部需要嵌套使用<option>为列表框提供列表项，<option>有一个selected属性，如果该属性值设为“selected”，则表示当前列表项在初始状态已被选择。例如：

在浏览器中的显示效果如图1-40所示。

图1-39 多行文本输入框显示效果

图1-40 列表框显示效果

3.按钮

创建按钮的方式有两种，一种是前面介绍的在input元素中设置type属性值，另一种是使用<button>创建按钮。<button>元素也有type属性，类似地，type属性值设为button、submit或者reset，将分别创建普通按钮、提交按钮或者重置按钮。例如：