第4章 表单　课件

学习目标 理解表单的含义，能够插入表单域制作表单 能够插入和设置各种表单元素 能够在表格布局中添加表单元素 4.1 第4章　表单 4.1 案例制作：个人信息调查表 4.2 新知解析 4.3 实战演练：网络写作注册信息表 本章内容 4.1 第4章　表单 4.1 案例制作：个人信息调查表 最终效果如图所示。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 1）新建文件夹biaodan, 利用站点对象设置向导新建站点，将站点文件夹定义为biaodan。新建网页，保存为diaochabiao.html。 2）在“插入”面板“表单”选项下单击“表单”按钮 ，在文档窗口中将出现一个红色虚线框，光标处于表单域中。单击菜单命令“插入”→“表格”，设表格为9行1列、宽400像素，边框粗细为1，其余参数为0，单击“确定”按钮。在属性面板中设“Align”为居中对齐。选中所有单元格，在属性面板中设“高”为30，“垂直”为居中，颜色为#eeeeee。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 3）在单元格中输入相应的文字信息，选中第1行文字，在CSS属性面板中，设字体为黑体，字号大小为16，文字颜色为黑色，在HTML属性面板中单击 加粗字体，设单元格“水平”为居中对齐。选中其他几个单元格，在CSS属性面板中，设字体为黑体，字号大小为12，文字颜色为黑色。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 4）光标移到表格第2行的文字右侧，单击“插入”面板“表单”选项下的“文本”按钮 插入文本域，将文本域前面的英文提示字符删除。选中该文本域，在属性面板中设文本域名称为name，勾选“Required”，在“Place Holder”中输入“请输入手机号码或邮箱”，使得该文本域必须填写，且空白显示时出现提示文字，按F12在浏览器中观察效果。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 5）光标移到第3行文字右侧，单击“插入”面板“表单”选项下的单选按钮组按钮 。在弹出的对话框中进行设定。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选按钮则排列成一行。选中单选按钮及文字，在CSS属性面板中，设字体为黑体，字号大小为12，文字颜色为黑色。此时单元格的高度可能发生变化，将光标放在第3行单元格内，在属性面板中设单元格的“高”为30，即可恢复原先的高度。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 6）将光标移到表格第4行“年”前面，单击“插入”面板“表单”选项下的“选择”按钮 ，将列表域前面的英文提示字符删除。选中该列表域，在属性面板中设列表名称是“year”，单击“列表值”按钮，在“列表值”对话框中添加“项目标签”和“值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后单击“确定”按钮。在“Selected”中指定初始值为第1行空白值，属性面板如图所示。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 7）同样的操作，在“月”前面插入列表域，删除提示字符，在属性面板中设列表域名称是“month”，单击“列表值”按钮，设“列表值”的数值为0～12，单击“确定”按钮，在“Selected”中指定初始值为第1行空白值。 8）同样的操作，在“日”前面插入列表域，删除提示字符，在属性面板中设列表域名称是“day”，单击“列表值”按钮，设“列表值”的数值为0～31，单击“确定”按钮，在“Selected”中指定初始值为第1行空白值。 9）光标移到表格第5行的文字右侧，单击“插入”面板“表单”选项下的“密码”按钮 插入密码域，将密码域前面的英文提示字符删除。选中该密码域，在属性面板中设密码域名称为pw，勾选“Required”，在“Place Holder”中输入“请输入8位密码”。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 10）在第6 行的付费渠道项目内容中分别单击“插入”面板“表单”选项下的“复选框”按钮 插入复选框，将复选框后面的英文提示字符删除。选中复选框，在属性面板的“value” 文本框中键入“网上支付”。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 10）同样的操作，在其他支付项目前面插入复选框，删除提示文字，选中复选框，在属性面板的“value”内容为支付项目名称。 调整5个复选框项目的布局方式，可根据需要加入空格和按回车键另起一行，调整后按F12观看画面效果如图所示。 4.1 第4章　表单 4.1 案例制作：个人信息调查表 11）光标移到表格第7行的文字右侧，单击“插入”面板“表单”选项下的“文本”按钮 插入文本域，将文本域前面的英文提示字符删除。选中该文本域，在属性面板中设文本域名称为“Email”，勾选“Required”。 12）光标