2.8 设计表单

表单用于实现访问者与服务器的交互。访问者利用文本框、列表框、复选框及单选按钮之类的表单控件输入信息，通过单击提交按钮把这些信息提交给服务器进行处理，在交互过程中可以通过客户端JavaScript脚本处理表单信息，包括使用Ajax技术实现异步请求和页面的局部刷新。

2.8.1 表单

在一个网页中可以创建多个表单，每个表单都可以包含各种各样的HTML控件，例如文本框、单选按钮、复选框、下拉菜单及按钮等。站点访问者通过表单和表单控件向服务器传递信息。

1.使用<form>标记定义表单

在HTML语言中，使用<form标记>在网页中定义一个交互式表单。语法如下：

        <form name="名称" method ="HTTP方法" action="表单处理URL" target="目标框架">
          在这里添加各种表单控件
        </form>

除了通用属性外，form元素具有以下属性。

● name属性：指定表单的名称，在客户端脚本中通过该名称引用表单。

● method属性：指定发送表单的HTTP方法，其取值为post或get。post表示在HTTP请求中嵌入表单数据，get表示将表单数据附加到请求页的URL。

● action属性：指定处理表单的服务器端程序或动态网页的URL地址。

● enctype属性：指定发送表单的内容属性。

● target属性：指定用来显示表单处理结果的目标框架。

● onsubmit属性：指定提交表单时执行的客户端事件处理函数。通过“return funname()”形式指定要执行的客户端JavaScript函数，可以对将要提交的表单数据进行验证，如果该函数返回false值，则取消表单提交。

● onreset属性：指定重置表单时执行的客户端函数。

2.在Dreamweaver中创建表单

在Dreamweaver CS3中，可以利用菜单命令或工具栏创建表单，操作步骤如下。

1 在文档窗口中，把插入点放在希望表单出现的位置。

2 执行下列操作之一：

● 选择【插入】→【表单】→【表单】命令。

● 在插入栏的【表单】类别中单击【表单】按钮 ，如图2-83所示。

A-表单 B-文本框 C-隐藏域 D-文本区域 E-复选框 F-单选按钮G-单选按钮组 H-列表/菜单 I-跳转菜单 J-图像域 K-文件域 L-按钮M-标签 N-字段集 O-Spry文本域 P-Spry文本区域 Q-Spry复选框 R-Srpy列表

图2-83 利用插入栏添加表单

3 此时一个表单插入页面中。单击该表单的轮廓，或者在文档窗口左下侧的标签选择器中单击<form>标记，以选择该表单。

4 利用属性检查器对表单的以下属性进行设置，如图2-84所示。

图2-84 利用属性检查器设置表单的属性

● 在【表单名称】文本框中，键入一个唯一的名称（name属性）以标识该表单，同时也用该名称设置表单的id。

● 在【动作】文本框中，指定到处理该表单的动态网页或脚本的路径（action属性）。在【动作】框中键入完整路径，或者单击文件夹图标 定位到表单处理程序文件。

● 在【方法】列表框中，选择将表单数据传输到服务器的HTTP方法（method）。有以下三个选项：【POST】表示在HTTP请求中嵌入表单数据；【GET】表示把值追加到请求该页的URL中；【默认】表示使用浏览器的默认设置把表单数据发送到服务器。

●在【MIME类型】列表框中，选择对提交给服务器进行处理的数据所使用的MIME编码类型（enctype）。有以下两个选项：【application/x-www-form-urlencode】表示与POST方法协同，这是默认设置；【multipart/form-data MIME】表示用于创建文件上传域。

● 在【目标】列表框中选择一个框架，在该框架内显示调用程序所返回的数据。可以指定一个窗口名称，若命名的窗口尚未打开，则打开一个具有该名称的新窗口。也可以选择保留名称【_blank】、【_parent】、【_self】或【_top】。

● 若要把一个CSS类样式应用于表单，可从【类】列表框中进行选择。

