表单元素
一系列元素，主要用于收集用户数据
input元素
重点
输入框
- type属性：输入框类型
text 表示文本框
password 表示密码框
date 表示日期选择框，存在兼容性问题，新的可以，旧的不行 是一个可替换元素
search 表示搜索框，具体在手机端使用时键盘中的换行会换成搜索
range 表示在一个范围之内进行选择，会呈现一个滑块，具体数值要通过js来实现(存在min和max属性)
color 表示颜色选择框
number 表示数字输入框，有min和max属性，step表示数字更改是一个一个还是十个或其他
checkbox 表示多选框，也有name属性（默认选中使用布尔属性checked）
radio 表示单选框 建议加name属性，确认哪两个属于一组（默认选中使用布尔属性checked）
file 表示选择文件
- value属性：输入框的值，会出现在输入框的最前面，用户输入文字会紧跟在初设的value后面
- placeholder属性：表示提示的文本，文本框没有内容时显示，用户输入之后内容之后就会消失
input元素可以用于制作按钮
当type值为reset(重置)、submit(提交)、button(普通)时，input表示按钮，value可以更改按钮上面的字
select元素
重点
表示下拉列表选择框，一般默认单项
mutiple属性表示多选
通常和option元素(select元素的子元素，具体关系类似于ul和li)配合使用
布尔属性selected表示元素被选中，即默认的那个元素就是被选中的元素
optgroup元素表示分组，label属性表分组的名字
你喜欢的有哪些
<select multiple>
<optgroup label="动物">
<option>猫猫</option>
<option>狗狗</option>
<option>兔兔</option>
</optgroup>
<optgroup label="食物">
<option>火锅</option>
<option>烧烤</option>
<option>炸鸡</option>
</optgroup>
</select>
textarea元素
重点
文本域，表示多行文本框,是可替换元素，没有空白折叠
同样拥有placeholder
cols表示横向上有多少列（即一行可以书写多少个字），rows表示纵向的，一般建议使用css书写textarea的宽高
按钮元素
重点
button元素
type属性:reset,submit,button（建议）,默认值为submit
表单状态
重点
readonly属性：布尔属性，表示只读状态，不会改变表单显示样式
disabled属性：布尔属性，表示是否禁用，会改变表单显示样式
和表单元素连用的元素
label
重点
普通元素，通常配合单选和多选框使用
-
显示关联
-
可以通过for属性，让lable元素关联某一个表单元素，for属性书写的是表单元素id的值
-
隐示关联
-
直接把input表示的单选或者多选框放在label元素中
-
label里面不允许放div元素
datalist
表示数据列表
该元素本身不会显示到页面，通常用于和普通文本框配合，类似通常搜索框的提示
子元素是option,option的value属性表示当你按了回车后，填写在文本框里面的内容显示的是value的值，而不是option元素包含的内容，value和option元素包含的内容是都可以被用于检索的
请输入你常用的浏览器
<input type="text" list="userAgent">
<datalist id="userAgent">
<option value="Chrome">谷歌浏览器</option>
<option value="IE">ie浏览器</option>
<option value="Opera">欧鹏浏览器</option>
<option value="Safari">苹果浏览器</option>
<option value="fire fox">火狐浏览器</option>
</datalist>
form元素
通常，会将整个表单元素，放置到form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器
使用时必须有name属性
action属性表示把表单内容提交给具体哪个服务器，默认是本页面
method属性表示提交方式
对静态页面的开发用处不大
fieldset元素
表示表单分组
子元素legend表示分组标题
美化表单元素
新的伪类选择器
- focus
表示所有元素聚焦时的样式
outline: -webkit-focus-ring-color auto 1px;
outline,表示外边框，第一个是颜色，auto表示外边框的style是自动的，而不是实现实线或者其他，当设为auto之后，后面的1px就没有用
outline-offset表示外边框的偏移量，可以为正也可以为负
- checked
表示单选或多选框被选中的样式
常见用法
-
重置表单元素样式
-
设置多行文本框是否允许调整尺寸
textarea拥有的resize属性
- both（默认值）时，表示文本框在横向纵向都可以调节
- none表示在两个方向上都不能调整尺寸
- horizontal表示只能在水平方向上进行调整尺寸
- vertical表示只能在纵向上调整尺寸
- 文本框边缘到内容的距离
1） 使用padding，设置内边距
2） 使用text-indent表示首行缩进
- 控制单选和多选的样式
先把图标样式设置好，把那个放在label里面的span中，最后把type="radio"隐藏，即display:none；
例：
.radio-item .radio{
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
.radio-item input:checked+.radio{
border-color: #008c8c;
}
.radio-item input:checked~span{
color: #008c8c;
}
.radio-item input:checked+.radio::after{
content:"";
display: block;
width: 5px;
height: 5px;
background:#008c8c;
margin-left: 3px;
margin-top: 3px;
border-radius:50%;
}
.radio-item input[type="radio"]{
display: none;
}
<p>
请选择性别：
<label class="radio-item">
<input name="gender" type="radio">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input name="gender" type="radio">
<span class="radio"></span>
<span>女</span>
</label>
</p>
最终效果
