创建 Web 表单

在“设计”视图中，表单以红色的虚轮廓线指示。 如果您没有看到此轮廓，请选择"视图">"可视\n辅助工具">"不可见元素"。

在属性检查器（“窗口”>“属性”）中设置 HTML 表单的属性：

a. 在“文档”窗口中，单击表单轮廓以选定该表单。

b. 在“表单名称”框中，键入标识该表单的唯一名称。

命名表单后，就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。 如果不命名表单，Dreamweaver 将使用语法 formn 生成一个名称，并为添加到页面中的每个表单递增 n 的值。

c. 在“操作”框中，键入路径或者单击文件夹图标以导航到相应的页面或脚本，从而指定将处理表单数据的页面或脚本。 示例：processorder.php。

d. 在“方法”弹出菜单中，指定将表单数据传输到服务器的方法。

设置以下任一选项：

默认值使用浏览器的默认设置将表单数据发送到服务器。 通常，默认值为 GET 方法。

GET将值附加到请求该页面的 URL 中。

POST在 HTTP 请求中嵌入表单数据。

不要使用 GET 方法发送长表单。 URL 的长度限制在 8192 个字符以内。 如果发送的数据量太大，数据将被截断，从而会导致意外的或失败的处理结果。

对于由 GET 方法传递的参数所生成的动态页，可以添加书签，这是因为重新生成页面所需的全部值都包含在浏览器地址框中显示的 URL 中。 与此相反，对于由 POST 方法传递的参数所生成的动态页，不可添加书签。

如果要收集机密用户名和密码、信用卡号或其他机密信息，POST 方法可能比 GET 方法更安全。 但是，由 POST 方法发送的信息是未经加密的，容易被黑客获取。 若要确保安全性，请通过安全的连接与安全的服务器相连。

e.（可选）在“Enctype”弹出菜单中，指定对提交给服务器进行处理的数据使用 MIME 编码类型。

application/x-www-form-urlencode 的默认设置通常与 POST 方法一起使用。 如果要创建文件上传域，请指定 multipart/form‑data MIME 类型。

f.（可选）在“目标”弹出菜单中，指定一个窗口来显示被调用程序返回的数据。

如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。 设置以下任一目标值：

_blank 在未命名的新窗口中打开目标文档。

_parent 在显示当前文档的窗口的父窗口中打开目标文档。

_self 在提交表单时所在的同一窗口中打开目标文档。

_top 在当前窗口的窗体内打开目标文档。 此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中时也是如此。

在页面中插入表单对象：

a. 将插入点置于表单中显示该表单对象的位置。

b. 在“插入”>“表单”菜单中或者在“插入”面板的“表单”类别中选择该对象。

c. 填写“输入标签辅助功能属性”对话框。 有关详细信息，请单击对话框中的“帮助”按钮。

d. 设置对象的属性。

e. 在属性检查器中为该对象输入名称。

每个文本域、隐藏域、复选框和列表/菜单对象必须具有可在表单中标识其自身的唯一名称。 表单对象名称不能包含空格或特殊字符。 可以使用字母数字字符和下划线 (_) 的任意组合。 为文本域指定的标签是用于存储该域值（输入的数据）的变量名。 这是发送给服务器进行处理的值。

f. 若要为页面中的文本域、复选框或单选按钮对象添加标签，请在相应对象旁边单击，然后键入标签文字。

使用换行符、段落分隔符、预格式化文本或表格来设置表单的格式。您不能在另一个表单中插入表单（即，您不能重叠标记），但可以在一个页面中包含多个表单。

设计表单时，请记住\n用描述性文本标记表单字段，让用户知道\n他们要回复什么内容，例如，"输入您的姓名"以请求姓名\n信息。

使用表格为表单对象和字段标签提供结构。在表单中使用表格时，请确保所有 table 标记都包含在 form 标记之间。

指定该文件域对象的名称。

指定字段中可显示的最大字符数。

指定字段可容纳的最大字符数。如果用户浏览定位文件，文件名和路径可以超过指定的 Max Chars 值。但是，如果用户尝试键入文件名和路径，文件字段只允许输入 Max Chars 值指定的字符数。

出现“选择图像源”对话框。

