实验七 制作表单睛字组词
【实验目的】
1. 熟练掌握网页中表单的制作方法。
2. 熟练掌握Dreamweaver CS6用户注册表单网页的制作。
3. 熟练掌握添加行为检查表单。
【实验环境碧之轨迹终章攻略】
1.工具软件:Dreamweaver CS6
2.制作如图7-1所示的“用户注册”表单网页。
图7-1
【 实验内容 】
1.练习表单的制作。
2.制作如图所示的“用户注册”表单网页。
3. 练习检查表单操作。
【实验步骤】
1.创建本地站点。
2.1 创建表单
(1)新建一个网页,将光标定位在希望表单出现的位置上。
(2)执行【插入】->【表单】->【表单】命令,或选择“插入”栏上的“表单”类别,然后单击“表单”按钮。
(3)这时文档中将插入一个空的表单,如图7-2所示。在“设计”视图中,红的虚轮廓线表示表单。
注意:如果没有看到红的虚轮廓线,请检查是否选中了【查看】->【可视化助理】->【不可见元素】选项。
图7-2 红的虚轮廓线表示表单
(4)选定上面的表单,显示表单属性面板,如图7-3所示。
图7-3表单属性面板
表单属性:
• 表单名称:标识该表单的惟一名称。命名表单后,就可以使用脚本语言(如JavaScript 或VBScript)引用或控制该表单。
• 动作:指定处理该表单的动态网页或脚本的路径(如asp/asp、php、jsp等)。可以在“动作”文本框中键入完整路径,也可以单击文件夹图标以选择一个动态网页或脚本。
• 方法:选择将表单数据传输到服务器的方法,POST方法将在HTTP请求中嵌入表单数据;GET方法是将值附加到请求该页面的URL中;默认方法是使用浏览器的默认设置将表单数据发送到服务器。
• MIME类型:指定对提交给服务器进行处理的数据使用MIME编码类型,默认设置为 “application/x-www-form-urlencode”通常与POST方法协调使用。如果要创建文件上传域,需指定“multipart/form-data MIME”类型。
• 目标:设置提交表单后的目标浏览器。
2.2 插入文本字段
文本域可以接受任何类型的输入内容。文本可以单行或多行显示,也可以以密码域的方式显示。
高考鼓励祝福语插入文本字段步骤如下:
(1)定位光标在表单中,在表单中插入表格,并填充内容,如图7-4所示。
图7-4 在表单中插入表格
(2)将光标定位在“用户名”右边的单元格中,执行【插入】->【表单】->【文本域】命令,或选择“插入”栏上的“表单”类别,然后单击“文本字段”图标,显示“输入标签辅助功能属性”对话框,如图7-5所示。
图7-5 “输入标签辅助功能属性”对话框
(3)若以后不想在插入表单元素时显示“输入标签辅助功能属性”对话框,单击对话框下面的链接文字“请更改‘辅助功能’首选参数”,显示“首选参数”对话框,如图7-6所示,取消“表单对象选项”。
图7-6 取消“表单对象选项”
(4)单击“确定”按钮,保持“输入标签辅助功能属性”对话框中的值不变,单击“确定”按钮,文本字段被插入文档中,如图7-7所示。
图7-7文本字段被插入文档中
(5)选择该文本域,显示文本域属性面板,如图7-8所示。
图7-8 文本域属性面板
文本域属性:
• 文本域:指定该文本域惟一的名称。
• 字符宽度:设置文本域中最多可显示的字符数。
• 最多字符数:设置单行文本域中最多可输入的字符数。
• 换行:选中了“多行”选项,指定当用户输入的信息较多时如何换行显示。
• 类型:指定文本域为单行、多行还是密码域。
• 初始值:指定在载入表单时文本域中要显示的内容。
(6)为表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【文本字段】命令,插入一个文本字段。选中该文本字段,在属性面板中将“类型”由“单行”改为“密码”,则创建一个密码域。
(7)为表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【文本字段】命令,插入一个文本字段。选中该文本字段,在属性面板中将“类型”由“单行”改为“多行”,则创建一个多行文本域。此时文档中页面效果如图7-9所示。
图7-9 插入多行文本字段文档中页面效果
(8)保存,按快捷键F12预览,在文本字段中输入文字,效果如图7-10所示。
图7-10 预览并在文本字段中输入文字
赵国是现在的什么地方注意:要插入多行文本字段也可以直接执行【插入】->【表单】->【文本区域】命令,效果和插入多行文本字段一样。
2.3 插入单选按钮
使用单选按钮,只能在一组选项中选择一个选项,单选按钮通常成组出现,并且同一组中的所有单选按钮必须具有相同的名称。插入单选按钮步骤如下:
火车票退票时间规定(1)为刚才的表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【单选按钮】命令,插入一个单选按钮。
选中该单选按钮,属性面板如图7-11所示。
图7-11 单选按钮属性面板
单选按钮属性:
单选按钮:在文本框中,为该对象指定一个名称。
选定值:设置在该单选按钮被选中时发送给服务器的值。
初始状态:当在浏览器中载入表单时,该单选按钮是否被选中。
(2)选中该单选按钮,在属性面板中将“初始状态”由“未选中”改为“已选中”,并在该单选按钮右边输入文字说明。
(3)再插入一个单选按钮,并在该单选按钮右边输入文字说明,此时文档中页面效果如图7-12所示。
图7-12 插入单选按钮
2.4 插入单选按钮组
插入单选按钮可以一个一个地插入,也可以用插入单选按钮组的方法一次插入多个单选按钮。插入单选按钮组步骤如下:
(1)为刚才的表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【单选按钮组】命令,显示“单选按钮组”对话框,如图7-13所示。
图7-13 “单选按钮组”对话框
(2)在“单选按钮组”对话框中各个参数如下:
名称:指定该单选按钮组的名称。
单选按钮:在单选按钮组列表中,显示了创建的单选按钮组中各个单选按钮的“标签”和“值”对。单击加号“+”按钮向组添加一个单选按钮,单击向上或向下箭头重新排序这些按钮。
布局,使用:选择希望 Dreamweaver 对这些按钮进行布局时使用的格式,可以使用换行符或表格来设置这些按钮的布局。
在“单选按钮组”对话框中设置各选项如图7-14所示。
图7-14 在“单选按钮组”对话框中设置各选项
(3)单击“确定”按钮,此时文档中页面效果如图7-15所示。
图7-15 插入单选按钮组
(4)选中该行第一个单选按钮,在属性面板中将“初始状态”由“未选中”改为“已选中”。
2.5插入复选框
复选框可以让用户从一组选项中选择多个选项,每个复选框都是一个独立的元素,各自必须有一个惟一的名称。插入复选框步骤如下:
(1)为刚才的表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【复选框】命令,这样就插入了一个复选框。
(2)在该复选框右边输入文字说明。选中该复选框,设置复选框属性面板中的各项属性。
复选框属性:
复选框:在文本框中为该对象指定一个名称。
选定值:设置在该复选框被选中时发送给服务器的值。
初始状态:确定在浏览器中载入表单时,该复选框是否被选中。
(3)按照上面的方法再插入几个复选框,并输入必要的文字。此时文档中页面效果如图7-16所示。
图7-16 插入复选框
2.6 插入列表/菜单
列表/菜单在一个列表中显示选项值,用户可以从该列表中选择多个选项。插入列表/菜单步骤如下:
(1)为刚才的表格增加一行,并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中,然后执行【插入】->【表单】->【列表/菜单】命令,列表/菜单被插入文档中。
(2)选中该列表/菜单,在属性面板中单击“列表值”按钮。显示“列表值”对话框,如图7-17所示。
图7-17 “列表值”对话框
(3)在“列表值”对话框中,设置如图7-18所示的“项目标签-值”对
图7-18 编辑“项目标签-值”对
(4)单击“确定”按钮,选中列表/菜单,属性面板如图7-19所示。
图7-19 列表/菜单属性面板
列表/菜单属性:
列表/菜单:为该列表/菜单指定一个惟一的名称。
类型:指定为“菜单”选项,还是显示“列表”选项。
高度:设置“列表”类型要显示的项数。
选定范围:用户是否可以从“列表”类型列表中选择多个项。
列表值:打开一个对话框,可以在该对话框中向菜单中添加菜单项。笑傲江湖霍建华剧情
初始化选定:设置列表中默认选择的菜单项。
(5)此时文档中页面效果如图7-20所示。
图7-20 插入列表/菜单
(6)若在列表/菜单属性面板中选择“类型”为“列表”,如图7-21所示设置各个选项。
图7-21列表/菜单属性面板
2.7 插入文件域
文件域属性:
文件域名称:指定该文件域对象的名称。
字符宽度:指定该域最多可显示的字符数。
最多字符数:指定域中最多可容纳的字符数。
3. 保存,按快捷键F12预览,网页效果如图7-22所示,单击“浏览”按钮,会显示“选择文件”对话框。
图7-22 “选择文件”对话框
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论