如何创建 HTML 表单并将 JavaScript 行为附加到表单对象

优质
小牛编辑
123浏览
2023-12-01

注意:在 Dreamweaver Creative Cloud 更新中已增强了对 HTML 表单元素的支持。有关信息,请参阅对表单元素的增强 HTML5 支持。

关于 Web 表单

当访问者在 Web 浏览器中显示的 Web 表单中输入信息,然后单击提交按钮时,这些信息将被发送到服务器,服务器中的服务器端脚本或应用程序会对这些信息进行处理。服务器向用户(或客户端)发回所处理的信息或基于该表单内容执行某些其他操作,以此进行响应。

可以创建将数据提交到大多数应用程序服务器的表单,包括 PHP、ASP 和 ColdFusion。如果使用 ColdFusion,您也可以在表单中添加特定于 ColdFusion 的表单控件。

注意:您还可以将表单数据直接发送给电子邮件收件人。

表单对象

在 Dreamweaver 中,表单输入类型称为表单对象。表单对象是允许用户输入数据的机制。您可以在表单中添加以下表单对象:

文本域

接受任何类型的字母数字文本输入内容。文本可以单行或多行显示,也可以以密码域的方式显示,在这种情况下,输入文本将被替换为星号或项目符号,以避免旁观者看到这些文本。

注意:使用密码域输入的密码及其他信息在发送到服务器时并未进行加密处理。所传输的数据可能会以字母数字文本形式被截获并被读取。因此,您始终应对要确保安全的数据进行加密。

隐藏的域

存储用户输入的信息,如姓名、电子邮件地址或偏爱的查看方式,并在该用户下次访问此站点时使用这些数据。

按钮

在单击时执行操作。您可以为按钮添加自定义名称或标签,或者使用预定义的“提交”或“重置”标签。使用按钮可将表单数据提交到服务器,或者重置表单。您还可以指定其他已在脚本中定义的处理任务。例如,可能会使用按钮根据指定的值计算所选商品的总价。

复选框

允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。下例显示选中了三个复选框选项:冲浪、山地自行车和漂流。

单选按钮

代表互相排斥的选择。在某单选按钮组(由两个或多个共享同一名称的按钮组成)中选择一个按钮,就会取消选择该组中的所有其他按钮。在下例中,漂流 是当前选中的选项。如果用户单击了冲浪,则会自动清除漂流 按钮。

列表菜单

在一个滚动列表中显示选项值,用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值,用户只能从中选择单个选项。在下列情况下使用菜单:只有有限的空间但必须显示多个内容项,或者要控制返回给服务器的值。菜单与文本域不同,在文本域中用户可以随心所欲键入任何信息,甚至包括无效的数据,对于菜单而言,您可以具体设置某个菜单返回的确切值。

注意:HTML 表单上的弹出菜单与图形弹出菜单不同。有关创建、编辑以及显示和隐藏图形弹出菜单的信息,请访问此部分末尾的链接。

跳转菜单

可导航的列表或弹出菜单,使用它们可以插入一个菜单,其中的每个选项都链接到某个文档或文件。

文件域

使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。

图像域

使您可以在表单中插入一个图像。使用图像域可生成图形化按钮,例如“提交”或“重置”按钮。如果使用图像来执行任务而不是提交数据,则需要将某种行为附加到表单对象。

创建 HTML 表单