为该按钮指定一个名称。 两个 个保留名称："Submit"和"Reset"，分别告诉表单将表单数据提交给正在处理应用程序或脚本，或将所有表单字段重置为其原始值。

指定要为该按钮使用的图像。

允许您输入描述性文本，以防图像无法在浏览器中载入。

设置对象的对齐属性。

启动您的默认图像编辑器并打开图像文件进行编辑。

使您可以将 CSS 规则应用于对象。

选择“插入”>“表单”>“单选按钮组”。

完成对话框设置，然后单击“确定”。

a. 在“名称”框中，输入单选按钮组的名称。

 如果将这些单选按钮设置为将参数传递回服务器，则这些参数将与该名称相关联。 例如，如果将组命名为 myGroup，将表单方法设置为 GET（即，您希望当用户单击提交按钮时表单传递 URL 参数而不是表单参数），则会在 URL 中将表达式 myGroup="CheckedValue" 传递给服务器。

b. 单击加号 (+) 按钮向该组添加一个单选按钮。 为新按钮输入标签和选定值。

c. 单击向上或向下箭头重新排序这些按钮。

d. 若要设置当在浏览器中打开页面时，某个特定单选按钮处于选中状态，请在“选取值等于”框中输入一个等于该单选按钮值的值。

可以输入静态值，或者通过单击该框旁边的闪电图标，然后选择包含可能选定值的记录集以指定动态值。 无论是哪一种指定方式，所指定的值都应与组中某个单选按钮的选定值相匹配。 若要查看单选按钮的选定值，请选择每个单选按钮，然后打开其属性检查器（“窗口”>“属性”）。

e. 选择您希望 Dreamweaver 布局按钮的格式。可以使用换行符或表格来设置这些按钮的布局。 如果选择表格选项，Dreamweaver 将创建一个单列表，并将这些单选按钮放在左侧，将标签放在右侧。

还可以使用属性检查器或直接在“代码”视图中设置属性。

选择“插入”>“表单”>“复选框组”。

完成对话框设置，然后单击“确定”。

a. 在“名称”框中，输入复选框组的名称。

如果设置这些复选框以将参数传递回服务器，这些参数将与该名称相关联。 例如，如果将组命名为 myGroup，将表单方法设置为 GET（即，您希望当用户单击提交按钮时表单传递 URL 参数而不是表单参数），则会在 URL 中将表达式 myGroup="CheckedValue" 传递给服务器。

b. 单击加号 (+) 按钮向该组添加一个复选框。 为新复选框输入标签和选定值。

c. 单击向上或向下箭头对这些复选框重新进行排序。

d. 若要将某个特定复选框设置为在浏览器中打开页面时处于选中状态，请在“选取值等于”框中输入一个等于该复选框值的值。

可以输入静态值，或者通过单击该框旁边的闪电图标，然后选择包含可能选定值的记录集以指定动态值。 无论是哪一种指定方式，所指定的值都应与组中某个复选框的选定值相匹配。 若要查看复选框的选定值，请选择每个复选框，然后打开其属性检查器（“窗口”>“属性”）。

e. 选择您希望 Dreamweaver 在对这些复选框进行布局时要使用的格式。

可以使用换行符或表格来设置这些复选框的布局。 如果选择表格选项，Dreamweaver 创建一个单列表，并将这些复选框放在左侧，将标签放在右侧。

还可以使用属性检查器或直接在“代码”视图中设置属性。

在页面中插入 HTML 列表/菜单表单对象：

    a. 在页面上的 HTML 表单（“插入”>“表单”>“表单”）中单击。

    b. 选择“插入”>“表单”>“列表/菜单”以插入表单对象。

执行下列操作之一：

• 选择新的或现有 HTML 列表/菜单表单对象，然后单击属性检查器中的“动态”按钮。

• 选择“插入”>“数据对象”>“动态数据”>“动态选择列表”。

