失败是通往成功的桥梁

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