(仅限 Creative Cloud 用户):作为 HTML5 支持的一部分,在“属性”面板中为表单元素引入了新属性。 此外,在插入面板的“表单”部分入了四个新的表单元素(电子邮件、搜索、电话、URL)。有关详细信息,请参阅对表单元素的增强 HTML5 支持。

  1. 打开一个页面,将插入点放在希望表单出现的位置。
  2. 选择“插入”>“表单”,或选择“插入”面板中的“表单”类别,然后单击“表单”图标。

    在“设计”视图中,表单以红色的虚轮廓线指示。如果看不到这个轮廓线,请选择“查看”>“可视化助理”>“不可见元素”。

  3. 在属性检查器(“窗口”>“属性”)中设置 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 在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口,即使原始文档显示在框架中时也是如此。

  4. 在页面中插入表单对象:

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

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

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

    注意:如果看不到“输入标签辅助功能属性”对话框,当尝试插入表单对象时,“代码”视图中可能显示了插入点。确保插入点位于“设计”视图中并重试。有关此主题的更多信息,请参阅 David Powers 的文章 Creating HTML forms in Dreamweaver(在 Dreamweaver 中创建 HTML 表单)。

    d. 设置对象的属性。

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

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

    注意:同一组中的所有单选按钮都必须具有相同的名称。

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

  5. 调整表单的布局。

    可以使用换行符、段落标记、预格式化的文本或表格来设置表单的格式。不能将一个表单插入另一个表单中(即标签不能交迭),但是可以在一个页面中包含多个表单。

    设计表单时,请记住要用描述性文本来标记表单域,以使用户知道他们要回答哪些内容。例如,“键入您的名字”表示请求输入名字信息。

    可以使用表格为表单对象和域标签提供结构。在表单中使用表格时,请确保所有 table 标签都位于两个 form 标签之间。

有关创建表单的教程,请参阅 www.adobe.com/go/vid0160_cn。

有关使用 CSS 设置表单样式的教程,请参阅 www.adobe.com/go/vid0161_cn。

文本域对象属性

选择文本域对象,在属性检查器中设置以下任一选项:

字符宽度

指定域中最多可显示的字符数。此数字可以小于“最多字符数”,“最多字符数”指定在域中最多可输入的字符数。例如,如果“字符宽度”设置为 20(默认值),而用户输入了 100 个字符,则在该文本域中只能看到其中的 20 个字符。虽然在该域中无法看到这些字符,但域对象可以识别它们,而且它们会被发送到服务器进行处理。

最多字符数

指定用户在单行文本域中最多可输入的字符数。可以使用“最多字符数”将邮政编码的输入限制为 5 位数字,将密码限制为 10 个字符,等等。如果将“最多字符数”框保留为空白,则用户可以输入任意数量的文本。如果文本超过域的字符宽度,文本将滚动显示。如果用户的输入超过了最多字符数,则表单会发出警告声。

行数

(在选中了“多行”选项时可用)设置多行文本域的域高度。

已禁用

禁用文本区域。

只读

使文本区域成为只读文本区域。

类型

指定域为单行、多行还是密码域。

单行

生成一个 input 标签且其 type 属性设置为 text。“字符宽度”设置映射为 size 属性,“最多字符数”设置映射为 maxlength 属性。

多行

生成一个 textarea 标签。“字符宽度”设置映射为 cols 属性,“行数”设置映射为 rows 属性。

密码

生成一个 input 标签且其 type 属性设置为 password。“字符宽度”和“最多字符数”设置映射到与单行文本域情况下相同的那些属性。当用户在密码文本域中键入时,输入内容显示为项目符号或星号,以保护它不被其他人看到。

初始值

指定在首次加载表单时域中显示的值。例如,可以通过在域中包含说明或示例值的形式,指示用户在域中输入信息。

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

按钮对象选项

按钮名称

为该按钮指定一个名称。“提交”和“重置”是两个保留名称,“提交”通知表单将表单数据提交给处理应用程序或脚本,而“重置”则将所有表单域重置为其原始值。

确定按钮上显示的文本。

动作

确定单击该按钮时发生的动作。

提交表单

在用户单击该按钮时提交表单数据以进行处理。该数据将被提交到在表单的“动作”属性中指定的页面或脚本。

重置表单

在单击该按钮时清除表单内容。

指定单击该按钮时要执行的动作。例如,您可以添加一个 JavaScript 脚本,使得当用户单击该按钮时打开另一个页面。

将 CSS 规则应用于对象。

复选框对象选项

选定值

