HTML表单页面的基本结构
HTML表单页面的基本结构
本章开始讲解表单和框架,其中重点是如何使用表单中的各种元素.如何使用框架制作多窗框页面;难点是表单中的post方法和get方法的区别.窗口的target 属性。为了能在一个页面中显示多个HTML文档.我们还要介绍框架。
本节单词记忆:标签 1.form 2.input属性 1.action 2.method 3.size
4.maxlength
5.checked
网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。
热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等,这些页面是什么做的呢?我不敢说完全是用表单做的,但我敢肯定至少包含有表单,所以表单主要用来收集客户端相关信息,使网页具有交互功能。本节主要讨论如何使用HTML来创建表单,然后向表单中添加表单元素。
网页中的表单用途很广,而且还在不断发展。下面我们就列举一些典型的表单应用:
●在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。
●为收集购买某个商品的订单信息。例如,如果想通过Intemet购买一本书,则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。
● 收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷,提供反馈信息。这些反馈信息除了维系良好的客户关系外,它还有助于改进和提高网站的服务质量,从而使网站的服务更具人性化,吸引更多的浏览者。
●为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框,使用户能够更快地找到想要的信息,如比较著名的搜索网站:谷歌(http:
//https://www.360docs.net/doc/30830285.html,)、百度(http://https://www.360docs.net/doc/30830285.html,)等。
如图1所示是网页上的一个典型表单。
图1 典型的表单
一、表单包含的控件
创建表单后,就可以在表单中放置控件以接受用户的输入。这些控件通常放在
标签对之间一起使用,也可以在表单之外用来创建用户界面。在网上冲浪时,我们经常会见到一些常用的控件,例如:让用户输入姓名的单行文本框,让用户输入密码的密码框,让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息,如“姓名”、“备注”、“留言”等,一般使用单行文本框或多行文本框;如果要求用户在指定的范围内做出选择,一般使用单选按钮、复选框和下拉列表框,如图1中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。如果要把填写好的表单信息提交给服务器,一般使用“提交”按钮,如图3.1中的“同意以下服务条款,提交注册信息”按钮。除此之外,还有一些不太常用的表单控件,在这里就不一一列举了。
二、表单页面的基本结构
在示例1中,若把method=”post”改为method=”get'’就变成了使用get方法将表单提交给"processform"程序处理。这两种方法都是将表单数据提交给服务器上指定的程序进行处理,那有什么区别呢?
先让大家看看采用post和get方法提交表单信息后浏览器地址栏的变化,如图2和图3所示。在“名字”和“密码”标签后,分别输入用户名和密码,然后单击“提交”按钮。采用post方法提交表单信息之后,浏览器地址栏前后没变化,如一图3.2所示;采用get方法提交表单信息之后,浏览器地址栏前后有变化,如图3.3所示,并且在浏览器地址栏中能看到信息
"name=wzq&password=123”,这其实就是我刚才输入的用户名和密码信息,是不是很恐怖?密码都能看得见。由此可以看出,使用post方法提交表单信息更安全,相反,使用get方法提交表单信息极其不安全,建议大家在使用表单时尽可能地使用post方法来传送数据。
图3 get 方法提交表单信息后
三、表单元素的统一格式
网页中的表单由许多不同的表单元素组成,这些表单元素各自都有很多属性,要一一节绍,篇幅不允许,下面就把这些表单元素中的一些常用的属性作一个统一的介绍。
下面给出了表单元素的统一格式:
元素定义要在表单中显示的控件类型和外观。此元素包括的属性见下表。 属 性 说 明
type 此属性指定表单元素的类型。可用的选项有:text 、password 、
checkbox 、radio 、submit 、reset 、file 、hidden 、image
和button 。默认选择为text
name 此属性指定表单元素的名称。例如,如果表单上有几个文本
框,可以按名称来标识它们,如textl 、text2等。名称属性
的作用域为FORM 元素内
value 此属性是可选属性,它指定表单元素的初始值。但如果type
为radio ,则必须指定一个值
size
此属性指定表单元素的初始宽度。如果type 为text 或
password ,则表单元素的大小以字符为单位。对于其他输入
类型,宽度以像素为单位 maxlength 比属性用于指定可在text 或passwordy 元素中输入的最大字符数。默认值为无限大
checked 此属性是Boolean属性,指定按钮是否是被选中的。当输入类型为radio或checkbox时,使用此属性
本节作业:本节以概念理解为主,特别注意