补充案例网页制作教程章表单.pdfVIP

第章补充案例

6

【案例6-1】简单的用户登陆界面

1、考核知识点

input控件

2、练习目标

熟悉表单的构成。

掌握form标记的用法。

理解form标记相关属性。

掌握input控件属性中的单行文本输入框、输入框以及提交按钮属性。

3、需求分析

在网页中，通常会使用表单来收集用户信息，并将这些信息传递给服务器，实现人机交互。

同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。

为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。

4、案例分析

1)最终实现效果，如图6-1所示。

图6-1登陆界面

2）分析效果图，具体实现步骤如下：

a)定义表单域。

b)定义用于输入用户名的单行文本输入框。

c)定义输入框。

d)定义用于输入的单行文本输入框。

e)定义登陆按钮。

二、案例实现

新建HTML页面，代码如下：

1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN

2

3htmlxmlns=

4head

5metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

6title简单的登陆界面/title

7/head

8body

9formaction=#method=postname=example

10用户名：!--text单行文本输入框--

11inputtype=textvalue=请输入用户名maxlength=6/br/br/

12：!--password输入框--

13inputtype=passwordsize=24/br/br/

14：

15inputtype=textvalue=请输入maxlength=4/br/br/

16inputtype=submitvalue=登陆/!--submit提交按钮--

17/form

18/body

19/html

保存后，在火狐浏览器中预览，效果如图6-2所示。

图6-2简单的登陆界面

【案例6-2】简单的交规考试答卷

1、考核知识点

input控件

2、练习目标

熟悉表单的构成。

掌握form标记的用法。

掌握input控件属性中单选框和复选框属性。

熟悉label标记的使用方法。

3、需求分析

随着网路技术的不断发展，越来越多的考试都采用机考的方式，机一般会出现很多选择题，

其中包括单选和多选，本案例将通过input控件的相关知识，来模拟驾照考试中的单选题和多选题。

4、案例分析

1)最终实现效果，如图6-3所示。

图6-3交规考试答卷效果

2）分析效果图，具体实现步骤如下：

a)定义一个名为“交通考试选择题