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

本教程案例在线演示

有路网PC端 有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

表格

table标签&＃xff08;表格&＃xff09;、 tr标签&＃xff08;行&＃xff09;、 td标签&＃xff08;标准单元格&＃xff09;、 caption标签&＃xff08;标题&＃xff09;、 th标签&＃xff08;表头单元格&＃xff09;。

为了更深一层对表格进行语义化&＃xff0c;HTML引入了thead、tbody和tfoot这三个标签。

这三个标签把表格分为三部分&＃xff1a;表头、表身、表脚。

table 表格

caption 标题

thead 表头&＃xff08;语义划分&＃xff09;

tbody 表身&＃xff08;语义划分&＃xff09;

tfoot 表尾&＃xff08;语义划分&＃xff09;

tr 行

th 表头单元格

td 表格单元格

表格样式美化

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

表单

表单就是收集用户信息的&＃xff0c;就是让用户填写的、选择的。

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

2.密码框

3.单选按钮

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

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

label标签

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

5.4.复选框

复选框&＃xff0c;最好也是有相同的name&＃xff08;便于服务器端收集用户选中的信息&＃xff09;。

5.下拉列表

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

6.文本域

cols属性表示columns“列”&＃xff0c;

rows属性表示rows“行”。

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

7.按钮

普通按钮

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

提交按钮

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

重置按钮

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

只读和禁用

项目实战

制作商品搜索表单

search-form.css

youlu-search-form.html