HTML表单页面的基本结构

HTML 表单页面的基本结构本章开始讲解表单和框架，其中重点是如何使用表单中的各种元素如何使用框 架制作多窗框页面；难点是表单中的 post 方法和 get 方法的区别窗口的 target 属性。为了能在一个页面中显示多个HTML文档我们还要介绍框架。本节单词记忆：标签 1.form 2.input 属性 1.action 2.method 3.size 4.maxlength 5.checked网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得 它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有 必要的。热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息 页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢？我不敢 说 完全是用表单做的，但我敢肯定至少包含有表单，所以表单主要用来收集客户端 相关信息,使网页具有交互功能。本节主要讨论如何使用HTML来创建表单，然 后 向表单中添加表单元素。网页中的表单用途很广,而且还在不断发展。下面我们就列举一些典型的表单应 用： 在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他 信息。 为收集购买某个商品的订单信息。例如,如果想通过 Intemet 购买一本书, 则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。 收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷, 提供反馈信息。这些反馈信息除了维系良好的客户关系外,它还有助于改进和提 高网站的服务质量,从而使网站的服务更具人性化,吸引更多的浏览者。 为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框, 使用户能够更快地找到想要的信息，如比较著名的搜索网站：谷歌(h ttp： /)、百度(http： /)等。如图1 所示是网页上的一个典型表单。(RADIO)ftTEXT)jure.- »s_ fld*- .“悶 zA-j:- e_-=- . I- wi； |> -ri. (P.ASSWORD) .(upiwv r*r；ri：w削之&珂KScIStii (SUBMITJl復歯F(CHECKBOX) /丁拉列去(SELECT) r ?W*"汙贯盯I?匚匚厂 叮ibf；I .SAB&i 厂厲炼厲海r mr 测ll皿iin.晰f a：n 茴制!3 JL帯旨齢I (RE5E7JP戎出土也!劭*妆窑芍-玄本如(TEXTAREA.)wn fin nnac'ir'i-7 til?s *n fc，：!'£* *1t- q旧门卡 “4讣咕，f* J=l «匚器 dhE M工 ri-Jt-IVE 4的I bMHit '.>frtiTi：r-Tzii iiif图 1 典型的表单一、表单包含的控件 创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在 F0RM/F0RM标签对之间一起使用，也可以在表单之外用来创建用户界面。在 网上冲浪时，我们经常会见到一些常用的控件，例如：让用户输入姓名的单行文 本框，让用户输入密码的密码框，让用户选 择性别的单选按钮以及让用户提交 信息的提交按钮等。不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，如 “姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框；如果要 求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如 图1 中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。如 果要 把填写好的表单信息提交给服务器，一般使用“提交”按钮，如图 3.1 中 的“同意以下服务条款，提交注册信息”按钮。除此之外，还有一些不太常用的 表单控 件，在这里就不一一列举了。二、表单页面的基本结构FORM标签用于在网页中创建表单区域，属于一个容器标签，表示其他表单标签 需要在它的包围中才有效，INPUT便是其中的一个。用以设定各种输入资料的 方法，其属性见下表。属 性说 明此属性指示服务器上处理表单输出的程序。一般来说，当用户 action 单击表单上的“提交”按钮后，信息发送到 Web 服务器上，由act ion属性所指定的程序处理。语法为：act ion二"URL"此属性告诉浏览器如何将数据发送给服务器，它指定向服务器 发送数据的方法(用 post 方法还是用 get 方法)。如果值为 get， th d浏览器将创建一个请求，该请求包含页面URL、一个问号和表单 m的值。浏览器会将该请求返回给URL中指定的脚本，以进行处理。如果将值指定为pos t，表单上的数据会作为一个数据块发 送到脚本，而不使用请求字符串。语法为：method= (getl post)使用post方法将表单提交给"processform"程序处理，代码如示例1所示。示例 1:<FORM name="form1" method="post" action=" <P>名字：<INPUT name="name" type="text" class="input" id="fname"></P><P>密码：<INPUT name="pass" type="password" class="input" id="pass"> </P><P>INPUT ty pe="subm it" name二"B utton" value二"提交"INPUT ty pe="rese t" name二"Rese t" value二"重填"</P>/FORM> 在示例1中，若把me thod二"pos t”改为met hod二"ge t''就变成了使用get方 法将表单提交给"processform "程序处理。这两种方法都是将表单数据提交给服 务器上指定的程序进行处理，那有什么区别呢？先让大家看看采用 post 和 get 方法提交表单信息后浏览器地址栏的变化，如图 2 和图 3 所示。在“名字"和“密码"标签后，分别输入用户名和密码， 然后 单击“提交"按钮。采用 post 方法提交表单信息之后，浏览器地址栏前后没变 化，如一图3.2所示；采用get方法提交表单信息之后，浏览器地址栏前后有 变化，如图 3.3 所示，并且在浏览器地址栏中能看到信息"name二wzq&password=123"，这其实就是我刚才输入的用户名和密码信息，是 不是很恐怖？密码都能看得见。由此可以看出，使用post方法提交表单信息更 安全，相反，使用 get 方法提交表单信息极其不安全，建议大家在使 用表单时 尽可能地使用 post 方法来传送数据。图3 get方法提交表单信息后三、表单元素的统一格式 网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，要 一一节绍，篇幅不允许，下面就把这些表单元素中的一些常用的属性作一个统一 的介绍。面给出了表单元素的统一格式： <FORM name="form3" method= ”post“ action=“”>INPUT ty pe二"checkbox" name二"gen" value二"男"size二 “21" maxlength=“4” checked=“checked”></FORM><INPUT >元素定义要在表单中显示的控件类型和外观。此元素包括的属性见下表。属性说明type此属性指定表单兀素的类型。可用的选项有：ex t、password、 checkbox、radio、submit、reset、file、hidden、image 和butt on。默认选择为textname此属性指定表单元素的名称。例如，如果表单上有几个文本 框，可以按名称来标识它们，如textl、text2等。名称属性 的作用域为FORM元素内value此属性是可选属性，匕指定表单兀素的初始值。但如果type 为radio,则必须指定一个值size此属性指定表单兀素的初始宽度。如果type为text或 password，则表单兀素的大小以字付为单位。对于其他输入 类型，宽度以像素为单位比属性用于指定可在text或passwordy元素中输入的最大字 maXlength符数。默认值为无限大checked此属性是Boolean属性，指定按钮是否是被选中的。当输入 类型为 radio 或 checkbox 时，使用此属性本节作业：本节以概念理解为主，特别注意FORM的action和method属性，以 及理解表单的提交过程，虽然现在用不到，但在动态网页的学习中是非常重要的。点击下载第三章案例及作业资源返回HTML入门经典教程列表转载请注明本文地址:htt p:/ tml/jc/503.h tml