网页设计基础 HTML表单 第6章 HTML表单_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 22 第6章 补充案例 【案例6-1】 简单的用户登陆界面 一、案例描述 考核知识点 input控件 练习目标 熟悉表单的构成。 掌握form标记的用法。 理解form标记相关属性。 掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性。 需求分析 在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。 案例分析 最终实现效果，如图6-1所示。 登陆界面 分析效果图，具体实现步骤如下： 定义表单域。 定义用于输入用户名的单行文本输入框。 定义密码输入框。 定义用于输入验证码的单行文本输入框。 定义登陆按钮。 二、案例实现 新建HTML页面，代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title简单的登陆界面/title /head body form action=# method=post name=example 用户名： !--text单行文本输入框-- input type=text value=请输入用户名 maxlength=6 /br /br / 密码： !--password密码输入框-- input type=password size=24 /br /br / 验证码： input type=text value=请输入验证码 maxlength=4 /br /br / input type=submit value=登陆/ !--submit提交按钮-- /form /body /html 保存后，在火狐浏览器中预览，效果如图6-2所示。 简单的登陆界面 【案例6-2】 简单的交规考试答卷 一、案例描述 考核知识点 input控件 练习目标 熟悉表单的构成。 掌握form标记的用法。 掌握input控件属性中单选框和复选框属性。 熟悉label标记的使用方法。 需求分析 随着网路技术的不断发展，越来越多的考试都采用机考的方式，机考中一般会出现很多选择题，其中包括单选和多选，本案例将通过input控件的相关知识，来模拟驾照考试中的单选题和多选题。 案例分析 最终实现效果，如图6-3所示。 交规考试答卷效果 分析效果图，具体实现步骤如下： 定义一个名为“交通考试选择题”的h3标题。 定义表单域。 使用p标记定义单选题的题干。 使用input标记的单选按钮属性定义选项。 使用p标记定义多选题的题干。 使用input标记的复选框属性定义选项。 二、案例实现 新建HTML页面，代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/