2.8.2 表单控件

通过在网页中添加表单，可以指定向服务器发送数据所用的HTTP方法，以及处理数据的服务器程序或动态网页的地址。不过，表单本身并不提供输入数据的用户界面。为了让用户输入并提交数据，还必须在表单内添加各种各样的表单控件。通过在<form>与</form>标记之间添加<input>、<textarea>和<select>等HTML标记，可以在表单内创建文本框、复选框、按钮、文本区域及列表框等表单控件。

1.文本框

文本框用于接收用户输入的文本。在HTML语言中，通过<input>标记来定义文本框控件，语法如下：

        <input type="text" name="名称" value="初始值" size="数字" maxlength="数字" … />

在<input>标记中把type属性设置为不同的值，可以定义各种类型的表单控件。创建文本框时，应把<input>标记的type指定为text，并根据需要对以下属性进行设置。

● name属性：指定文本框控件的名称。当提交表单时，文本框的名称和值都会包含在表单结果中。

● value属性：指定文本框控件的初始值。

● size属性：指定文本框控件的宽度，以字符为单位。

● maxlength属性：指定文本框控件允许的最大字符数。

● onblur属性：指定文本框失去焦点时的事件处理程序。

● onchange属性：指定文本框内容发生变化时的事件处理程序。

● onselect属性：指定选取文本框内容时的事件处理程序。

在Dreamweaver CS3中，可以通过以下操作添加一个文本框。

1 在文档窗口中，把插入点放在表单轮廓内。

2 执行下列操作之一：

● 选择【插入】→【表单】→【文本字段】命令。

● 在插入栏的【表单】类别中单击【文本字段】按钮 。

3 插入文本框后，利用属性检查器中对其以下属性进行设置，如图2-85所示。

图2-85 利用属性检查器设置文本框的属性

● 在【文本域】框中，为文本框输入一个唯一的名称（name属性）。

● 在【字符宽度】框中，指定文本框的长度（size属性），默认设置为20个字符。

● 在【最大字符数】框中，指定可在文本框中输入的最大字符数（maxlength属性）。若将此框留空，则用户可以输入任意数量的文本。

● 对于【类型】，只有选择【单行】选项，才能创建单行文本框。

● 若希望在文本框中显示默认文本值，可在【初始值】框中输入内容（value属性）。在浏览器中首次载入此表单时，文本框中将显示此文本。

● 若要将CSS类样式应用于文本框，可从【类】列表中选择所需样式。

4 若要为文本框添加提示文本，可把插入点放在该控件旁边并输入文本。

2.密码框

密码框与文本框类似，也用于输入文本。但在密码框中输入数据时将显示为星号或项目符号，以防止他人看到输入的内容。密码框也是使用input标记来定义的，语法如下：

        <input type="password" name="名称" value="初始值" size="数字" maxlength="数字" … />

除了type属性外，密码框的其他属性与文本框相同，不再赘述。

在Dreamweaver CS3中，添加密码框的方法与添加文本框基本相同，所不同的是应在属性检查器中选择【密码】选项，如图2-86所示。

图2-86 利用属性检查器设置密码框的属性

3.文本区域

文本区域也称为多行文本框，其功能与文本框类似，但允许输入多行文本。在HTML语言中，文本区域用textarea标记来定义，语法如下：

        <textarea name="名称" rows="数字" cols="数字" …>初始内容</textarea>

<textarea>标记具有以下常用属性。

● name属性：指定文本区域的名称。当提交表单时，文本区域的名称和值都会包含在表单结果中。

● 初始内容：指定文本区域控件的初始值。

● rows属性：指定文本区域控件的高度，以行为单位。

● cols属性：指定文本区域控件的宽度，以字符为单位。

● ● onblur、onchange和onselect属性：指定文本区域失去焦点时、文本区域内容发生变化时或选取文本区域内容时的事件处理程序。

