小白入门之HTML--第二章 表格和表单

1.本章面试题

1.1 表格的基本标签有哪些

1.2 常用的表单元素有哪些

2.知识点

2.1 上一章内容回顾

​ 上一章我们学习了HTML语言的概念和一些常用的标签,包括标题标签,段落标签,换行标签,格式化标签,字体形状标签,字体标签,图像标签,超链接标签,网页文档结构标签,视频标签,音频标签等常用标签。

2.2 本章我们要学习网页中的表格和表单

3.具体内容

3.1 表格的基本结构

​ 在日常生活中,我们对表格式数据已经很熟悉了。这种数据有多种形式,如财务数据、调查数据、事件日历、公交车时刻表、电视节目表等。在大多数情况下,这类信息都由列标题或行标题加上数据本身构成。如下是一个表格的基本结构:

小白入门之HTML--第二章 表格和表单_第1张图片

​ 图3-1 表格示意图

​ 一个最基本的HTML表格常用的标记如表3-1所示,它们是创建表格最常用的标记,在一起配合使用就可以生成最简单的表格了。

3.2 表格的基本语法

标记 说明
表示一行。的上一级父标记是
table是表格的最外层标记,一个表格从开始到
结束
网页的表格是按照行画的,每出现一对
表示行中的一个单元格。 中的内容就是单元格的内容。。//

以及元素使你有能力对表格中的行进行分组。 标记定义表格的页脚(脚注或表注)。该标记用于组合 HTML 表格中的表注内容。元素应该与元素结合起来使用。 元素用于对 HTML 表格中的表头内容进行分组,而tbody元素用于对 HTML 表格中的主体内容进行分组。 在默认情况下这些元素不会影响到表格的布局。




    表格的分组


    
td元素表示表格中的数据,在表格中用于包含单元格实际的内容, 的上一级父标记是
thtd表示的都是单元格,但th元素中的内容默认将居中并以粗体显示。th 经常用于表头的单元格。
标记中的文字就作为表格标题,通常会居中显示在表格上方。标记必须直接放置到标记之后,每个表格只能设置一个标题。

​ 表3-1 表格的基本标签

                                                                                        
                                                                                                  
                                                              
...
...
   



    基本表格


学生信息表
学号 姓名 性别 年龄
201107235 张明 19
201107421 夏静 20
201107616 刘洋 18
201107311 李明浩 21

小白入门之HTML--第二章 表格和表单_第2张图片

3.3 表格边框属性

border属性,表示是否显示表格的边框,只使用值 "1" 或 "0 ";如果修改border属性值为"0",表示无边框,和默认效果一样。

​ 基本语法:




    带边框的表格


课程表
星期一 星期二 星期三 星期四 星期五 星期六
语文 数学 英语 英语 物理 计算机
数学 数学 地理 历史 化学 计算机
化学 语文 体育 计算机 英语 计算机
政治 英语 体育 地理 历史 计算机
语文 数学 英语 英语 物理 计算机
数学 数学 地理 历史 化学 计算机

小白入门之HTML--第二章 表格和表单_第3张图片

3.4 在单元格中显示图片

​ 对于HTML表格,还可以在其单元格中添加图像。将图片放到单元格中,可以将图片在网页上排列整齐。




    带图片的表格


    
卡通头像

小白入门之HTML--第二章 表格和表单_第4张图片

3.5 合并单元格

​ 可以通过colspan 和rowspan 属性让

跨越一个以上的列或行。对该属性指定的数值表示的是跨越的单元格的数量。这样我们可以创建更多不规则的表格。

3.5.1 列合并

​ 如果要对表格使用列合并,也就是让同一行上的不同列上的单元格合并为一个单元格,那么要找到被合并的几个单元格中处于最左侧的那个单元格,并加上colspan属性,在同一行中的其它单元格的标记要删除掉。

​ 基本语法:



   
    列合并表格
   
   
    
    
