Form中的几种输入类型
<input type=\公众email\"大众 multiple>
可以输入多个email
<input type=\"大众number\"大众 min=\"大众-4\"大众 max=\公众12\"大众>
限定数字大小
<input type=\"大众number\"大众 step=\公众2\"大众>
限定增减幅度
<input type=\"大众file\"大众 accept=\"大众image/\"大众>
文件输入,只接管图片文件
两种button的写法
<input type=\公众button\"大众 value=\"大众My Button\公众>
<button>My Button</button>
后一种写法的好处是可以给文件添加style
optgroup 给select的option分类
Form中用到的属性
type,name,id, for,value,checked,selected,
placeholder,min,max,step,maxlength,
multiple,pattern,required
<label for=\公众idname\"大众></label>
<input type=\公众text\"大众 disabled>
不能修正,不会提交到做事器
<input type=\"大众text\"大众 readonly value=\"大众value\公众>
不能修正,会提交到做事器
<input type=\"大众text\公众 hidden value =\"大众value\"大众>
用户看不见,会提交到做事器
<input type=\"大众text\公众 pattern=\"大众[A-Z]{3}\"大众>
正则表达式验证输入模式
Form的样式
1, input[type=\公众date\公众] +label{
color:orange;
}
将输入类型为日期的标签笔墨变为橙色
2, form中的不同type的input,纵然有相同的宽度,末了显示出来也不是一样宽,是由于默认的盒模型是content-size,办理的办法是修正为border-box
input, textarea, select {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
3,常日的样式写法对checkbox不起浸染,变通的方法有两种
3.1)用label标签checkboxbox标签包裹起来,再针对label撰写样式
<label for=\"大众blue\"大众><input id=\公众blue\公众 name=\"大众fav-color\"大众 type=\公众checkbox\公众 value=\"大众blue\"大众> blue</label>
3.2)让checkbox透明,然后针对checked和默认状态运用不同的背景图片
input[type=\公众checkbox\公众] + label {
background: url(checkbox-empty.png) left center no-repeat;
background-size: 1em 1em;
padding-left: 1.5em;
margin-left: -1.5em;
}
input[type=\"大众checkbox\"大众]:checked + label {
background: url(checkbox-checked.png) left center no-repeat;
background-size: 1em 1em;
利用背景图片的checkbox
3.3)运用样式让checkbox看起来像按钮
input[type=\公众checkbox\公众] {
opacity: 0;
width: 0;
margin: 0;
}
input[type=\公众checkbox\"大众] + label {
border: 2px solid #138d75;
background-color: #e9f7ef;
padding: 4px 10px;
border-radius: 7px;
display: inline-block;
width: 4em;
text-align: center;
}
input[type=\公众checkbox\"大众]:checked + label {
border-color: #a93226;
background-color: #f5cba7;
font-weight: bold;
}
像按钮的checkbox
4.运用伪类(pseudo class)
:checked :hover :active :valid :invalid :inrange :out-of-range :required :optional