在Dreamweaver CS3中，可以通过以下操作来添加文本区域。

1 在页面上，把插入点放在表单轮廓内。

2 选择【插入】→【表单】→【文本区域】命令，或者在插入栏的【表单】类别中单击【文本区域】按钮。

3 插入文本区域后，利用属性检查器对其以下属性进行设置，如图2-87所示。

● 在【文本域】框中，为文本区域指定一个唯一的名称（name属性）。

● 对于【类型】，只有选择【多行】选项，才能创建文本区域。

● 在【行数】框中指定要显示的行数（rows属性）。默认设置是两行的文本区域。

图2-87 利用属性检查器设置文本区域的属性

● 从【换行】列表框中，选择下列换行选项（wrap属性）之一：若选择【关】或【默认】，则防止文本换行到下一行；若选择【虚拟】，则在文本区域中设置自动换行，当提交数据进行处理时，自动换行并不应用到数据中；若选择【实体】，则在文本区域设置自动换行，当提交数据进行处理时对这些数据设置自动换行。

● 如果希望在多行文本框中显示默认文本值，可在【初始值】框中输入文本。

● 若要将CSS类样式应用于文本区域，可从【类】列表中选择所需样式。

4 若要为文本区域添加提示文本，可把插入点放在其旁边并输入文本。

4.按钮

在HTML语言中，使用<input>标记可以创建三种类型的按钮：提交按钮、重置按钮和自定义按钮。语法如下：

        <input type="submit|reset|button" name="名称" value="标题" onclick="事件处理程序" … />

其中value属性指定显示在按钮上的标题文本；type属性指定按钮的类型，有以下三个取值。

● submit：指定创建一个提交按钮。当用户单击“提交”按钮时，将把表单数据（包括提交按钮的名称和值）发送到由表单的action属性指定的表单处理程序。

● reset：指定创建一个重置按钮。当用户单击“重置”按钮时，可以把所有表单控件重新设回其默认值。

● button，指定创建一个自定义按钮。对于自定义按钮，通常应针对onclick事件编写脚本处理程序，当单击按钮时执行此程序。

在Dreamweaver CS3中，可以通过以下操作来添加一个按钮。

1 在页面上，把插入点放在表单轮廓内。

选择【插入】→【表单】→【按钮】命令，或者在插入栏的【表单】类别中单击【按钮】按钮 。

3 插入按钮后，利用属性检查器对其以下属性进行设置，如图2-88所示。

● 在【按钮名称】框中，为该按钮指定一个名称（name属性）。

● 在【值】框中，输入希望在该按钮上显示的文本标题（value属性）。

● 对【动作】，选择【提交表单】（submit）、【重设表单】（reset）或【无】（button）。

● 若要将CSS类样式应用于按钮，可从【类】列表框中选择所需样式。

图2-88 利用属性检查器设置按钮的属性

5.单选按钮

单选按钮通常成组出现，允许用户从若干个选项中选择一项。在HTML语言中，可以使用<input>标记创建一个单选按钮。语法如下：

        <input type="radio" name="名称" value="值string" checked="checked" … />

单选按钮具有以下常用属性。

● name属性：指定单选按钮的名称。若干个名称相同的单选按钮构成一个单选按钮组，从该组中只能选中一个选项。

● value属性：指定提交时的值。当提交表单时，单选按钮组的名称和选中的单选按钮的值会包含在表单结果中。

● checked属性：指定首次打开表单时该单选按钮处于选中状态

在Dreamweaver CS3中，可以通过以下操作来添加单选按钮。

1 在页面上，把插入点放在表单轮廓内。

选择【插入】→【表单】→【单选按钮】命令，或者在插入栏的【表单】类别中单击【单选按钮】按钮 。

3 插入单选按钮后，在其旁边输入提示文本。

重复步骤和，以插入更多的单选按钮。

5 选择一个单选按钮，利用属性检查器对其以下属性进行设置，如图2-89所示。

