复旦大学精品课程《计算机网络与网页制作》课件,构建网页表单课件复习资料

1、计算机网络与网页制作Chapter 16：构建网页表单复旦大学计算机学院肖川1目标创建表单添加多种表单元素用CSS设定表单样式验证表单2效果31. 插入一个空的HTML表单1) 定位光标，菜单 插入表单表单2) 定位光标，面板 插入表单表单“属性”面板4把文本内容移至表单内选中内容，Ctrl+X，Ctrl+V52. 添加文本字段控件定位光标，菜单 插入表单文本域页面上已经有文字“姓名”，故此处选择“无标签标记”。6设置文本域属性选中文本域，“属性”面板。把光标定位于文本框内，“属性”面板指定该文本域适用的类CSS规则。ID属性。若有同名的ID CSS规则，将作用于此文本域。name属性。不是I

2、D属性。7插入更多的文本域区分name属性与ID属性。83. 添加复选框控件定位光标，菜单 插入表单复选框。手工删除页面上已经有文字“产品价目表”，在此处设置该文字。9设置复选框的属性勾选时所代表的值id 属性与name属性的用途不同。10插入更多的复选框114. 添加单选按钮组控件定位光标，菜单 插入表单单选按钮组。每个单选按钮具有相同的名称。单选按钮的id根据此名称自动生成，但是互不相同。12设置每个单选按钮的属性注意自动生成的ID属性值135. 添加列表框控件定位光标，菜单 插入表单选择(列表/菜单)。14修改列表框的属性列表框中可见的条目数，当条目数超过此数时，列表框自动出现垂直滚动条

3、。列表框的高度足以显示 4 4 项条目。156. 添加文本区域控件定位光标，菜单 插入表单文本区域。16设置文本区域的属性177. 添加文件域控件定位光标，菜单 插入表单文件域。18设置文件域的属性198. 添加提交按钮控件20设置按钮控件的属性21插入更多的按钮22239. 附加外部样式表因为标签CSS规则“input”设定了背景色的缘故。2410. 修改表单域的背景色在“CSS样式”面板内修改“input”规则的“background-color”属性值。2511. 设定表单元素的样式单击页面元素，在“属性”面板中从“类”下拉列表选择值，则把已有的类CSS规则作用于所选中的表单元素。为这个

4、段落指定名为“labels”的类CSS规则。2612. 添加行为页面的JavaScript代码也称为“行为”，是通过“标签检查器”面板添加的。选中表单内控件(如按钮)，单击“标签检查器”面板内“行为”按钮。已选中“验证”按钮27为行为指定触发事件单击“验证”按钮弹出的消息框2813. 验证表单域选中按钮，在“标签检查器”面板内 添加行为“检查表单”。添加的“检查表单”行为默认的触发事件是onClick。29告知用户“地址”文本框未输入内容。3014. 改变表单域的行为顺序在“行为”面板中你可以改变同一表单控件的多个行为的发生顺序。选中表单控件，在“标签检查器”面板内调整行为的发生顺序。3115. 把行为指派至不同的页面元素先删除“验证”按钮的“检查表单”行为，再为“发送”按钮添加“检查表单”行为。3216. 添加“交换图像”行为定位光标，菜单 插入图像，选择蓝色的欢迎图片。选中图片，在“标签检查器”面板内添加行为“交换图像”，设定原始档为红色的欢迎图片。插入蓝色图片时未指定其I