【CSS表单form】
CSS表单form
表单（form）的作用
主要负责数据的采集，作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置，常常用于用户注册、登录、投票等的制作。
form的属性
action：表单提交的地址
method：表单数据提交的方法/形式
get：明文发送（可见）
post：暗文发送（不可见）
第一种写法：
<label for="name">姓名：</label>
<input type="text" id="name">
第二种写法：
<label for="phone">电话：
<input type="text" id="phone">
</label>
id属性：用来对元素进行标识的且id必须唯一；
for属性：指定与label关联的标签元素的id。
表单的元素
<form>表单是一个包含表单元素的区域；
<fieldest>元素可将表单内的相关元素分组；（不常用）
<lefend>标签为 fieldset 元素定义标题；（不常用）
<label>定义控制的标签，为input定义标注；
<input>定义输入域；
<select>可以创建单选或者多选菜单；
<option>元素定义下拉列表中的一个选项；
<textarea>标签定义多行的文本输入；
<button>标签定义一个按钮。
input类型
文本域<text>： 定义用户可输入文本的单行输入框；
密码框<password>：定义密码字段，密码中的字符会被掩码；
单选钮<radio>：定义单选按钮；
复选钮<checked>：定义复选框；
隐藏域<hidden>：定义隐藏字段；
文件上传<file>：定义文件上传按钮；
按钮<button>：定义重置按钮、提交按钮、一般按钮。
button与input的辨析
<button>提供了更为强大的功能和更丰富的内容；
button元素内部可以放置内容，比如文本或图像；
在HTML表单中使用input元素来创建按钮。
button按钮的类型
submit是提交按钮（除了IE以外浏览器的默认值）；
button是可点击的按钮（IE浏览器的默认值）；
reset是重置按钮（用于清除表单数据）。
表单嵌套规则
form元素不能够直接包含input元素。
原因在于input元素属于行内元素，form元素仅仅能够包含块状元素。
表单的基本属性
name属性：表单提交的数据都是标签的name属性；
id属性：用来对元素进行标识的且id必须唯一；
for属性：指定与label关联的标签元素的id，如下：
<label for="MyName">我的名字</label>
<input id="MyName" type="text">
表单兼容
input 文本框、密码框的兼容处理（去除聚焦线）
.类名 input {
outline: none;
}
去除谷歌浏览器input默认背景颜色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
textarea的尺寸控制
.类名 textarea {
resize: both; //默认值，横纵向拉伸
resize: none; //取消拉伸
resize: vertical； //只能够纵向拉伸
resize: horizontal； //只能够横向拉伸
}
表单的特有属性
禁用属性：readonly(只读)、disabled(禁止)；
checked：在页面加载时被预先选定的 input 元素，该属性与单选框、复选框结合使用；
selected：是<option>标签的一个属性，该属性规定在页面加载时预先选定该选项。
disabled（禁止）与readonly（只读）两者区别：
1、使用范围不同：
disabled适用于所有的表单元素；
readonly只适用于输入文本的输入项（输入框、密码框、多行文本、文件输入框file）
2、文本框聚焦状态：
disabled不能使文本框获取聚焦；
readonly文本框可以聚焦。