设置在该复选框被选中时发送给服务器的值。例如,在一项调查中,可以将值 4 设置为表示非常同意,将值 1 设置为表示强烈反对。

初始状态

确定在浏览器中加载表单时,该复选框是否处于选中状态。

动态

使服务器可以动态确定复选框的初始状态。例如,您可以使用复选框直观显示存储在数据库记录中的“Yes/No”信息。在设计时,您并不知道该信息。在运行时,服务器将读取数据库记录,如果值为“Yes”,则选中该复选框。

对对象应用层叠样式表 (CSS) 规则。

单个单选按钮对象选项

选定值

设置在该单选按钮被选中时发送给服务器的值。例如,可以在“选定值”文本框中键入滑雪,指示用户选择滑雪。

初始状态

确定在浏览器中加载表单时,该单选按钮是否处于选中状态。

动态

使服务器可以动态确定单选按钮的初始状态。例如,您可以使用单选按钮直观表示存储在数据库记录中的信息。在设计时,您并不知道该信息。在运行时,服务器将读取数据库记录,如果该值与指定的值匹配,则选中该单选按钮。

将 CSS 规则应用于对象。

菜单选项

列表/菜单

为该菜单指定一个名称。该名称必须是唯一的。

类型

指定该菜单是单击时下拉的菜单(“菜单”选项),还是显示一个列有项目的可滚动列表(“列表”选项)。如果您希望表单在浏览器中显示时仅有一个选项可见,则选择“菜单”选项。若要显示其他选项,用户必须单击向下箭头。

选择“列表”选项可以在浏览器显示表单时列出一些或所有选项,以便用户可以选择多个项。

高度

(仅“列表”类型)设置菜单中显示的项数。

选定范围

(仅“列表”类型)指定用户是否可以从列表中选择多个项。

列表值

打开一个对话框,可通过它向表单菜单添加项:

  1. 使用加号 (+) 和减号 (–) 按钮添加和删除列表中的项。
  2. 输入每个菜单项的标签文本和可选值。

    列表中的每项都有一个标签(在列表中显示的文本)和一个值(选中该项时,发送给处理应用程序的值)。如果没有指定值,则改为将标签文字发送给处理应用程序。

  3. 使用向上和向下箭头按钮重新排列列表中的项。

    菜单项在菜单中出现的顺序与在“列表值”对话框中出现的顺序相同。在浏览器中加载页面时,列表中的第一个项是选中的项。

动态

使服务器可以在该菜单第一次显示时动态选择其中的一个菜单项。

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

初始化时选定

设置列表中默认选定的菜单项。单击列表中的一个或多个菜单项。

插入文件上传域

您可以创建文件上传域,文件上传域使用户可以选择其计算机上的文件(如字处理文档或图形文件),并将该文件上传到服务器。文件域的外观与其他文本域类似,只不过,文件域还包含一个“浏览”按钮。用户可以手动输入要上传的文件的路径,也可以使用“浏览”按钮定位并选择该文件。

必须要有服务器端脚本或能够处理文件提交操作的页面,才可以使用文件上传域。请查阅与您用来处理表单数据的服务器技术相关的文档。例如,如果您使用 PHP,则请参阅联机 PHP 手册中的“文件上传处理”,网址为 http://us2.php.net/features.file-upload.php 。

文件域要求使用 POST 方法将文件从浏览器传输到服务器。该文件被发送到表单的“动作”框中所指定的地址。

注意:在使用文件域之前,请与服务器管理员联系,确认允许使用匿名文件上传。

  1. 在页面中插入表单(“插入”>“表单”)。
  2. 选择表单以显示其属性检查器。
  3. 将表单“方法”设置为 POST。
  4. 从“MIME 类型”弹出菜单中选择 multipart/form-data。
  5. 在“动作”框中,请指定服务器端脚本或能够处理上传文件的页面。
  6. 将插入点放置在表单轮廓内,然后选择“插入”>“表单”>“文件域”。
  7. 在属性检查器中设置以下任一选项:

    文件域名称

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

    字符宽度

    指定域中最多可显示的字符数。

    最多字符数

    指定域中最多可容纳的字符数。如果用户通过浏览来定位文件,则文件名和路径可超过指定的“最多字符数”的值。但是,如果用户尝试键入文件名和路径,则文件域最多仅允许键入“最多字符数”值所指定的字符数。