列合并
A00 A01A02 A03
B10 B11 B12 B13
C20 C21 C22 C23
 

小白入门之HTML--第二章 表格和表单_第5张图片

3.5.2 行合并

​ 如果要对表格使用行合并,也就是让同一列上的不同行上的几个单元格合并为一个单元格,那么要找到被合并的几个单元格中处于最上面的那个单元格,并加上rowspan属性,然后将其它行中对应的其它单元格的标记删除掉。

​ 基本语法:



   
      行合并表格
   
   
                     
             
行合并
A00B10 A01 A02 A03
B11 B12 B13
C20 C21 C22 C23
 

小白入门之HTML--第二章 表格和表单_第6张图片

3.5.3 行列合并



   
      行列合并表格
   
   
      
            
                         
                          
         
行列合并
A00 A01 A02 A03
B10B11 B12B13
C22C23
C20 C21
 

3.6 嵌套表格

​ 嵌套表格就是在一个大的表格中,再嵌进去一个或几个小的表格。即插入到表格单元格中的表格。如果用一个表格布局页面,并希望用另一个表格组织信息,则可以插入一个嵌套表格。




    表格的嵌套


    
1 2 3 4 5
6 7 8 9
10
1 2 3
4 5 6
7 8 9
11 12 13
14 15

小白入门之HTML--第二章 表格和表单_第7张图片

3.7 表格按行分组显示

月份 收入(¥)
总计 5800
一月 1800
二月 2000
三月 2000

小白入门之HTML--第二章 表格和表单_第8张图片

3.8 表单的使用

​ 表单在网页中起着重要作用,它是与用户交互信息的主要手段。比如我们常用的用户注册、在线联系、在线调查表等都是表单的具体应用形式。

​ 在HTML中,只要在需要使用表单的地方插入成对的标记

,就可以很简单地完成表单的插入。

​ 基本语法:

  ……   表单元素(如文本框、单选按钮、复选框、列表框、文本区域等)   ……

​ 语法说明:

  • name:该属性表示表单的名称。

  • method:该属性用来定义提交信息的方式,取值为post或get,默认为get。

  • action:该属性用来指定处理表单数据的程序文件所在的位置,当单击提交按钮后,就将表单信息提交给该文件进行处理。

    如下是一个建立表单的基本语句:

3.9 表单基本元素

​ 一个表单重要的两个组成部分表单域和表单按钮。表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮包括提交按钮、复位按钮和一般按钮。

3.9.1 元素

​ 该标记可以在表单中定义单行文本框、单选按钮、复选框等表单元素。

​ 基本语法:

如下是元素的属性说明:

属性 功能
type 插入表单的元素类型,具体取值如表3-3所示
name 表单元素的名称
size 单行文本框的长度,取值为数字,表示多少个字符长
maxlength 单行文本框可以输入的最大字符数,取值为数字,表示多少个字符,当大于size的属性值时,用户可以移动光标来查看整个输入的内容。
value 对于单行文本框,表示输入文本框的默认值,可选属性对于单选按钮或复选框,则指定单选按钮被选中后传送到服务器的实际值,必选属性。对于按钮,则指定按钮表面上的文本,可选。
checked 若被加入,则默认选中

​ 表3-2 input元素的基本属性

属性值 说明
text 表示单行文本框
password 表示密码框输入的字符以"*"或"·"显示
radio 单选按钮
checkbox 表示复选框
submit 表示提交按钮
reset 表示重置按钮
button 表示创建一个按钮,该按钮的具体功能,需要另外编程
image 表示图像域,此时input标记还有一个重要属性:src,用来指定图像域的来源
file 表示文件域
hidden 隐藏文本框域,类似于text,但不可见,常用来传递信息。
   

3.9.2 文本框和密码框

​ 文本框和密码框是表单设计里面最常用的两个表单元素,比如登录、注册等页面设计都会用到这两个表单元素。

​ 基本语法:




    文本框和密码框


    
用户名:

密码:

年龄:

