第六章补充案例
案例6-6 简单的用户登陆界面
一、案例描述
1、考核知识点
input控件
2、练习目标
➢熟悉表单的构成
➢掌握<form>标记的用法
➢理解<form>标记相关属性
➢掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性
3、需求分析
在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。
同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。
为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。
4、案例分析
1)最终实现效果，如图6-11所示。
图6-1登陆界面
2）分析效果图，具体实现步骤如下：
a)定义表单域。
b)定义用于输入用户名的单行文本输入框。
c)定义密码输入框。
d)定义用于输入验证码的单行文本输入框。
e)定义登陆按钮。
二、案例实现
图6-2简单的登陆界面
案例6-7 简单的交规考试答卷
一、案例描述
1、考核知识点
input控件
2、练习目标
➢熟悉表单的构成
➢掌握<form>标记的用法
➢掌握input控件属性中单选框和复选框属性
➢熟悉<label>标记的使用方法
3、需求分析
浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。
虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。
因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。
4、案例分析
1)最终实现效果，如图6-13所示。
图6-3交规考试答卷效果
2）分析效果图，具体实现步骤如下：
a)定义一个名为“交通考试选择题”的<h3>标题。
b)定义表单域
c)使用<p>标记定义单选题的题干。
d)使用<input>标记的单选按钮属性定义选项。
e)使用<p>标记定义多选题的题干。
f)使用<input>标记的复选框属性定义选项。
二、案例实现
案例6-8 制作字符批量替换工具界面
一、案例描述
1、考核知识点
<textarea>控件
2、练习目标
➢掌握<textarea>控件的使用方法
➢掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性
3、需求分析
当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的<textarea></textarea>控件，来创建多行文本输入框。
为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的案例做具体演示。
4、案例分析
1)最终实现效果，如图6-15所示。
图6-4字符批量替换工具界面效果
2）分析效果图，具体实现步骤如下：
a)定义表单域。
b)通过<p>标记定义标注文本“查找”。
c)通过<textarea>控件定义多行文本框。
d)通过<p>标记定义标注文本“替换为”。
e)通过<textarea>控件定义第二个多行文本框。
f)使用<input>标记的复选框属性定义三个复选框。
g)定义提交按钮、重置按钮和普通按钮。
二、案例实现
新建HTML页面，代码如下：
案例6-9 制作简单的游戏选区界面
一、案例描述
1、考核知识点
<select>控件
2、练习目标
➢掌握<select>控件的使用方法
➢掌握下拉菜单分组选项的制作方法
➢掌握input控件属性中的按钮属性
3、需求分析
在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。
为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的案例，对下拉菜单的用法做具体演示。
4、案例分析
1)最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。
图6-5游戏选区界面效果图6-6点击下拉菜单图6-7点击下拉菜单2）分析效果图，具体实现步骤如下：
a)定义表单域
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样式表为页面添加样式，具体CSS代码如下：
图6-9CSS美化表单
在本案例中，通过<filedset></filedset>标记可以将表单内容分组，并且使用其配套标记
<legend></legend>为各个表单组定义名称。