完成“动态列表/菜单”对话框，然后单击“确定”。

  a. 在“来自记录集的选项”弹出菜单中，选择要用作内容源的记录集。 您还可以在以后使用此菜单来编辑静态和动态列表/菜单项。

  b. 在“静态选项”区域中，输入列表或菜单中的默认项。 还可以使用此选项在添加动态内容后编辑列表/菜单表单对象中的静态项。

  c. （可选）使用加号 (+) 和减号 (–) 按钮添加和删除列表中的项。 项的顺序与“初始列表值”对话框中的顺序相同。 在浏览器中加载页面时，列表中的第一个项是选中的项。 使用向上和向下箭头按钮重新排列列表中的项。

  d. 在“值”弹出菜单中，选择包含菜单项值的域。

  e. 在“标签”弹出菜单中，选择包含菜单项标签文字的域。

  f. （可选）若要指定在浏览器中打开页面或者在表单中显示记录时，某个特定菜单项处于选中状态，请在“选取值等于”框中输入一个等于该菜单项的值的值。

    可以输入静态值，也可以通过单击该框旁边的闪电图标，然后从数据源列表中选择动态值来指定动态值。 无论是哪一种指定方式，所指定的值都应该与某个菜单项值匹配。

数据源应包含文本信息。 如果列表中没有显示数据源，或者可用的数据源不满足您的需求，请单击加号（+）按钮以定义新的数据源。

• 单击“选择，如果：”框旁边的闪电图标，然后从数据源列表中选择该域。

  数据源必须包含布尔数据，如 Yes 和 No，或 true 和 false。 如果列表中没有出现任何数据源，或者可用的数据源不能满足您的需要，请单击加号 (+) 按钮以定义新的数据源。

• 在“等于”框中，输入要使复选框显示为选中状态该域必须具有的值。

  例如，如果希望记录中的特定域的值为 Yes 时，该复选框显示为选中状态，请在“等于”框中输入 Yes。

"单选按钮值"框显示组中所有单选按钮的值。

您选择的记录集包含与单选按钮选中值匹配的值。要查看单选按钮的选中值，请选择每个单选按钮并打开其属性检查器（"窗口">"属性"）。

完成“动态数据”对话框，然后单击“确定”。

  a. 从数据源列表中选择一种数据源。

  b.（可选）为该文本选择一种数据格式。

  c.（可选）修改 Dreamweaver 插入到页面中以显示动态文本的代码。

确保您要验证的每个文本字段都有唯一的名称。

例如，您可以指定用于输入人员年龄的文本字段仅接受数字。

例如，您可以输入尚不存在的函数名称，如 processMyForm()。

例如，您可以在文档的 head 部分定义以下 JavaScript 函数，以在用户单击"提交"按钮时显示消息：

function processMyForm(){

alert('感谢您的订购！');

}

此步骤仅会出现一次。

将出现“输入标签辅助功能属性”对话框。

为表单域指定 ID。 这个值可用于从 JavaScript 中引用域；如果您选择了样式选项下的“使用 for 附加 Label 标签”选项，这个值还可以作为 for 属性的值。

会在表单项的两边添加 Label 标签，如下所示：

使用 for 属性在表单项两侧添加 Label 标签，如下所示：

<input type=\"radio\" name=\"radiobutton\" value=\"radiobutton\" id=\"radiobutton\"> <label for=\"radiobutton\">RadioButton2</label>

此选项会使浏览器用焦点矩形呈现与复选框和单选按钮关联的文本，并使用户能够通过在关联文本中的任意位置（而不仅是在复选框或单选按钮控件上）单击来选择相应复选框和单选按钮。

注意：这是辅助功能的首选选项；但是，功能可能因浏览器而异。

不使用 Label 标签，如下所示：

使用键盘等效键（一个字母）和 Alt 键（Windows）或 Control 键（Macintosh）在浏览器中选择表单对象。例如，如果您输入 B 作为\n访问键，使用 Macintosh 浏览器的用户可以键入 Control+B\n来选择表单对象。

为表单对象指定 Tab 顺序。 如果您为一个对象设置 Tab\n顺序，则必须为所有对象设置 Tab 顺序。

当页面上有其他链接和表单对象并需要用户按特定顺序按 Tab 键浏览时，设置 Tab 顺序很有用。

该表单对象出现在文档中。

• 在代码视图中编辑相应的属性。

• 右键单击 (Windows) 或 Control 单击 (Macintosh)，\n然后选择"编辑标记"。