表格与表单

表格

table标签（表格）、tr标签（行）、td标签（标准单元格）、caption标签（标题）、th标签（表头单元格）。

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。
标签 说明
table 表格
caption 标题
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表尾（语义划分）
tr 行
th 表头单元格
td 表格单元格

    
考试成绩表
    
    

    

        
姓名
        
        
语文
        
        
英语
        
        
数学
        
    

    
    
    

    

        
小明
        
        
80
        
        
80
        
        
80
        
    
    

        
小红
        
        
90
        
        
90
        
        
90
        
    
    
    

        
小杰
        
        
100
        
        
100
        
        
100
        
    
    
    
    
    

    

        
平均
        
        
90
        
        
90
        
        
90
        
    
    
    
    

image.png

表格样式美化

给表格添加边框，设置字体颜色，
以及给单元格设置一些padding

image.png

练习制作商品表格

image.png

表单

image.png

表单就是收集用户信息的，就是让用户填写的、选择的。

 
欢迎注册本网站
    
 所有的表单内容，都要写在form标签里面

form是英语表单的意思，form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容
1.文本框

2.密码框

3.单选按钮

男 女

input的type的值如果是radio就是单选按钮。
需要注意的是必须要有相同的name属性，单选按钮才能互斥。

label标签

 男  女 

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框
4.复选框

 睡觉 
 吃饭 

复选框，最好也是有相同的name（便于服务器端收集用户选中的信息）。

5.下拉列表

    吃饭
    睡觉
    打豆豆
 

select就是“选择”，
select标签和ul、ol、dl一样，都是组标签
option“选项”。

6.文本域

cols属性表示columns“列”，
rows属性表示rows“行”。
值就是数字，表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字，一般不需要写字。

7.按钮

普通按钮

button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

提交按钮

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击，表单会提交到服务器。

重置按钮

reset就是“复位”“重置”的意思，可以重置前面各个表单元素中填写的值。

只读和禁用

image.png

项目实战

制作商品搜索表单

image.png

课后作业

1.制作搜索框（表单样式）
2.制作个人信息（ 表单）
3.制作课程表（表格）