HTML表单页面的基本结构

HTML表单页面的基本结构
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中的“同意以下服务条款,提交注册信息”按钮。除此之外,还有一些不太常用的表单控件,在这里就不一一列举了。

二、表单页面的基本结构

标签用于在网页中创建表单区域,属于一个容器标签,表示其他表单标签需要在它的包围中才有效,便是其中的一个。用以设定各种输入资料的方法,其属性见下表。

属性说明

action 此属性指示服务器上处理表单输出的程序。一般来说,当用户单击表单上的“提交”按钮后,信息发送到Web服务器上,由action属性所指定的程序处理。语法为:action= "URL"

method 此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法(用post方法还是用get方法)。如果值为 get,浏览器将创建一个请求,该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的脚本,以进行处理。如果将值指定为 post,表单上的数据会作为一个数据块发送到脚本,而不使用请求字符串。语法为:method= (getl post)

使用post方法将表单提交给"processform"程序处理,代码如示例1所示。

示例1:

action="https://www.360docs.net/doc/30830285.html,/processform">

名字:

密码:

在示例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 方法提交表单信息后

三、表单元素的统一格式

网页中的表单由许多不同的表单元素组成,这些表单元素各自都有很多属性,要一一节绍,篇幅不允许,下面就把这些表单元素中的一些常用的属性作一个统一的介绍。

下面给出了表单元素的统一格式:

maxlength=“4” checked=“checked”>

元素定义要在表单中显示的控件类型和外观。此元素包括的属性见下表。 属 性 说 明

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时,使用此属性

本节作业:本节以概念理解为主,特别注意

的action和method属性,以及理解表单的提交过程,虽然现在用不到,但在动态网页的学习中是非常重要的。

点击下载第三章案例及作业资源返回《HTML入门经典》教程列表

转载请注明本文地址:https://www.360docs.net/doc/30830285.html,/html/jc/503.html

HTML及网页制作练习题-完整版

1、在HTML中,()标记不可出现在和标记符之间。(C) (A)


(B)
(C) (D) 2、<table>属性中,rowspan定义的内容是(D) (A)单元格所跨的列数 (B)行的宽度 (C)列的高度 (D)单元格所跨的行数 3、在HTML中,正确的嵌套方式是(B)。 (A)<table><td><tr></tr></td></table> (B)<table><tr><td></td></tr></table> (C)<table><tr><td></tr></td></table> (D)<table><td><tr></td></tr></table> 4、最大的标题是:(D) (A)<h7> (B)<h6> (C)<h2> (D)<h1> 5、HTML样式格式文件的后缀名是:(C) (A).asp (B).js (C).css (D).ss 6、下面哪一个标记是用于插入背景音乐的:(D) (A)<MUSIC> (B)<SWF> (C)<A> (D)<BGSOUND> 7、请指出下面正确的说法是:(C) (A)背景音乐标记符号通常插入在<body>…</body>之间 (B)可以在JavaScript语句之间插入背景音乐 (C)背景音乐最好使用MP3格式 (D)用SRC属性指明声音文件地址 8、下列哪些是视频文件。(BD) (A)jpg文件 (B)avi文件 (C)mov文件 (D)mpg文件 9、HTML是一种专门用来设计网站的计算机标记语言(T F) 10、网站模版是指网站内容的总体结构和(A) A.页面格式总体规划 B.网页制作规划</p><h2>HTML习题含答案</h2><p>一、选择 1.在一个框架的属性面板中,不能设置下面哪一项。() A.源文件; B.边框颜色; C.边框宽度D.滚动条 2. 下列哪一项表示的不是按钮。() A.type="submit" B.type="reset" C.type="image" D.type="button" 3.下面哪一个属性不是文本的标签属性?() A.nbsp; B.align C.color D.face 4.下面哪一项的电子邮件链接是正确的?() A.https://www.360docs.net/doc/30830285.html, B.xxx@.net C.xxx@com D.xxx@https://www.360docs.net/doc/30830285.html, 5.当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。() A.ASP B.HTML C.ZIP D.CGI 6.关于表格的描述正确的一项是。()</p><p>A.在单元格内不能继续插入整个表格 B.可以同时选定不相邻的单元格 C.粘贴表格时,不粘贴表格的内容 D.在网页中,水平方向可以并排多个独立的表格 7.如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽。() A.126 B.136 C.147 D.167 8.关于文本对齐,源代码设置不正确的一项是:() A.居中对齐:<div align="middle">…</div> B.居右对齐:<div align="right">…</div> C.居左对齐:<div align="left">…</div></p><p>D.两端对齐:<div align="justify">…</div> 9.下面哪一项是换行符标签?() A.<body> B.<font> C.<br> D. 10.下列哪一项是在新窗口中打开网页文档。() A._self B._blank C._top D._parent 11.下面对JPEG格式描述不正确的一项是。() A.照片、油画和一些细腻、讲求色彩浓淡的图片常采用JPEG格式 B.JPEG支持很高的压缩率,因此其图像的下载速度非常快 C.最高只能以256色显示的用户可能无法观看JPEG图像 D.采用JPEG格式对图片进行压缩后,还能再打开图片,然后对它重新整饰、编辑、压缩12.在一个框架组的属性面板中,不能设置下面哪一项。()</p><h2>HTML网页设计(表单元素)</h2><p>HTML网页设计(表单元素) 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在<form>标签在。一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内) Form标签 设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在<form>标签和</form>结束标签之间。</p><p>2.表单元素 在<form>标签中,可以包含以下5个标签。 Input标签 对于大量通常的表单内元素,可以使用<input>标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然<input>标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。当然,根据指定的比哦啊单元素类型,也可以设置一些其</p><p>可以使用<input>标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。<input>标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。 范例代码:</p><p>密码域 将type属性值设置为password,就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。 范例代码: 文件域(file) 复选框(checked) 单选框(ridio) 普通按钮(button) 设置普通按钮(button)代码: 重置按钮(Reset) Textarea标签 作为表单的一部分,<textarea>标签可在用户浏览器中创建一个多行文字域,在此文本输入区内,用户几乎可以输入无线文字。提交表单之后后,浏览器将所有行中的文字都收集起来,行间距用回车/换行符分隔,并将它们作为表单元素的值发送给服务器,这个值需要使用</p><h2>HTML制作网页表单验证代码</h2><p>HTML制作网页表单验证代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.360docs.net/doc/30830285.html,/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>用户名注册