表格与表单

表格

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
        
    

效果图

表格样式美化

效果图

表单

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

所有的表单内容，都要写在form标签里面

xx是服务器的域名或者网址是要提交到服务器的内容
1.文本框


placeholder提示信息，当开始输入信息时消失
2.密码框

3.单选按钮
男
女

input的type的值如果是radio就是单选按钮。
需要注意的是必须要有相同的name属性，单选按钮才能互斥。
也就是说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.按钮

(1)普通按钮

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

(2)提交按钮

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

(3)重置按钮

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

练习制作调查问卷

    
    
    


American Metric 电子产品调查表

    

    请输入您的姓名：
    
    

    请输入您的购买日期：年
    
        1月
        2月
        3月
        4月
    月
    
        1
        2
        3
        4
    日
    
    

    请输入您的电子邮件地址：
    
    

    您是否查看过我们的在线产品目录？
    是
    否
    
    

    如果查看过，您对哪些产品有兴趣购买？ （选择提供的产品）
    
    

     大屏幕电视机
     音频设备
     视频设备
     相机
    
    

    在填写订单之前，您还有什么问题、意见或建议？
    
    您的输入：
    

    
    
    

给每一个标签都放在div里是因为可以独立的一行的显示内容