前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

表格

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

    

    

表格样式美化

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

表单

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

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

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

2.密码框

3.单选按钮

男 女

input的type的值如果是radio就是单选按钮。

需要注意的是必须要有相同的name属性，单选按钮才能互斥。

label标签

 
男 

女 

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

5.4.复选框

 睡觉 
 吃饭 

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

5.下拉列表

    吃饭
    睡觉
    打豆豆
 

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

6.文本域

cols属性表示columns“列”，

rows属性表示rows“行”。

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

7.按钮

普通按钮

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

提交按钮

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

重置按钮

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

只读和禁用

项目实战

制作商品搜索表单

search-form.css

.search{
  height: 40px;
  width: 420px;
  margin: 0 auto;
  margin-top: 60px;
}
.search .input{
  border: 3px solid red;
  width: 300px;
  height: 36px;
  font-size: 20px;
}
.search .btn{
  height: 44px;
  width: 100px;
  border:0;
  background-color: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-left: -4px;
  vertical-align: top;
  letter-spacing: 6px;
}

youlu-search-form.html