图2-89 利用属性检查器设置单选按钮的属性

● 在【单选按钮】下方的文本框中，为单选按钮指定一个名称（name属性）。如果希望一组单选按钮成为相互排斥的选项，则必须对这些单选按钮指定一个相同的名称，以构成一个单选按钮组。

● 在【选定值】框中，设置在该单选按钮被选中时发送给服务器的值（value属性）。

● 对于【初始状态】，如果希望在浏览器中首次载入该表单时有该单选按钮显示为选中状态，可单击【已勾选】（这将设置checked属性），否则单击【未选中】。

● 从“类”列表中选择应用于单选按钮的CSS样式。

对于每个单选按钮，重复执行步骤，以设置其属性。

6.复选框

复选框也为用户提供一组选项，但它允许用户从中选择任意多个选项。在HTML语言中，使用<input>标记并把type属性设置为“checkbox”可定义一个复选框，语法如下：

        <input type="checkbox" name="名称" value="值" checked="checked" … />

其中value属性指定提交时的值；checked属性是可选的，若设置该属性，则当第一次打开表单时该复选框处于选中状态。当提交表单时，若该复选框被选中，它的内部名称和值都会包含在表单结果中；若该复选框未选中，则只有名称会被纳入表单结果中，但值为空。

在Dreamweaver CS3中，可以通过以下操作来插入复选框。

1 在页面上，把插入点放在表单轮廓内。

选择【插入】→【表单】→【复选框】命令，或者在插入栏的【表单】类别中单击【复选框】按钮 。

3 插入复选框后，在其旁边输入提示文本，并利用属性检查器对该复选框的以下属性进行设置，如图2-90所示。

● 在【复选框名称】框中，为该控件指定一个唯一的名称（name和id属性）。

● 在【选定值】框中，输入在该复选框被选中时发送给服务器的值（value属性）。

● 对于【初始状态】，如果希望浏览器首次载入该表单时有复选框显示为选中状态，可单击【已勾选】（这将设置checked属性），否则单击【未选中】。

图2-90 利用属性检查器设置复选框的属性

7.文件域

文件域由一个文本框和一个“浏览”按钮组成。用户可以在文本框中输入文件的路径，也可以使用“浏览”按钮来定位和选择文件。在HTML语言中，使用<input>标记并将type属性设置为file可以创建一个文

件域，语法如下：

        <input type="file" name="名称" value="值" size="数字" maxlength="数字" … />

文件域具有以下常用属性。

● value属性：指定初始文件名。

● size属性：指定文件名输入框最多可显示的字符数。

● maxlength属性：指定文件名输入框最多可容纳的字符数。

在Dreamweaver CS3中，可以通过以下操作来添加文件域。

1 在页面上，把插入点放在表单轮廓内。

选择【插入】→【表单】→【文件域】命令，或者在插入栏的【表单】类别中单击【文件域】按钮 。插入文件域后，该表单的“MIME类型”自动变为multipart/form-data。

3 选择该文件域，利用属性检查器对其以下属性进行设置，如图2-91所示。

图2-91 设置文件域的属性

● 在【文件域名称】框中，为文件域指定一个名称（name属性）。

● 在【字符宽度】框中，指定希望该文件域最多可显示的字符数（size属性）。

● 在【最大字符数】框中，指定该文件域最多可容纳的字符数（maxlength）。

● 若要对文件域应用CSS类样式，可从【类】列表框中选择所需样式。

8.隐藏域

若要在表单结果中包含不希望让站点访问者看见的信息，可以在表单中添加隐藏域。每一个隐藏域都有自己的名称和值。在HTML语言中，使用<input>标记并把type属性设置为“hidden”可以创建一个隐藏域。语法如下：

        <input type="hidden" name="名称" value="值" />

其中value属性给出隐藏域的默认值。当提交表单时，该隐藏域的名称和值就会与可见表单控件的名称和值一起包含在表单结果中。

