第7章 表单的应用_补充案例.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 4 PAGE 3 第7章 补充案例 【案例7-1】 用户登陆界面 一、案例描述 考核知识点 表单属性 练习目标 熟悉表单的构成。 掌握form标记的创建。 理解form标记相关属性。 需求分析 在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个用户登陆界面的案例做具体演示。 案例分析 效果如图7-1所示。 用户登陆界面效果 具体实现步骤如下： 定义表单域。 定义用于输入用户名的单行文本输入框。 定义密码输入框。 定义用于输入验证码的单行文本输入框。 定义登陆按钮。 二、案例实现 新建HTML页面，代码如下： !doctype html html head meta charset=utf-8 title简单的登陆界面/title /head body form action=# method=post name=biaodan autocomplete=on 用户名： !--text单行文本输入框-- input type=text value=请输入用户名 maxlength=6 /br /br / 密nbsp;nbsp;码： !--password密码输入框-- input type=password size=20 /br /br / 验证码： input type=text value=请输入验证码 maxlength=4 /br /br / input type=submit value=登陆/ !--submit提交按钮-- /form /body /html 保存后，在谷歌浏览器中预览，效果如图7-2所示。 用户登陆界面 【案例7-2】 学员档案 一、案例描述 考核知识点 Input元素的type属性 练习目标 熟悉input元素的type属性。 掌握使用input元素定义文本输入框、E-mail地址、URL地址、时间日期等。 需求分析 表单是HTML网页中的重要元素，它通过收集来自用户的信息，并将信息发送给服务器端程序处理，来实现网上注册，网上登录，网上交易等多种功能。通过input元素的type属性可以定义表单控件，来实现不同的表单功能。接下来，通过一个学员档案的案例做具体演示。 案例分析 效果如图7-3所示。 学员档案效果 具体实现步骤如下： 定义表单域。 分别定义文本输入框、URL地址、E-mail地址、数值文本框、时间日期输入类型。 定义提交按钮。