小白入门之HTML--第二章 表格和表单_第9张图片

3.9.3 按钮

​ 在表单中常用的按钮有四种,分别是提交按钮、重置按钮、普通按钮和图片按钮。

  • 提交按钮的type属性值为submit

  • 重置按钮就是让所有表单数据都还原到初始值。

  • 普通按钮就是能生成一个按钮的形状,但单击按钮不会有任何操作,需要配合相关代码支持功能操作。

  • 图片按钮当标记的属性值为image时,就成为一个图像域,图像域相当于一个图片样式的提交按钮。

基本语法:

创建提交按钮,重置按钮和普通按钮:




    按钮


    
用户名:

密码:

年龄:

创建图片按钮:




    图片按钮


    
用户名:

密码:

年龄:

小白入门之HTML--第二章 表格和表单_第10张图片

3.9.4 单选按钮

​ 单选按钮(radio button)是较小的圆形按钮,它允许用户从一个选项列表中选择单个选项。只需使用input元素并将type特性设置为radio,就可以创建单选按钮。

​ 在定义选项时,必须保证同一组的单选框的name属性值一样,这样才能在一组选项中作出一个选择。




    单选按钮


    


性别

男生

女生

小白入门之HTML--第二章 表格和表单_第11张图片

 

3.9.5 复选框

​ 复选框允许从一个选项列表中选择多个选项。在input标记中设置type属性值为checkbox。在定义选项时,要注意如果name值一样的话,用户所有选项会组合为一个数据进行提交。




    复选框


    


个人爱好

跳舞

唱歌

羽毛球

乒乓球

小白入门之HTML--第二章 表格和表单_第12张图片

 

3.9.6 文件域

​ 文件域类型用于文件上传。在设计网站时,有时会需要用户上传一些本地计算机上的一些文件。这时候使用文件域就会非常方便,可以让用户自行选择要上传的文件。




    文件域


    

 

小白入门之HTML--第二章 表格和表单_第13张图片

3.9.7 hidden类型

​ hidden类型可以定义一个隐藏的表单控件。在浏览器中,这个隐藏项用户是看不到的。通常情况下,设计者可以利用隐藏表单控件存储一些数据,可以当作一个页面变量。

​ 代码:

 

3.9.8 多行文本框标记就用于定义一个多行文本域,常用于需要输入大量文字的地方,如留言、自我介绍等。由




    多行文字框


    
个人简介:

小白入门之HTML--第二章 表格和表单_第14张图片

3.9.9 列表 标记是和标记配合使用的,一个标记就是下拉菜单中的一项, ……




    列表


    
select:

小白入门之HTML--第二章 表格和表单_第16张图片

3.9.2 标签

< datalist>虽然也可以生成列表,但是不能独立使用这个表单。标记必须和一个可输入文本框类型一起配合使用。

​ 基本语法:

    
    
    



    列表


    
Webpage:

小白入门之HTML--第二章 表格和表单_第17张图片

3.9.10 标签高级属性

​ HTML5中对定义了很多全新的表单输入类型,这些新的表单类型大大简化了程序员的编程复杂度,提供了很好的控制和便捷的验证方法。

3.9.10.1 url类型

​ 定义url类型的输入表单,是在input标记中设置type属性值为url。当提交数据时,该表单会对输入的路径值自动进行验证,输入的是不合法路径时会有提示语句。

​ 基本语法:






	url


	
请输入个人主页地址:

小白入门之HTML--第二章 表格和表单_第18张图片

3.9.10.2 email类型

​ 定义email类型的输入表单,是在input标记中设置type属性值为email。当提交数据时,该表单会对输入的邮箱地址值自动进行验证,如果用户输入不符合格式就会给出提示。

​ 基本语法:

	




	email


	
请输入邮箱地址:

小白入门之HTML--第二章 表格和表单_第19张图片

3.9.10.3 日期和时间

​ HTML5之前日期和时间是需要另外编程插入能选择日期和时间的控件,现在HTML5提供了多种新的日期和时间输入表单,用户可以方便的通过鼠标选择日期和时间。

