- 网页设计与网站建设完全实战手册
- 刘贵国
- 4740字
- 2021-03-19 18:34:55
9.2 插入输入类表单对象
可以使用Dreamweaver创建带有文本域、密码域、单选按钮、复选框、选择、按钮及其他输入类型的表单，这些输入类型又称为表单对象。
9.2.1 插入表单域
使用表单必须具备的条件有两个：一个是含有表单元素的网页文档，另一个是具备服务器端的表单处理应用程序或客户端脚本程序，它能够处理用户输入到表单的信息。下面创建一个基本的表单，具体操作步骤如下：
01 启动Dreamweaver CC，打开网页文档，如图9-1所示。将光标置于文档中要插入表单的位置。
图9-1 打开网页文档
02 执行“插入”|“表单”|“表单”命令，如图9-2所示。
图9-2 执行“表单”命令
★提示★
在“表单”插入栏中单击“表单”按钮
，也可以插入表单。
03 执行命令后，页面中就会出现红色的虚线，这个虚线就是表单，如图9-3所示。
图9-3 插入表单
★提示★
执行命令后，如果看不到红色虚线表单，可以执行“查看”|“可视化助理”|“不可见元素”命令，从而看到插入的表单。
04 选中表单，在“属性”面板中，设置表单的属性，如图9-4所示。
图9-4 设置表单的属性
★知识要点★
在表单的“属性”面板中可以设置以下参数：
●“Form ID”：输入标识该表单的唯一名称。
●“Action”：指定处理该表单的动态页或脚本的路径。可以在“动作”文本框中输入完整的路径，也可以单击文件夹图标浏览应用程序。如果读者并没有相关程序支持的话，也可以使用E-mail的方式来传输表单信息，这种方式需要在“动作”文本框中输入“mailto：电子邮件地址”的内容，比如“mailto：jsxson@sohu.com”，表示提交的信息将会发送到邮箱中。
●“Method”：在“method”下拉列表中，选择将表单数据传输到服务器的传送方式，包括3个选项。读者可以选择速度快但携带数据量小的GET方法，或者数据量大的POST方法。一般情况下应该使用POST方法，这在数据保密方面也有好处。
➢ “POST”：用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输入的方式读取表单内的数据。
➢ “GET”：将表单内的数据附加到URL后面传送给服务器，服务器用读取环境变量的方式读取表单内的数据。
➢ “Method”：用浏览器默认的方式，一般默认为GET。
●“Enctype”：用来设置发送数据的MIME编码类型，一般情况下应选择application/x-www-form-urlencoded。
●“Target”：使用“目标”下拉列表指定一个窗口，这个窗口中显示应用程序或者脚本程序将表单处理完成后所显示的结果。
➢ “_blank”：反馈网页将在新开窗口里打开。
➢ “_parent”：反馈网页将在副窗口里打开。
➢ “_self”：反馈网页将在原窗口里打开。
➢ “_top”：反馈网页将在顶层窗口里打开。
●“Class”：在此下拉列表中选择要定义的表单样式。
9.2.2 插入文本域
文本域接受任何类型的字母及数字输入内容。文本域主要用于单行信息的输入，创建文本域的具体操作步骤如下：
01 将光标置于表单中，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为10、“列”设置为2，如图9-5所示。
图9-5 “表格”对话框
02 单击“确定”按钮，插入表格，如图9-6所示。
图9-6 插入表格
03 将光标置于表格的第1行1列单元格中，输入相应的文字，如图9-7所示。
图9-7 输入文字
04 将光标置于表格的第1行第2列单元格中，执行“插入”|“表单”|“文本”命令，插入文本域，如图9-8所示。
图9-8 插入文本域
★提示★
在“表单”插入栏中单击“文本”按钮
，也可以插入文本域。
05 选中插入的文本域，打开“属性”面板，在面板中设置文本域的相关属性，如图9-9所示。
图9-9 设置文本域的属性
★指点迷津★
在文本域的“属性”面板中主要有以下参数：
●Name：在文本框中为该文本域指定一个名称，每个文本域都必须有一个唯一的名称。文本域名称不能包含空格或特殊字符，可以使用字母、数字、字符和下画线（_）的任意组合。所选名称最好与输入的信息有关系。
●Size：设置文本域可显示的字符宽度。
●MaxLength：设置单行文本域中最多可输入的字符数。使用“最多字符数”将邮政编码限制为6位数，或将密码限制为10个字符等。如果将“最多字符数”文本框保留为空白，则可以输入任意数量的文本，如果文本超过字符宽度，文本将滚动显示。如果输入超过最大字符数，则表单产生警告声。
●Pattern：可用于指定JavaScript正则表达式模式以验证输入。省略前导斜杠和结尾斜杠。
●List：可用于编辑属性检查器中未列出的属性。
9.2.3 插入密码域
使用密码域输入的密码及其他信息在发送到服务器时并不会进行加密处理，所传输的数据可能会以字母、数字、文本的形式被截获并被读取。因此，始终应对要确保安全的数据进行加密。创建密码域的具体操作步骤如下：
01 将光标置于表格的第2行第1列中，输入相应的文字，如图9-10所示。
图9-10 输入文字
02 将光标置于表格的第2行第2列单元格中，执行“插入”|“表单”|“密码”命令，插入密码域，如图9-11所示。
图9-11 插入密码域
★高手支招★
最好对不同内容的文本域进行不同数量的限制，防止个别浏览者恶意输入大量数据，维护系统的稳定性。如用户名可以设置为30个字符、密码可以设置为20个字符、邮政编码可以设置为6个字符等。
9.2.4 插入多行文本域
如果希望创建多行文本域，则需要使用文本区域。插入文本区域的具体操作步骤如下：
01 将光标置于第9行第1列单元格中，输入相应的文字，如图9-12所示。
图9-12 输入相应的文字
02 将光标置于第9行第2列单元格中，执行“插入”|“表单”|“文本区域”命令，插入文本区域，如图9-13所示。
图9-13 插入文本区域
★提示★
在“表单”插入栏中单击“文本区域”按钮
，也可以插入文本区域。
03 选中插入的文本区域，打开“属性”面板，在面板中设置其属性，如图9-14所示。
图9-14 设置文本区域的属性
9.2.5 插入隐藏域
可以使用隐藏域存储并提交非用户输入信息，该信息对用户而言是隐藏的。将光标置于要插入隐藏域的位置，执行“插入”|“表单”|“隐藏域”命令，插入隐藏域，如图9-15所示。
图9-15 插入隐藏域
★指点迷津★
单击“表单”插入栏中的“隐藏域”
按钮，也可以插入隐藏域。
9.2.6 插入复选框
复选框允许用户在一组选项中选择多个选项，每个复选框都是独立的，所以必须有一个唯一的名称。插入复选框的具体操作步骤如下：
01 将光标置于表格的第3行第1列单元格中，输入文字“预订客服类型：”，如图9-16所示。
图9-16 输入文字
02 将光标置于表格的第3行第2列单元格中，执行“插入”|“表单”|“复选框”命令，插入复选框，如图9-17所示。
图9-17 插入复选框
03 选中复选框，在“属性”面板中设置复选框的属性，如图9-18所示。
图9-18 设置复选框的“属性”
04 将光标置于复选框的右边，输入文字“高级客房”，如图9-19所示。
图9-19 输入文字
05 将光标置于文字的右边，插入其他的复选框，并输入相应的文字，如图9-20所示。
图9-20 插入其他复选框
9.2.7 插入单选按钮
单选按钮只允许从多个选项中选择一个选项。单选按钮通常成组地使用，在同一个组中的所有单选按钮必须具有相同的名称。插入单选按钮的具体操作步骤如下：
01 将光标置于表格的第4行第1列单元格中，输入文字“性别：”，如图9-21所示。
图9-21 输入文字
02 将光标置于第4行第2列单元格中，执行“插入”|“表单”|“单选按钮”命令，插入单选按钮，如图9-22所示。
图9-22 插入单选按钮
★指点迷津★
单击“表单”插入栏中的“单选按钮”
按钮，也可以插入单选按钮。
03 选中插入的单选按钮，打开“属性”面板，在属性面板中设置相关属性，如图9-23所示。
图9-23 设置单选按钮的“属性”
04 将光标置于单选按钮的右边，输入文字“男”，如图9-24所示。
图9-24 输入文字
05 按照步骤02～04的方法，插入第二个单选按钮，并输入文字，如图9-25所示。
图9-25 插入其他单选按钮
9.2.8 插入选择框
选择框使访问者可以从列表中选择一个或多个项目。当空间有限，但需要显示许多项目时，选择框非常有用。如果想要对返回给服务器的值予以控制，也可以使用选择框。选择框与文本域不同，在文本域中用户可以随心所欲地输入任何信息，甚至包括无效的数据，而使用选择框则可以设置某个菜单返回的确切值。具体操作步骤如下：
01 将光标置于表格的第5行第1列单元格中，输入文字“房间数量：”，如图9-26所示。
图9-26 输入文字
02 将光标置于表格的第5行第2列单元格中，执行“插入”|“表单”|“选择”命令，插入选择，如图9-27所示。
图9-27 插入选择
★提示★
单击“表单”插入栏中的“选择”按钮
，也可以插入选择框。
03 选中选择框，在“属性”面板中单击
按钮，如图9-28所示。
图9-28 单击“列表值”按钮
04 弹出“列表值”对话框，在对话框中单击
按钮添加相应的内容，如图9-29所示。
图9-29 “列表值”对话框
★指点迷津★
列表/菜单的“属性”面板中主要有以下参数：
●Name：在其文本框中输入列表/菜单的名称。
●Size：设可用于指定要在列表/菜单中显示的行数。此选项仅当选择列表类型时才可用。
●Selected：可用于指定用户是否可以从列表中一次选择多个选项。仅当选择列表类型时才可用。
●列表值：单击此按钮
，弹出“列表值”对话框，在对话框中向菜单中添加菜单项。
05 单击“确定”按钮，添加列表值，如图9-30所示。
图9-30 添加列表值
9.2.9 课堂小实例——插入URL
创建URL的具体操作步骤如下：
01 将光标置于表格的第6行第1列单元格中，输入文字“相关页面：”，如图9-31所示。
图9-31 输入文字
02 将光标置于第6行第2列单元格中，执行“插入”|“表单”|“URL”命令，如图9-32所示。
图9-32 插入URL
03 选中插入的URL，打开属性面板，在面板中进行相应的设置，如图9-33所示。
图9-33 设置URL的属性
★提示★
单击“表单”插入栏中的“URL”按钮
，也可以插入URL。
9.2.10 插入图像域
在Dreamweaver中，可以使用指定的图像作为按钮。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象上。创建图像按钮的具体操作步骤如下：
01 将光标置于表格的第7行第1列单元格中，输入文字，如图9-34所示。
图9-34 输入文字
02 将光标置于表格的第7行第2列单元格中，执行“插入”|“表单”|“日期”命令，插入日期域，如图9-35所示。
图9-35 插入日期域
03 将光标置于日期域的右边，执行“插入”“|表单”|“图像按钮”命令，弹出“选择图像源文件”对话框，选择图像源文件images/icon_04. gif，如图9-36所示。
图9-36 “选择图像源文件”对话框
04 单击“确定”按钮，插入图像按钮，如图9-37所示。
图9-37 插入图像按钮
05 选中插入的图像按钮，打开“属性”面板，在面板中设置相关属性，如图9-38所示。
图9-38 设置图像按钮的属性
9.2.11 插入文件域
利用Dreamueawer可以创建文件域，文件域使浏览者可以选择其计算机上的文件，如处理文档或图像文件，并将该文件上传到服务器。文件域的外观与文本域类似，只是文件域还包含一个“浏览”按钮。浏览者可以手动输入要上传的文件的路径，也可以使用“浏览”按钮定位并选择该文件。具体操作步骤如下：
01 将光标置于表格的第8行第1列单元格中，输入文字“上传图片：”，如图9-39所示。
图9-39 输入文字
02 将光标置于第8行第2列单元格中，执行“插入”|“表单”|“文件”命令，插入文件域，如图9-40所示。
★提示★
单击“表单”插入栏中的“文件”按钮
，也可以插入文件域。
图9-40 插入文件域
03 选中插入的文件域，打开“属性”面板，在面板中进行相应的设置，如图9-41所示。
图9-41 文件域的属性面板
9.2.12 插入按钮
按钮控制表单操作，使用表单按钮，可以将输入表单的数据提交到服务器，或者重置该表单。
对表单而言，按钮是非常重要的，它能够控制对表单内容的操作，如“提交”或“重置”。要将表单内容发送到远端服务器上，使用“提交”按钮；要清除现有的表单内容，使用“重置”按钮。插入按钮的具体操作步骤如下：
01 将光标置于表格的第10行第2列单元格中，执行“插入”|“表单”|“提交按钮”命令，插入提交按钮，如图9-42所示。
★指点迷津★
单击“表单”插入栏中的“提交按钮”按钮
，也可以插入提交按钮。
图9-42 插入提交按钮
02 选中插入的提交按钮，打开“属性”面板，在面板中可以设置相关属性，如图9-43所示。
图9-43 设置提交按钮的属性
03 将光标置于提交按钮右边，执行“插入”“|表单”|“重置按钮”命令，插入重置按钮，并在“属性”面板中设置相关属性，如图9-44所示。
图9-44 插入重置按钮
04 保存文档，完成表单对象的制作。
★指点迷津★
单击“表单”插入栏中的“重置按钮”按钮
，也可以插入重置按钮。