办公自动化 Word 01 - 复旦大学精品课程.pptVIP

计算机网络与网页制作Chapter 16：构建网页表单 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1 目标 创建表单 添加多种表单元素 用CSS设定表单样式 验证表单 2 效果 3 1. 插入一个空的HTML表单 1) 定位光标，菜单 插入表单表单 2) 定位光标，面板 插入表单表单 “属性”面板 4 把文本内容移至表单内 选中内容，Ctrl+X，Ctrl+V 5 2. 添加文本字段控件 定位光标，菜单 插入表单文本域 页面上已经有文字“姓名”，故此处选择“无标签标记”。 6 设置文本域属性 选中文本域，“属性”面板。 把光标定位于文本框内，“属性”面板 指定该文本域适用的类CSS规则。 ID属性。若有同名的ID CSS规则，将作用于此文本域。 name属性。不是ID属性。 7 插入更多的文本域 区分name属性与ID属性。 8 3. 添加复选框控件 定位光标，菜单 插入表单复选框。 手工删除页面上已经有文字“产品价目表”，在此处设置该文字。 9 设置复选框的属性 勾选时所代表的值 id 属性与name 属性的用途不同。 10 插入更多的复选框 11 4. 添加单选按钮组控件 定位光标，菜单 插入表单单选按钮组。 每个单选按钮具有相同的名称。单选按钮的id根据此名称自动生成，但是互不相同。 12 设置每个单选按钮的属性 注意自动生成的ID属性值 13 5. 添加列表框控件 定位光标，菜单 插入表单选择(列表/菜单)。 14 修改列表框的属性 列表框中可见的条目数，当条目数超过此数时，列表框自动出现垂直滚动条。 列表框的高度足以显示 4 项条目。 15 6. 添加文本区域控件 定位光标，菜单 插入表单文本区域。 16 设置文本区域的属性 17 7. 添加文件域控件 定位光标，菜单 插入表单文件域。 18 设置文件域的属性 19 8. 添加提交按钮控件 20 设置按钮控件的属性 21 插入更多的按钮 22 23 9. 附加外部样式表 因为标签CSS规则“input”设定了背景色的缘故。 24 10. 修改表单域的背景色 在“CSS样式”面板内修改“input”规则的“background-color”属性值。 25 11. 设定表单元素的样式 单击页面元素，在“属性”面板中从“类”下拉列表选择值，则把已有的类CSS规则作用于所选中的表单元素。 为这个段落p指定名为“labels”的类CSS规则。 26 12. 添加行为 页面的JavaScript代码也称为“行为”，是通过“标签检查器”面板添加的。 选中表单内控件(如按钮)，单击“标签检查器”面板内“行为”按钮。 已选中“验证”按钮 27 为行为指定触发事件 单击“验证”按钮弹出的消息框 28 13. 验证表单域 选中按钮，在“标签检查器”面板内 添加行为“检查表单”。 添加的“检查表单”行为默认的触发事件是onClick。 29 告知用户“地址”文本框未输入内容。 30 14. 改变表单域的行为顺序 在“行为”面板中你可以改变同一表单控件的多个行为的发生顺序。 选中表单控件，在“标签检查器”面板内调整行为的发生顺序。 31 15. 把行为指派至不同的页面元素 先删除“验证”按钮的“检查表单”行为，再为“发送”按钮添加“检查表单”行为。 32 16. 添加“交换图像”行为 定位光标，菜单 插入图像，选择蓝色的欢迎图片。 选中图片，在“标签检查器”面板内添加行为“交换图像”，设定原始档为红色的欢迎图片。 插入蓝色图片时未指定其ID。 33 效果 鼠标移开时出现蓝色欢迎图片 鼠标移上时出现红色欢迎图片 34 小结 插入各种表单控件并设置其属性 设定表单控件的样式 为页面元素添加行为 35