博学谷——让IT教学更简单，让IT学习更有效
PAGE 22
第6章 补充案例
【案例6-1】 简单的用户登陆界面
一、案例描述
考核知识点
input控件
练习目标
熟悉表单的构成。
掌握
标记的用法。理解
标记相关属性。掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性。
需求分析
在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。
案例分析
最终实现效果，如图6-1所示。
登陆界面
分析效果图，具体实现步骤如下：
定义表单域。
定义用于输入用户名的单行文本输入框。
定义密码输入框。
定义用于输入验证码的单行文本输入框。
定义登陆按钮。
二、案例实现
新建HTML页面，代码如下：
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
简单的登陆界面用户名：
密码：
验证码：
保存后，在火狐浏览器中预览，效果如图6-2所示。
简单的登陆界面
【案例6-2】 简单的交规考试答卷
一、案例描述
考核知识点
input控件
练习目标
熟悉表单的构成。
掌握
标记的用法。掌握input控件属性中单选框和复选框属性。
熟悉标记的使用方法。
需求分析
随着网路技术的不断发展，越来越多的考试都采用机考的方式，机考中一般会出现很多选择题，其中包括单选和多选，本案例将通过input控件的相关知识，来模拟驾照考试中的单选题和多选题。
案例分析
最终实现效果，如图6-3所示。
交规考试答卷效果
分析效果图，具体实现步骤如下：
定义一个名为“交通考试选择题”的
标题。
定义表单域。
使用
标记定义单选题的题干。
使用标记的单选按钮属性定义选项。
使用
标记定义多选题的题干。
使用标记的复选框属性定义选项。
二、案例实现
新建HTML页面，代码如下：
/p>
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
