表格与表单

 
 
表格
 
 
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 
  
 
 
 
 
表格样式美化
 
 


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

    image 
  
 
 
 
 
练习制作商品表格
 
 
 
  
 
   
 
     
   
 
  
 
  

    image 
  
 
 
 
 
表单
 
 
 
  
 
   
 
     
   
 
  
 
  

    image 
  
 
 
 
 
表单就是收集用户信息的，就是让用户填写的、选择的。
 
 
 
欢迎注册本网站
    
 所有的表单内容，都要写在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 
  
 
 
 
 
项目实战
 
 
制作商品搜索表单
 
 
 
  
 
   
 
     
   
 
  
 
  

    image 
  
 
 
 
 



    
    
    
    



    

        
        
    




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