表格与表单补充案例1

1、第六章 补充案例案例6-6 简单的用户登陆界面一、案例描述1、 考核知识点input控件 2、 练习目标Ø 熟悉表单的构成Ø 掌握<form>标记的用法Ø 理解<form>标记相关属性Ø 掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性3、 需求分析在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。4、 案例分析1) 最终

2、实现效果，如图6-11所示。图6-1 登陆界面2） 分析效果图，具体实现步骤如下：a) 定义表单域。b) 定义用于输入用户名的单行文本输入框。c) 定义密码输入框。d) 定义用于输入验证码的单行文本输入框。e) 定义登陆按钮。二、案例实现 图6-2 简单的登陆界面案例6-7 简单的交规考试答卷一、案例描述1、 考核知识点input控件2、 练习目标Ø 熟悉表单的构成Ø 掌握<form>标记的用法Ø 掌握input控件属性中单选框和复选框属性Ø 熟悉<label>标记的使用方法3、 需求分析浏览网页时，经常会看到带有小图标的列表项，

3、这些小图标不仅可以美化网页，还能提供更好的用户体验。虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。4、 案例分析1) 最终实现效果，如图6-13所示。图6-3 交规考试答卷效果2） 分析效果图，具体实现步骤如下：a) 定义一个名为“交通考试选择题”的<h3>标题。b) 定义表单域c) 使用<p>标记定义单选题的题干。d) 使用<input>标记的单选按钮属性定义选项。e) 使用<p>标记定义多选题的题干。f) 使用<input>

4、标记的复选框属性定义选项。二、案例实现案例6-8 制作字符批量替换工具界面一、案例描述1、 考核知识点 <textarea>控件2、 练习目标Ø 掌握<textarea>控件的使用方法Ø 掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性3、 需求分析当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的<textarea></textarea>控件，来创建多行文本输入框。 为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的案例做具体演示。4、 案例分析1) 最终

5、实现效果，如图6-15所示。图6-4 字符批量替换工具界面效果2） 分析效果图，具体实现步骤如下：a) 定义表单域。b) 通过<p>标记定义标注文本“查找”。c) 通过<textarea>控件定义多行文本框。d) 通过<p>标记定义标注文本“替换为”。e) 通过<textarea>控件定义第二个多行文本框。f) 使用<input>标记的复选框属性定义三个复选框。g) 定义提交按钮、重置按钮和普通按钮。二、案例实现新建HTML页面，代码如下：案例6-9 制作简单的游戏选区界面一、案例描述 1、 考核知识点<select>控件

6、 2、 练习目标Ø 掌握<select>控件的使用方法Ø 掌握下拉菜单分组选项的制作方法Ø 掌握input控件属性中的按钮属性3、 需求分析在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的案例，对下拉菜单的用法做具体演示。4、 案例分析1) 最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。图6-5 游戏选区界面效果图6-6 点击下拉菜单图6-7 点击下拉菜单2） 分析效果图，具体实现步骤如下：a) 定义表单

7、域b) 定义用于游戏选区的下拉菜单c) 定义用于选择线路的下拉菜单d) 使用<input>标记的按钮属性定义确定和取消按钮二、案例实现新建HTML页面，代码如下：案例6-10 CSS美化表单一、案例描述1、 考核知识点CSS控制表单样式 2、 练习目标Ø 熟悉表格布局的基本原理Ø 掌握input控件的常用属性Ø 熟悉<fieldset>标记的用法Ø 复习CSS基本样式属性3、 需求分析制作网页时，为了让页面更加美观、便于维护，经常会使用CSS对表单样式进行控制。为了便于初学者的理解和掌握，接下来，通过一个案例演示CSS美化表单的具体方法。4、 案例分析1) 最终实现效果，如图6-21所示。图6-8 简单的邮箱选区界面2） 分析效果图，具体实现步骤如下：A. 定义表单域，并填充大的背景图片。B. 定义表单内容分组，并确定分组名称为“个人注册”。C. 定义一个3行2列的表格换份表单结构。D. 在第一行第一列和第二行第一列输入提示信息。E. 在第一行第二列和第二行第二列各定义一个单行文本，用于输入用户信息。F. 在第三行第二列设置按钮，并填充背景图片。二、案例实现1、制作页面结构新建HTML页面，代码如下：2、定义CSS样式使用内嵌式CSS样式表为页面添加样式，具