在Dreamweaver CS3中，可以通过以下操作来添加隐藏域。

1 把插入点放在表单轮廓内。

选择【插入】→【表单】→【隐藏域】命令，或者在插入栏的【表单】类别中单击【隐藏域】按钮 。

3 插入隐藏域后，利用属性检查器对其以下属性进行设置，如图2-92所示。

图2-92 设置隐藏域的属性

● 在【隐藏区域】框中，为该域指定一个唯一的名称（name属性）。

● 在【值】框中，为隐藏域指定一个值（value属性）。

9.列表框

列表框分为普通列表框和下拉式列表框。普通列表框可以同时显示多个选项并允许进行多重选择，当包含的选项比较多时，会自动出现一个滚动条；下拉式列表框也可以包含许多选项，但在浏览器中显示时仅显示一个选项，通过单击向下箭头可以弹出一个列表框以显示其他选项，用户可以而且只能从该列表框中选择一个选项。

在HTML语言中，可以使用<select>和<option>标记创建列表框，语法如下：

        <select name="名称" size="数字" multiple="multiple">
          <option value="值" [selected="selected"]>选项1</option>
          <option value="值" [selected="selected"]>选项2</option>
          ……
        </select>

<select>标记具有以下常用属性

● name属性：指定列表框的名称。

● size属性：指定在列表框中显示的选项数目。

● multiple属性：设置列表框允许做多重选择。

● onchange属性：指定选定项发生变化执行的事件处理程序。

<option>具有以下常用属性。

● value属性：指定列表项的值。当提交表单时，列表框的名称和所有选中项的值会包含在表单结果中。

● checked属性：指定首次打开表单时该选项处于选中状态

在Dreamweaver CS3中，可以通过以下操作来添加列表框。

1 在页面上，把插入点放在表单轮廓内。

选择【插入】→【表单】→【列表/菜单】命令，或者在插入栏的【表单】类别中单击【列表/菜单】按钮 。

3 插入列表框后，利用属性检查器对其以下属性进行设置，如图2-93所示。

图2-93 利用属性检查器设置列表框的属性

● 在【列表/菜单】框中，为该列表框指定一个名称（<select>标记的name属性）。

● 对于【类型】，若要创建普通列表框，可选择【列表】；若要创建下拉式列表框，可选择【菜单】。

4 对于普通列表框，可以设置以下选项。

● 在【高度】框中输入一个数字，指定该列表将显示的行（或项）数（size属性）。若所指定的数字小于该列表包含的选项数，则会自动出现滚动条。

● 如果希望允许用户从列表框中选择多个项，可选中【允许多选】复选框。

5 若要在列表框中添加选项，可单击【列表值】按钮，然后在【列表值】对话框中设置以下选项，如图2-94所示。

图2-94 在列表框中添加选项

● 在【项目标签】框中，输入要在该列表框中显示的文本。

● 在【值】框中，输入在用户选择该选项时将发送到服务器的数据。● 若要向列表中添加更多的选项，可单击加号按钮 并重复以上两个步骤。

● 若要删除列表中的项，可单击该选项，然后单击减号按钮 。

● 若要改变列表中项的顺序，可选择一个选项，然后单击 或按钮 。

● 添加所需的列表项后，单击【确定】按钮。

6 若要在加载页面时使列表中的某一项处于选中状态，可在属性检查器的【初始化时选定】域中选择该项。对于普通列表框，可以按住Ctrl键单击以选择多项；对于下拉式列表框，只能使一项处于选中状态。

例2-24 创建一个用于填写个人信息的表单，网页效果如图2-95所示。

图2-95 表单设计示例

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-24.html，把网页标题设置为“表单设计示例”。

2 在页面上插入一个表单，在表单内插入一个表格，用于安排表单控件布局。

3 在表格中输入提示文字，插入文本框、单选按钮、文本区域、复选框、列表框、提交按钮及重置按钮。

4 在浏览器中查看网页效果。