创建表单网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教学提示和教学目标
❖ 教学提示：表单主要用来收集用户的反馈信息，如进行会员注册、网上调 查、信息反馈等，然后将这些信息提交给服务器进行处理。表单是网站管 理者与浏览者之间沟通的桥梁，网站管理者依此可以作出科学合理的决策， 是一个网站成功的重要因素。表单可以包含允许用户进行交互的各种对象， 可以使用Dreamweaver 8创建文本域、密码域、单选按钮、复选框、按钮 以及其他表单对象。
10.2.1 创建表单 ❖ 使用表单必须具备两个条件：一个是建立含有表单元素的网页文档，另一个是具备 服务器端的表单处理应用程序或者客户端的脚本程序，它能够处理用户输入到表单 的信息。 ❖ 表单的【属性】面板中可以设置以下属性。
【表单名称】：在文本框中输入标识该表单的唯一名称。 【动作】：指定处理该表单的动态页或脚本的路径。可以在【动作】文本框中
10.2 插入表单对象
❖ 在 Dreamweaver 8中有专门的【表单】插入栏，在【表单】插入栏中共 有十四个表单对象，使用这些对象可以建立各式各样的表单，如图10.1 所示。
❖ 10.2.1 创建表单 ❖ 10.2.2 插入单行文本域 ❖ 10.2.3 插入多行文本域 ❖ 10.2.4 插入密码域 ❖ 10.2.5 插入复选框 ❖ 10.2.6 插入单选按钮 ❖ 10.2.7 插入列表和菜单 ❖ 10.2.8 插入表单按钮
直接输入路径，也可以单击按钮定位应用程序。 【方法】：选择将表单数据传输到服务器的传送方式，包括三个选项。 POST：用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输
入的方式读取表单内的数据。 GET：将表单内的数据附加到URL后传送给服务器，服务器以读取环境变量的
方式读取表单内的数据。 默认：用浏览器默认的方式，一般默认为GET。 【目标】：使用【目标】下拉列表指定一个窗口，这个窗口中显示应用程序或
者脚本程序，将表单处理完成后的结果。 【MIME类型】：设置类型。
提示
如果看不到插入在文档窗口中的标记表单域的红色虚线，可以选择【查看】|【 可视 化助理】|【不可见元素】命令，使标记表单域的红色虚线可见。
10.2.2 插入单行文本域 ❖ 文本域能接受任何类型的字母、数字输入。文本可以单行或多行显示，也能以密码 域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观 者看到。 ❖ 在文本域【属性】面板中可以进行如下设置。
编码限制为6位数，将密码限制为10个字符等。如果将【最多字符数】文本框保留为空白， 则用户可以输入任意数量的文本，如果文本超过域的字符宽度，文本将滚动显示，如果 用户输入超过最大字符数，则表单提出警告。 【行数】：设置多行文本域的行数。 【单行】：选择【单行】将产生一个type属性设置为text的input标签。【字符宽度】设置 映射为size属性，【最多字符数】设置映射为maxlength属性。 【密码】：选择【密码】将产生一个type属性设置为password的input标签。【字符宽度】 和【最多字符数】设置映射的属性与在单行文本域中的属性相同。当用户在密码文本域 中输入内容时，输入内容显示为项目符号或星号，以保护它不被其他人看到。 【多行】：选择【多行】将产生一个textarea标签。 【初始值】：指定在首次载入表单时文本域中显示的值，例如，通过包含说明或示例值， 可以提示用户在域中输入信息。
览器中显示的表单中，通过提交按钮将这些信息发送到服 务器，服务器端脚本或应用程序对这些信息进行处理后， 将请求信息或基于该表单内容执行一些操作来回复浏览者 (或客户端)。用于处理表单数据的常用服务器端技术包括 Active Server Pages(ASP)和PHP等。 ❖ 使用Dreamweaver可以向表单中添加对象，还可以通过 使用行为来验证用户输入信息的正确性。
10.2.5 插入复选框
❖ 复选框允许在一组选项中选择多个选 项，插入复选框的具体操作步骤如下。
(1) 将鼠标指针置于第4行第1列单元 格中，输入文字“经营范围：”，在 第 2列单元格中，选择【插入】|【表 单】|【复选框】命令，插入复选框。
10.2.4 插入密码域
❖ 插入密码域同文本域类似，密码域只不过把【类型】设置为【密码】，具 体操作步骤如下。
(1) 将鼠标指针置于第3行第1列单元格中，输入文字“密码:”，将鼠标指针置于 第3行第2列单元格中，选择【插入】|【表单】|【密码域】命令。
(2) 在【属性】面板中将【字符宽度】设置为15，【类型】设置为【密码】即可， 如图10.5所示。
❖ 教学目标： 掌握插入表单 掌握插入文本域 掌握插入隐藏域 掌握插入单选按钮 掌握插入复选框 掌握插入列表和菜单 掌握插入跳转菜单 掌握插入按钮 掌握制作网上报名页面
❖ 表单增加了网1页0的.交1互性初，还识可以表用来单收集浏览者的信息。 浏览者可以使用诸如文本域、列表框、复选框以及单选按 钮之类的表单对象输入信息，然后单击某个按钮向网站提 交这些信息。网页上的表单一般包括两个部分：表单对象 和应用程序。 ❖ 表单处理信息的过程大致为：浏览者将信息输入到Web浏
❖ 插入多1行0文.本2域.同3单行插文本入多行文本域 域类似，只不过多行文本域 允许输入更多的文本，插入 多行文本域的具体操作步骤 如下。 (1) 将鼠标指针置于表格的第2 行第1列单元格中，输入文字 “订货内容：”，将鼠标指针 置于第2列单元格中，选择 【插入】|【表单】|【文本区 域】命令，插入文本区域。 (2) 在【属性】面板中将【字 符宽度】设置为40，【行数】 设置为5，【类型】设置为 【多行】，如图10.4所示。
【文本域】：在文本框中为该文本域指定一个名称。每个文本域都必须有一个唯一名称， 文本域名称不能包含空格或特殊字符，可以使用字母、数字、字符或百度文库划线的任意组合， 所选名称最好与用户输入的信息要有所联系。
【字符宽度】：设置文本域一次最多可显示的字符数。 【最多字符数】：设置单行文本域中最多可输入的字符数，使用【最多字符数】将邮政
❖ 教学提示：表单主要用来收集用户的反馈信息，如进行会员注册、网上调 查、信息反馈等，然后将这些信息提交给服务器进行处理。表单是网站管 理者与浏览者之间沟通的桥梁，网站管理者依此可以作出科学合理的决策， 是一个网站成功的重要因素。表单可以包含允许用户进行交互的各种对象， 可以使用Dreamweaver 8创建文本域、密码域、单选按钮、复选框、按钮 以及其他表单对象。
10.2.1 创建表单 ❖ 使用表单必须具备两个条件：一个是建立含有表单元素的网页文档，另一个是具备 服务器端的表单处理应用程序或者客户端的脚本程序，它能够处理用户输入到表单 的信息。 ❖ 表单的【属性】面板中可以设置以下属性。
【表单名称】：在文本框中输入标识该表单的唯一名称。 【动作】：指定处理该表单的动态页或脚本的路径。可以在【动作】文本框中
10.2 插入表单对象
❖ 在 Dreamweaver 8中有专门的【表单】插入栏，在【表单】插入栏中共 有十四个表单对象，使用这些对象可以建立各式各样的表单，如图10.1 所示。
❖ 10.2.1 创建表单 ❖ 10.2.2 插入单行文本域 ❖ 10.2.3 插入多行文本域 ❖ 10.2.4 插入密码域 ❖ 10.2.5 插入复选框 ❖ 10.2.6 插入单选按钮 ❖ 10.2.7 插入列表和菜单 ❖ 10.2.8 插入表单按钮
直接输入路径，也可以单击按钮定位应用程序。 【方法】：选择将表单数据传输到服务器的传送方式，包括三个选项。 POST：用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输
入的方式读取表单内的数据。 GET：将表单内的数据附加到URL后传送给服务器，服务器以读取环境变量的
方式读取表单内的数据。 默认：用浏览器默认的方式，一般默认为GET。 【目标】：使用【目标】下拉列表指定一个窗口，这个窗口中显示应用程序或
者脚本程序，将表单处理完成后的结果。 【MIME类型】：设置类型。
提示
如果看不到插入在文档窗口中的标记表单域的红色虚线，可以选择【查看】|【 可视 化助理】|【不可见元素】命令，使标记表单域的红色虚线可见。
10.2.2 插入单行文本域 ❖ 文本域能接受任何类型的字母、数字输入。文本可以单行或多行显示，也能以密码 域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观 者看到。 ❖ 在文本域【属性】面板中可以进行如下设置。
编码限制为6位数，将密码限制为10个字符等。如果将【最多字符数】文本框保留为空白， 则用户可以输入任意数量的文本，如果文本超过域的字符宽度，文本将滚动显示，如果 用户输入超过最大字符数，则表单提出警告。 【行数】：设置多行文本域的行数。 【单行】：选择【单行】将产生一个type属性设置为text的input标签。【字符宽度】设置 映射为size属性，【最多字符数】设置映射为maxlength属性。 【密码】：选择【密码】将产生一个type属性设置为password的input标签。【字符宽度】 和【最多字符数】设置映射的属性与在单行文本域中的属性相同。当用户在密码文本域 中输入内容时，输入内容显示为项目符号或星号，以保护它不被其他人看到。 【多行】：选择【多行】将产生一个textarea标签。 【初始值】：指定在首次载入表单时文本域中显示的值，例如，通过包含说明或示例值， 可以提示用户在域中输入信息。
览器中显示的表单中，通过提交按钮将这些信息发送到服 务器，服务器端脚本或应用程序对这些信息进行处理后， 将请求信息或基于该表单内容执行一些操作来回复浏览者 (或客户端)。用于处理表单数据的常用服务器端技术包括 Active Server Pages(ASP)和PHP等。 ❖ 使用Dreamweaver可以向表单中添加对象，还可以通过 使用行为来验证用户输入信息的正确性。
10.2.5 插入复选框
❖ 复选框允许在一组选项中选择多个选 项，插入复选框的具体操作步骤如下。
(1) 将鼠标指针置于第4行第1列单元 格中，输入文字“经营范围：”，在 第 2列单元格中，选择【插入】|【表 单】|【复选框】命令，插入复选框。
10.2.4 插入密码域
❖ 插入密码域同文本域类似，密码域只不过把【类型】设置为【密码】，具 体操作步骤如下。
(1) 将鼠标指针置于第3行第1列单元格中，输入文字“密码:”，将鼠标指针置于 第3行第2列单元格中，选择【插入】|【表单】|【密码域】命令。
(2) 在【属性】面板中将【字符宽度】设置为15，【类型】设置为【密码】即可， 如图10.5所示。
❖ 教学目标： 掌握插入表单 掌握插入文本域 掌握插入隐藏域 掌握插入单选按钮 掌握插入复选框 掌握插入列表和菜单 掌握插入跳转菜单 掌握插入按钮 掌握制作网上报名页面
❖ 表单增加了网1页0的.交1互性初，还识可以表用来单收集浏览者的信息。 浏览者可以使用诸如文本域、列表框、复选框以及单选按 钮之类的表单对象输入信息，然后单击某个按钮向网站提 交这些信息。网页上的表单一般包括两个部分：表单对象 和应用程序。 ❖ 表单处理信息的过程大致为：浏览者将信息输入到Web浏
❖ 插入多1行0文.本2域.同3单行插文本入多行文本域 域类似，只不过多行文本域 允许输入更多的文本，插入 多行文本域的具体操作步骤 如下。 (1) 将鼠标指针置于表格的第2 行第1列单元格中，输入文字 “订货内容：”，将鼠标指针 置于第2列单元格中，选择 【插入】|【表单】|【文本区 域】命令，插入文本区域。 (2) 在【属性】面板中将【字 符宽度】设置为40，【行数】 设置为5，【类型】设置为 【多行】，如图10.4所示。
【文本域】：在文本框中为该文本域指定一个名称。每个文本域都必须有一个唯一名称， 文本域名称不能包含空格或特殊字符，可以使用字母、数字、字符或百度文库划线的任意组合， 所选名称最好与用户输入的信息要有所联系。
【字符宽度】：设置文本域一次最多可显示的字符数。 【最多字符数】：设置单行文本域中最多可输入的字符数，使用【最多字符数】将邮政