html表格有3个基本组成部分

发布时间:2016-12-15 来源: 表格 点击:

篇一: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://)等。

如图1所示是网页上的一个典型表单。

图1 典型的表单

一、表单包含的控件

创建表单后,就可以在表单中放置控件以接受用户的输入。这些控件通常放在<FORM></FORM>标签对之间一起使用, 也可以在表单之外用来创建用户界面。在网上冲浪时,我们经常会见到一些常用的控件,例如:让用户输入姓名的单行文本框,让用户输入密码的密码框,让用户选 择性别的单选按钮以及让用户提交信息的提交按钮等。

不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息,如“姓名”、“备注”、“留言”等,一般使用单行文本框或多行文本框;如果要 求用户在指定的范围内做出选择,一般使用单选按钮、复选框和下拉列表框,如图1中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。如果要 把填写好的表单信息提交给服务器,一般使用“提交”按钮,如图3.1中的“同意以下服务条款,提交注册信息”按钮。除此之外,还有一些不太常用的表单控 件,在这里就不一一列举了。

二、表单页面的基本结构

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

属 性 说 明

此属性指示服务器上处理表单输出的程序。一般来说,当用户

action 单击表单上的“提交”按钮后,信息发送到Web服务器上,由

action属性所指定的程序处理。语法为:action= "URL"

此属性告诉浏览器如何将数据发送给服务器,它指定向服务器

发送数据的方法(用post方法还是用get方法)。如果值为 get,

浏览器将创建一个请求,该请求包含页面URL、一个问号和表单method 的值。浏览器会将该请求返回给URL中指定的脚本,以进行处

理。如果将值指定为 post,表单上的数据会作为一个数据块发

送到脚本,而不使用请求字符串。语法为:method= (getl post)

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

<FORM name="form1" method="post"

action="/processform">

<P>名字:

<INPUT name="name" type="text" class="input" id="fname">

</P>

<P>密码:

<INPUT name="pass" type="password" class="input" id="pass"> </P>

<P>

<INPUT type="submit" name="Button" value="提交">

<INPUT type="reset" name="Reset" value="重填">

</P>

</FORM>

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

三、表单元素的统一格式

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

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

<FORM name="form3" method= ”post“ action=“”>

<INPUT type="checkbox" name="gen" value="男" size=“21”

maxlength=“4” checked=“checked”>

</FORM>

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

此属性指定表单元素的类型。可用的选项有:text、password、

checkbox、radio、submit、reset、file、hidden、image

和button。默认选择为text

此属性指定表单元素的名称。例如,如果表单上有几个文本

框,可以按名称来标识它们,如textl、text2等。名称属性

的作用域为FORM元素内

此属性是可选属性,它指定表单元素的初始值。但如果type

为radio,则必须指定一个值

此属性指定表单元素的初始宽度。如果type为text或

password,则表单元素的大小以字符为单位。对于其他输入

类型,宽度以像素为单位 type name value size

比属性用于指定可在text或passwordy元素中输入的最大字maxlength 符数。默认值为无限大

checked 此属性是Boolean属性,指定按钮是否是被选中的。当输入

类型为radio或checkbox时,使用此属性

本节作业:本节以概念理解为主,特别注意<FORM>的action和method属性,以及理解表单的提交过程,虽然现在用不到,但在动态网页的学习中是非常重要的。 点击下载第三章案例及作业资源 返回《HTML入门经典》教程列表

转载请注明本文地址:/html/jc/503.html

篇二:第三章HTML表格_上机需求

上机需求

主要目标

? 使用表格制作课程表

? 使用表格进行网页布局

? 使用表格完成注册页面的布局

? 模拟项目中的列表页

实验1

任务:

使用表格制作课程表。如下图:

任务:使用表格进行网页布局。如下图:

任务:使用表格完成注册页面的布局。如下图:

实验4

任务:

模拟项目中的列表页。如下图:

篇三:HTML的表格基础

HTML的表格基础

上一章已介绍了HTML基本标签,既介绍了如何使用HTML文件的基本结构创建网页,又介绍了文本相关标签实现文字修饰和布局,还讲解了图像相关标签如何实现图文并茂的页面,超链接相关标签如何实现页面间的跳转。

本章开始讲解表格的基础,其中重点是表格的基本结构,难点是如何创建跨多行跨多列的表格。为了使我们制作的页面更精致、表格更美观,我们还要研究表格布局,以及如何对表格进行美化修饰。