​ 基本语法:

	



  
    	分类展示不同形式的选择日期
  
 
 	
日期与时间类型输入框:





月份与星期类型输入框:





日期时间型输入框:





小白入门之HTML--第二章 表格和表单_第20张图片

3.9.10.4 数字类型

​ 如果要在HTML5中输入整数,有两种数字类型可以实现number和range,这两种类型的属性都是一样的,唯一不同之处在于页面中的展示形式。

​ 基本语法:






	数字表单


	
输入0—100之间的数字:

输入10-50之间的数字(步长为2):

小白入门之HTML--第二章 表格和表单_第21张图片

3.9.10.5 color类型

​ HTML5提供了type为color的input表单,打破了以前设计网页时,如果想要任意选择一种颜色,必须依赖编辑工具的帮助。用户使用color新型表单控件可以通过鼠标在调色板上自由的选择颜色。

​ 基本语法:






	color


	
选择颜色:

小白入门之HTML--第二章 表格和表单_第22张图片

3.9.10.6 filedset控件组

标记用于对同一个表单中的控件进行分组,也可以将一个网页上的不同表单进行分组,标记与
标记搭配使用,标记可以为该控件组定义一个标题。

​ 基本语法:

控件组的标题 ……



	控件组


	
用户登录
用户名:

密 码:

小白入门之HTML--第二章 表格和表单_第23张图片

3.9.11 通用的表单属性

​ 在上一节已经讲了很多HTML5新增的常用的表单元素和属性,在这一节里将继续了解几个很有特点的新属性,这些新属性是input标记的常用的公用属性。如下表所示。

小白入门之HTML--第二章 表格和表单_第24张图片

3.9.11.1 autofocus 属性

autofocus属性可以让页面的某个表单元素在页面加载完成后自动地获得焦点。

​ 基本语法:

	




	控件组


	
用户登录
用户名:

密 码:

小白入门之HTML--第二章 表格和表单_第25张图片

3.9.11.2 multiple 属性

multiple属性适用于file类型或者select的 标记。multiple属性设置了这种输入框可以同时选中多个输入值。

​ 基本语法:

	




	多选下拉框


	
选择课程:

 

3.9.11.3 placeholder 属性




	文本框提示语句


	
邮箱地址:

小白入门之HTML--第二章 表格和表单_第26张图片

3.9.11.4 required 属性

required属性是一个可用于各种表单的通用属性,该属性的作用是检测输入的内容是否为空,但不负责验证数据是否合法。

​ 基本语法:

	




	文本框提示语句


	
邮箱地址:

 

3.9.11.5 pattern 属性

pattern属性的作用相当于给input输入域加上一个验证模式,这个验证模式(pattern)是一个正则表达式。在提交时,会将输入框中的内容与表达式进行匹配,如果不符,则提示错误信息。

​ 基本语法:

	




	input元素中pattern属性的使用


	
pattern属性:输入用户名:
以字母开头,包含字符或数字和下划线,长度在6~8之间

 

 

4.本章总结

4.1 总结本章知识点

​ 本章学习了表格和表单的相关标签

4.2 面试题答案

4.2.1 常用的表格标签

​ 常用的表格标签有table,tr,th,td,caption。

4.2.2 常用的表单标签

​ 常用的表单标签有form,input,select,textarea。

4.3 下一章内容

​ 下一章我们要学习CSS样式的基本使用。

5.练习题

5.1 使用表格实现如下效果

小白入门之HTML--第二章 表格和表单_第27张图片

5.2 完成如下学生信息表

小白入门之HTML--第二章 表格和表单_第28张图片

5.3 完成如下表单效果

小白入门之HTML--第二章 表格和表单_第29张图片

5.4 表单综合练习

小白入门之HTML--第二章 表格和表单_第30张图片

 

你可能感兴趣的:(小白入门之HTML--第二章 表格和表单)