插入图像按钮

可以使用图像作为按钮图标。如果使用图像来执行任务而不是提交数据,则需要将某种行为附加到表单对象。

  1. 在文档中,将插入点放在表单轮廓内。
  2. 选择“插入”>“表单”>“图像域”。

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

  3. 在“选择图像源文件”对话框中为该按钮选择图像,然后单击“确定”。
  4. 在属性检查器中设置以下任一选项:

    图像区域

    为该按钮指定一个名称。“提交”和“重置”是两个保留名称,“提交”通知表单将表单数据提交给处理应用程序或脚本,而“重置”则将所有表单域重置为其原始值。

    源文件

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

    替换

    用于输入描述性文本,一旦图像在浏览器中加载失败,将显示这些文本。

    对齐

    设置对象的对齐属性。

    编辑图像

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

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

  5. 若要将某个 JavaScript 行为附加到该按钮,选择该图像,然后在“行为”面板(“窗口”>“行为”)中选择行为。

隐藏域对象选项

隐藏的域

指定该域的名称。

为域指定一个值。该值将在提交表单时传递给服务器。

插入一组单选按钮

  1. 将插入点放在表单轮廓内。
  2. 选择“插入”>“表单”>“单选按钮组”。
  3. 完成对话框设置,然后单击“确定”。

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

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

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

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

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

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

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

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

插入一组复选框

  1. 将插入点放在表单轮廓内。
  2. 选择“插入”>“表单”>“复选框组”。
  3. 完成对话框设置,然后单击“确定”。

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

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

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

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

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

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

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

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

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

关于动态表单对象

作为一种表单对象,动态表单对象的初始状态由服务器在页面被从服务器中请求时确定,而不是由表单设计者在设计时确定。例如,当用户请求的 PHP 页上包含带有菜单的表单时,该页中的 PHP 脚本会自动使用存储在数据库中的值填充该菜单。然后,服务器将完成后的页面发送到用户的浏览器中。

使表单对象成为动态对象可以简化站点的维护工作。例如,许多站点使用菜单为用户提供一组选项。如果该菜单是动态的,您可以在一个位置(即存储菜单项的数据库表)集中添加、删除或更改菜单项,从而更新该站点上同一菜单的所有实例。

插入或更改动态 HTML 表单菜单

您可以用数据库中的项动态地填充 HTML 表单菜单或列表菜单。对于大多数页面,您可使用 HTML 菜单对象。

在开始之前,您必须在 ColdFusion、PHP 或 ASP 页中插入一个 HTML 表单,而且必须为该菜单定义记录集或其他动态内容源。

  1. 在页面中插入 HTML 列表/菜单表单对象:

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

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

  2. 执行下列操作之一:

    • 选择新的或现有 HTML 列表/菜单表单对象,然后单击属性检查器中的“动态”按钮。
    • 选择“插入”>“数据对象”>“动态数据”>“动态选择列表”。
  3. 完成“动态列表/菜单”对话框,然后单击“确定”。

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

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

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

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

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

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

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

     

使现有 HTML 表单菜单成为动态对象

  1. 在“设计”视图中选择列表/菜单表单对象。
  2. 在属性检查器中,单击“动态”按钮。
  3. 完成对话框设置,然后单击“确定”。

在 HTML 文本域中显示动态内容

在通过浏览器查看表单时,您可以在 HTML 文本域中显示动态内容。

