html5css3移动端页⾯表单,HTML5+CSS3前端⼊门教程---从0
开始通过⼀个商。。。
本教程案例在线演⽰
免费配套视频教程
教程配套源码资源
表格
table标签(表格)、
tr标签(⾏)、
td标签(标准单元格)、
caption标签(标题)、
th标签(表头单元格)。
为了更深⼀层对表格进⾏语义化，HTML引⼊了thead、tbody和tfoot这三个标签。
这三个标签把表格分为三部分：表头、表⾝、表脚。
table 表格
caption 标题
thead 表头(语义划分)
tbody 表⾝(语义划分)
tfoot 表尾(语义划分)
tr ⾏
th 表头单元格
td 表格单元格
姓名语⽂英语数学
⼩明808080⼩红909090⼩杰100100100平均909090
image
表格样式美化
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 6px;
color: blue;
}
给表格添加边框，设置字体颜⾊，
以及给单元格设置⼀些padding
image
表单
image
表单就是收集⽤户信息的，就是让⽤户填写的、选择的。
欢迎注册本⽹站
所有的表单内容，都要写在form标签⾥⾯
form是英语表单的意思，form中间可以添加⽂本框、密码框、单选按钮、复选框、下拉列表、按钮、⽂本域等内容
1.⽂本框
2.密码框
3.单选按钮
男 ⼥
input的type的值如果是radio就是单选按钮。html ul标签
需要注意的是必须要有相同的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就是“复位”“重置”的意思，可以重置前⾯各个表单元素中填写的值。
只读和禁⽤
项⽬实战
制作商品搜索表单
image
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 Document

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。