本节单词记忆:标签 1.table 2.tr 3.td 属性 1.border

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

表格是网页制作中使用最多的技术之一,它通常用来显示分类数据,在网页中表格更多地用在网页布局和定位上。通过使用表格相关属性,可实现对网页中的文字和图片进行合理的布局和定位,使得网页在形式上丰富多彩,在组织上井然有序。真是表格在手,一清二楚!

在HTML语言中,表格至少由<TABLE>标签、<TR>标签和<TD>标签这3对标签组成,否则,就不能成为表格。<TABLE>…</TABLE>标签中间将包括所有表格元素,表格元素主要有行、列、单元格等。了解表格的基本结构之后,我们就可以创建一个简单的表格。

一、为什么要使用表格

当我们在网上冲浪时,会看到论坛页面(如图1所示)、门户网站页面(如图2所示)、购物网站页面(如图3所示)等。这些图文并茂、绚丽多彩、整齐有序的页面效果是如何实现的呢?其实很简单,就是用表格来实现的,既然表格有如此广泛的应用和如此强大的功能,下面我们就抓紧时间开始对表格的学习吧!

图1 论坛页面

图2 门户网站页面

图3 购物网站页面

二、表格的基本结构

看到这么多使用表格进行布局、定位的精美页面,你是不是很想体验一把呢!不用急,万丈高楼平地起,先让我们来看一看表格的最基本的结构。表格是由指定

数目的行和列组成,如图4所示。文字或图片按照相应的列或行进行分类和显示。

图4 表格的布局

可以使用有行和列的表格格式来显示数据。表格可在一定程度上控制文本和图像在网页中的位置,而不是完全由浏览器对此进行控制。

在HTML中,用于创建表格的标签如下:

1.<TABLE>

<TABLE>…</TABLE>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格,用<TD>…</TD>标签定义。

2.<TR>

表格行用<TR>标签定义,由单元格构成。多个行结合在一起就构成一个表格,这反映在用于创建表格的HTML语法中。表格的每一行都用<TR>标签表示,并用相应的

</TR>标签结束。

3.<TD>

表格的每一行又有若干表格单元格,用<TD>…</TD>标签表示。TD是"表格数据( Table Data)”的英文缩写。<TD>标签定义一个列,嵌套于<TR>标签内。WANGYEXX.COM

border属性是最常用的属性,可用于定义表格的单元格和结构。该属性指定边框的厚度,如果其值设置为零(0),则不显示边框。

三、如果创建表格

所有的表格都包括3个基本标签,即表格标签<TABLE>…</TABLE>、行标签

<TR>…</TR>和单元格标签<TD>…</TD>。可以说,在页面中如果要创建一个完整的表格,至少要包含这3对标签。

语法:

创建表格的基本语法:

<TABLE>

<TR>

<TD>

单元格内容

</TD>

</TR>

</TABLE>

创建表格时,一般情况下分3步:

第一步:创建表格标签<TABLE>…</TABLE>。

第二步:在表格标签<TABLE>…</TABLE>里创建行标签<TR…</TR>,可以有多行。 第三步:在行标签<TR>…</TR>里创建单元格标签<TD>…</TD>,可以有多个单元格。

如示例1所示为在页面中添加一个2行3列的表格的代码。

示例1:

<HTML>

<HEAD>

<TITLE>基本表格</TITLE>

</HEAD>

<BODY>

<TABLE border="2">

<TR>

<TD>移动</TD>

<TD>联通</TD>

<TD>铁通</TD>

</TR>

<TR>

<TD>IBM </TD>

<TD>惠普</TD>

<TD>华硕</TD>

</TR>

</TABLE>

</BODY>

</HTML>

运行示例1代码,其效果如图5所示。

图5 基本表格

本节作业:

不看示例代码,制作如图5网页。

注意事项:

1.注意表格的基本结构,不要忘了闭合TD标签或是混淆闭合TD、TR标签。 网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧! 点击下载第二章案例及作业资源 返回《HTM(来自:www.xLtKwj.coM 小 龙 文档网:html表格有3个基本组成部分)L入门经典》教程列表

转载请注明本文地址:/html/jc/499.html

相关热词搜索:组成部分 表格 html html表格的标签是 html非成对标记 html表格是用来干嘛的

版权所有 小龙文挡网 www.xltkwj.com