在开始之前,您必须在 ColdFusion、PHP 或 ASP 页中创建表单,而且必须为该文本域定义记录集或其他动态内容源。

  1. 选择页面上 HTML 表单中的文本域。
  2. 在属性检查器中,单击“初始值”框旁边的闪电图标,以显示“动态数据”对话框。
  3. 选择为文本域提供值的记录集列,然后单击“确定”。

设置动态文本域对话框的选项

  1. 从“文本域”弹出菜单中选择要设置为动态对象的文本域。
  2. 单击“将值设置为”框旁边的闪电图标,从数据源列表中选择一个数据源,然后单击“确定”。

    数据源应包含文本信息。如果列表中没有出现任何数据源,或者可用的数据源不能满足您的需要,请单击加号 (+) 按钮以定义新的数据源。

动态预先选择 HTML 复选框

您可以让服务器决定当表单在浏览器中显示时是否选中一个复选框。

在开始之前,您必须在 ColdFusion、PHP 或 ASP 页中创建表单,而且必须为复选框定义记录集或其他动态内容源。理想情况下,该内容源应包含布尔数据,如 Yes/No 或 true/false。

  1. 在页面上选择一个复选框表单对象。
  2. 在属性检查器中,单击“动态”按钮。
  3. 完成“动态复选框”对话框,然后单击“确定”。
    • 单击“选择,如果:”框旁边的闪电图标,然后从数据源列表中选择该域。

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

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

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

    注意:在用户单击表单的“提交”按钮时,这个值也会返回给服务器。

动态预先选择 HTML 单选按钮

当浏览器中的 HTML 表单中显示记录时,动态预先选中某个 HTML 单选按钮。

在开始之前,必须在 ColdFusion、PHP 或 ASP 页中创建表单,并且插入至少一组 HTML 单选按钮(“插入”>“表单”>“单选按钮组”)。而且必须为单选按钮定义记录集或其他动态内容源。理想情况下,该内容源应包含布尔数据,如 Yes/No 或 true/false。

  1. 在“设计”视图中,在单选按钮组中选择一个单选按钮。
  2. 在属性检查器中,单击“动态”按钮。
  3. 完成“动态单选按钮组”对话框,然后单击“确定”。

设置动态单选按钮组对话框的选项

  1. 在“单选按钮组”弹出菜单中,选择页面中的表单和单选按钮组。

    “单选按钮值”框将显示该组内所有单选按钮的值。

  2. 从值列表中选择要动态预先选中的值。该值显示在“值”框中。
  3. 单击“选取值等于”框旁边的闪电图标,然后选择包含该组中单选按钮的可能选定值的记录集。

    所选的记录集包含与单选按钮的选定值匹配的值。若要查看单选按钮的选定值,请选择每个单选按钮,然后打开其属性检查器(“窗口”>“属性”)。

  4. 单击“确定”。

设置动态单选按钮组对话框的选项 (ColdFusion)

  1. 从“单选按钮组”弹出菜单中选择单选按钮组和表单。
  2. 单击“选取值等于”框旁边的闪电图标。
  3. 完成“动态数据”对话框,然后单击“确定”。

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

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

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

  4. 单击“确定”关闭“动态单选按钮组”对话框,并在“单选按钮组”中插入动态内容占位符。

验证 HTML 表单数据

Dreamweaver 可添加用于检查指定文本域中内容的 JavaScript 代码,以确保用户输入了正确的数据类型。

您可以使用 Spry 表单 Widget 构建自己的表单,并验证指定表单元素的内容。有关详细信息,请参考下面列出的 Spry 主题。

您还可以在 Dreamweaver 中构建用于验证指定域内容的 ColdFusion 表单。有关详细信息,请参考下面列出的 ColdFusion 章节。

  1. 创建一个包含至少一个文本域及一个“提交”按钮的 HTML 表单。

    确保要验证的每个文本域具有唯一名称。

  2. 选择“提交”按钮。
  3. 在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,然后从列表中选择“验证表单”行为。
  4. 设置每个文本域的验证规则,然后单击“确定”。

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

    注意:“验证表单”行为仅在文档中已插入了文本域的情况下可用。

