网页设计与制作项目11表单

处理工作。在表单中插入按钮的步骤如下：
步骤1 将光标置于要添加表单按钮的位置。执行 【插入】|【表单】|【按钮】菜单命令，即可插入按钮 。
步骤2 选中插入的按钮，在【按钮】属性面板中， 可以设置表单按钮的属性 。
11.3.2
创建表单
7．插入列表和下拉菜单 列表和下拉菜单可以让用户在同一位置上进 行多项选择，列表提供滚动条，用户可以选择一 项内容，也可选择多项内容 。
11.2 网页制作
步骤4 将光标定位在表单中，执行【插入】 ︱【表格】菜单命令，弹出【表格】对话框，单 击“确定”按钮插入表格，对表单进行布局。 。 步骤5 合并单元格，并在表格中输入相应 文本、图片并设置CSS样式 。
11.2 网页制作
11.2.2 插入文本框 步骤1 将光标定位于表单第1行第2列处，执行【插 入】|【表单】|【文本域】菜单命令，弹出【输入标签辅 助功能属性】对话框，单击“确定”按钮，即可插入文本 域 。 步骤2 选中所插入的文本域，在【文本域】属性面 板中，将类型设置为“单行”，其他参数使用默认值即 可。 步骤3 分别在表单的7、9、13行的第2列处插入相 同的文本域 。
谢 谢！
11.3.2
创建表单
（2）跳转菜单
跳转菜单是表单中的弹出菜单，对站点访问
者可见，并列出链接到文档或文件的选项。
可以创建到整个Web站点内文档的链接、到其 他Web站点上文档的链接、电子邮件链接、到图形 的链接，也可以创建到可在浏览器中打开的任何 文件类型的链接。
11.3.2
创建表单
添加跳转菜单的步骤如下：
11.3.2
创建表单
8．插入表单其他对象 （1）隐藏域 隐藏域对于网页浏览者是看不到的，在浏览 器中不能够显示，主要用于实现浏览器同服务器 在后台隐藏地交换信息。添加隐藏域的步骤如下： 步骤1 将光标置于要添加隐藏域的位置。执 行【插入】|【表单】|【隐藏域】菜单命令。 步骤2 选中隐藏域，在【隐藏域】属性面板 设置隐藏域属性。
11.3.2
创建表单
2．插入文本域 步骤1 将光标置于要添加文本域的位置，执 行【插入】|【表单】|【文本域】菜单命令，弹 出【输入标签辅助功能属性】对话框。 步骤2 选择默认值，单击“确定”按钮，可 添加文本域 。 步骤3 选择文本域，在【文本域】属性面板 中，设置参数。
11.3.2
创建表单
3．插入文件域 文件域可以实现文件上传的功能，用户可以从本地磁 盘中选择文件，通过表单的文件域上传。文件域由文本框 和浏览按钮构成，用户可以在文本框中直接输入要上传文 件的地址，也可通过点击浏览按钮选择要上传的文件。插 入文件域的步骤如下： 步骤1 将光标置于要插入文件域的位置。执行【插 入】|【表单】|【文件域】菜单命令即可插入文件域。 步骤2 选择文件域，在【文件域】属性面板中设置 文件域的属性。
将光标置于要添加跳转菜单的位置。执行
【插入】|【表单】|【跳转菜单】菜单命令，在
弹出的【插入跳转菜单】对话框中，单击“确定”
按钮，即可插入跳转菜单。
11.4 总结提升
表单是动态信息交换的灵魂，主要用于采集用户 信息，并完成数据在客户端与服务器端传输，表单是 客户与服务器之间实现沟通的桥梁。如果要实现表单 的数据传输功能，还需要服务器的配合才行。 本章以“乐途网”为例，介绍了表单创建方法， 包括表单的创建以及表单元素的创建等内容；通过本 章的学习，读者可以学会如何创建表单，并在表单中 插入文本框、文本域、下拉列表、单选按钮、单选按 钮组等表单元素。
单击“餐厅预订” 右侧“会员注册”超级 链接，显示“会员注册” 页面内容，在此页面中 使用了文本框、密码域、 复选框、文本域和提交、 重置按钮等表单元素， 网页效果如右图所示。
“会员注册”页面效果
11.2 网页制作
11.2.1 在“会员注册”页面插入表单 步骤1 启动Dreamweaver CS6，在“乐途网”站点 中，执行【文件】|【新建】命令，打开【新建文档】对 话框并新建网页yhzc.html。 步骤2 选择【插入】面板中【常用】︱【表格】选 项，绘制表格布局页面，并输入文本、页面顶部Logo等， 并在表格的空白单元格中定位光标 。 步骤3 执行【插入】︱【表单】︱【表单】菜单命 令，在光标所在的单格处显示一个红色虚线方框，即为表 单 。
11.2 网页制作
步骤3 在弹出的【列表值】对话框中输入 “项目标签”分别为：计算机平面设计、电子
商务、动漫游戏 。 步骤4 单击“确定”按钮。
11.2 网页制作
11.2.6 插入复选框 步骤1 将光标定位于表单19行2列“音乐”文本 后，执行【插入】|【表单】|【复选框】命令，弹出【输 入标签辅助功能属性】对话框，单击“确定”按钮，即可 插入复选框。 步骤2 选中所插入的复选框，在【复选框】属性 面板中，将初始状态设置为“未选中”。 步骤3 将光标定位于表单第15行第2列“体育”、 “跳舞”文本之后，插入相同的复选框，将初始状态设置 为“未选中”。
11.3.2
创建表单
（2）插入复选框
步骤1
将光标置于要插入复选框的位置。
执行【插入】|【表单】|【复选框】菜单命令，
即可插入复选框 。
步骤2 点击复选框，在【复选框】属性
面板中设置复选框属性。
11.3.2
创建表单
5．插入单选按钮组和复选框组
使用单选按钮组选项和复选按钮组选项也可 以添加单选按钮和复选框，使用单选按钮组和复 选按钮组添加更加方便快捷。 （1）添加单选按钮组的方法 将光标置于要插入单选按钮组的位置。执行 【插入】|【表单】|【单选按钮组】菜单命令， 在弹出的对话框中添加单选按钮组的各个参数， 单击“确定”按钮，即可插入单选按钮组。
项目11
实现交互功能——表单的应用
知识要点
1 2 3
认识表单及表单元素
掌握创建表单及表单元素的方法
掌握表单元素属性的设置
11.1 网页展示：在“餐饮美食”页面中使用表单
在“乐途网”的 “餐饮美食”栏目中 创建表单，效果图右 图所示 。
“餐饮美食”网页效果
11.1 网页展示：在“餐饮美食”页面中使用表 单
11.2 网页制作
11.2.7 步骤1 插入文本区域 将光标定位于表单第20行，执行
【插入】|【表单】|【文本区域】命令，弹出
【输入标签辅助功能属性】对话框，单击“确
定”按钮，插入文本区域。 步骤2 选中所插入的文本区域，在【文 本域】属性面板中设置参数 。
11.2 网页制作
11.2.8 插入提交按钮 步骤1 将光标定位于表单23行，执行【插 入】|【表单】|【按钮】命令，弹出【输入标签 辅助功能属性】对话框，单击“确定”按钮，插 入按钮。 步骤2 选中所插入的按钮，在“按钮”属 性面板中，将动作设置为“提交表单”，将值设 置为“同意以上条款，提交注册信息” 。 步骤3 单击【文档】∣【在浏览器中浏览】 按钮，预览最终效果。
器对表单的信息进行处理，并将处理的结果
生成HTML文件然后传递给用户。 总之，表单是网站的主要构成部分，几乎在 各个网站上都能够看到表单的存在。 表单主要有三部分构成：表单标签、表
单域、表单按钮。
11.3.2
创建表单
1．创建表单 在插入表单元素之前，首先要创建表单，步 骤如下。 步骤1 将光标置于要插入表单的位置，执行 【插入】|【表单】|【表单】菜单命令，创建表 单。在Dreamweaver CS6编辑窗口即显示表单，为 红色虚线框。 步骤2 选择表单，在【表单】属性面板中设 置表单的属性。
11.3.2
创建表单
（2）添加复选框按钮组的方法
将光标置于要插入复选框组的位置。执行
【插入】|【表单】|【复选框组】菜单命令，
在弹出的对话框中添加复选框组的各个参数，
即可插入复选框。
11.3.2
创建表单
6．插入按钮 表单中的按钮主要包括提交按钮、重置按钮和普通按钮， 提交按钮用于提交表单的内容，重置按钮用于重新填写表 单内容，普通 按钮 可以用来控制其他定义了处理脚本的
（1）插入列表/菜单 步骤1 将光标置于要添加列表和下拉菜单的 位置。执行【插入】|【表单】|【列表/菜单】菜 单命令，默认状态为插入一个下拉菜单 。
11.3.2
创建表单
步骤2 选中插入的下拉菜单，在【列表/菜 单】属性面板中选择【菜单】类型，并单击“列 表值”按钮 。 步骤3 在弹出的【列表值】对话框中输入 【项目标签】 。 步骤4 单击“确定”按钮，预览最终效果。
11.3.2
创建表单
4．插入单选按钮和复选框 在表单中，如果用户在几个选项中选择其中一个 选项的时候，可以使用单选按钮；如果要选择多个选 项的时候，可以使用复选框。 （1）添加单选按钮 步骤1 将光标置于要插入单选按钮的位置。执 行【插入】|【表单】|【单选按钮】菜单命令，即可 插入单选按钮。 步骤2 点击单选按钮，在【单选按钮】属性面 板中设置单选按钮属性。
11.2 网页制作
11.2.5 插入列表菜单 步骤1 将光标定位于表单17行2列，执 行【插入】|【表单】|【列表/菜单】命令， 弹出【输入标签辅助功能属性】对话框，单击 “确定”按钮，即可插入下拉菜单。 步骤2 选中所插入的下拉菜单，在【列 表/菜单】属性面板中选择“菜单”类型，并 单击“列表值”按钮。
11.2 网页制作
11.2.3 插入密码域 步骤1 将光标定位于表单3行2列处，执 行【插入】|【表单】|【文本域】命令，弹出 【输入标签辅助功能属性】对话框，单击“确 定”按钮，插入一个文本域。 步骤2 选中所插入的文本域，在【文本 域】属性面板中，将类型设置为“密码”，其 他参数使用默认值，即可插入一个密码域。 步骤3 在表单5行2列处，插入相同的密 码域。
11.2 网页制作
11.2.4 插入单选框 步骤1 将光标定位于表单15行2列“男” 文本之后，执行【插入】|【表单】|【单选框】 命令，弹出【输入标签辅助功能属性】对话框， 单击“确定”按钮，即可插入单选框。 步骤2 选中所插入的单选框，在【单选框】 属性面板中，将初始状态设置为“已勾选”。 步骤3 将光标定位于表单第15行第2列 “女”文本之后，插入相同的单选框，将初始 状态设置为“未选中”。
源自文库
11.3 知识链接
表单是Internet用户同服务器进行信息交 流的重要工具，是实现交互式网络浏览方式的
重要手段，表单负责采集数据的功能。利用表
单可以实现网上搜索、网上调查、信息反馈、 留言本、用户注册及登录的功能 。
11.3.1
表单简介
用户在表单的表单域中输入信息，通过
提交操作将表单的信息提交给服务器，服务