将 JavaScript 行为附加到 HTML 表单对象

您可以将 Dreamweaver 中存储的 JavaScript 行为附加到按钮等 HTML 表单对象。

  1. 选择该 HTML 表单对象。
  2. 在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,然后从列表中选择一个行为。

将自定义脚本附加到 HTML 表单按钮

有些表单使用 JavaScript 或 VBScript 在客户端执行表单处理或其他操作,这与将表单数据发送到服务器进行处理相反。您可以使用 Dreamweaver 配置表单按钮,以便当用户单击按钮时运行特定的客户端脚本。

  1. 选择表单中的“提交”按钮。
  2. 在“行为”面板(“窗口”>“行为”)中,单击加号 (+) 按钮,然后从列表中选择“调用 JavaScript”。
  3. 在“调用 JavaScript”框中,输入当用户单击该按钮时所运行的 JavaScript 函数的名称,然后单击“确定”。

    例如,您可以输入一个尚不存在的函数名,如 processMyForm()。

  4. 如果文档的 head 部分中不存在 JavaScript 函数,则添加该函数。

    例如,可以在文档的 head 部分定义以下 JavaScript 函数,以便在用户单击“提交”按钮时显示一条消息:

    function processMyForm(){ alert('Thanks for your order!'); }

创建具有辅助功能的 HTML 表单

在插入 HTML 表单对象时,可以使表单对象具有辅助功能,并可以在以后更改辅助功能属性。

添加具有辅助功能的表单对象

  1. 在第一次添加具有辅助功能的表单对象时,请激活表单对象的“辅助功能”对话框(请参阅为可视化开发优化工作区)。

    此步骤仅会出现一次。

  2. 在文档中,将插入点放在希望表单对象出现的位置。
  3. 选择“插入”>“表单”,然后选择要插入的表单对象。

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

  4. 完成对话框设置,然后单击“确定”。下面列出部分选项:

    注意:屏幕阅读器会朗读作为对象的“标签”属性而输入的名称。

    ID

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

    用 Label 标签环绕

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

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    使用 for 附加 Label 标签

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

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

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

    注意:这是辅助功能的首选选项;但是浏览器不同,该功能也可能会有所不同。

    无 Label 标签

    不使用 Label 标签,如下所示:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    访问键

    使用等效的键盘键(一个字母)加上 Alt (Windows) 或 Ctrl (Macintosh) 键在浏览器中选择表单对象。例如,如果输入 B 作为访问键,则使用 Macintosh 浏览器的用户可以键入 Ctrl+B 以选择表单对象。

    Tab 键索引

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

    当您的页面上有其他链接和表单对象,并且需要用户用 Tab 以特定顺序访问这些对象时,设置 Tab 顺序就会非常有用。

  5. 单击“是”插入 form 标签。

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

    注意:如果您按“取消”,则表单对象将出现在文档中,但 Dreamweaver 不会将它与辅助功能标签或属性相关联。

编辑表单对象的辅助功能值

  1. 在“文档”窗口中,选择该对象。
  2. 执行下列操作之一:
    • 在“代码”视图中编辑适当的属性。
    • 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh),然后选择“编辑标签”。

更多此类内容

  • 使用表单从用户处收集信息
  • 建立 ColdFusion 表单
  • 应用“显示弹出菜单”行为
  • 使用表单从用户处收集信息
  • 定义表单参数
  • 定义 URL 参数
  • 构建 ColdFusion 表单
  • 以可视化方式生成 Spry 页
  • 创建表单教程
  • 设置表单样式教程
  • 定义动态内容源
  • 定义动态内容源
  • 使用 Spry 验证文本字段 Widget
  • 使用 Spry 验证文本区域 Widget
  • 使用 Spry 验证选择 Widget
  • 使用 Spry 验证复选框 Widget
  • 验证 ColdFusion 表单数据
  • 应用“调用 JavaScript”行为