版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35770417/article/details/77771902
1.表单
<form></form>用来收集用户的信息；申明信息收集的区域；
2.表单元素
（1）姓名：<input type="text"></input> 单行文本框；输入框
（2）密码：<input type="password"></input> 密码框
（3）性别：<input type="radio"></input> 单选按钮
（4）地区：<select> 列表菜单，下拉框；
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>深圳</option>
</select>
（5）留言：<textarea></textarea> 文本区域，多行文本框；
（6）兴趣爱好：吃<input type="checkbox"/> 复选框
玩<input type="checkbox"/>
学习<input type="checkbox"/>
（7）图像域<input type="image" src="img/pic1.jpg"/>
（8）按钮： <input type="button" value="按钮"/>
（9）提交：<input type="submit" />
（10）重置：<input type="reset" />
华丽丽的分割线：下面的不重要
（11） 上传域<input type="file">
（12）隐藏域 <input type="hidden">
3.表单默认样式清除：
form，input{padding：0；margin：0；}
textarea{padding：0；resize:none;}
input里面的按钮清除默认样式：input { border:none;background:none; }
4.
checked 默认选中
disabled 禁用
5.给表单添加一个标签/标注：<label></label>
注意在label里面用到了
for
,在表单元素里面用到了
id
；
<label for="eat">吃</label><input type="checkbox"/ id="eat">
6.和表单相关的问题：
（1）内阴影时要清除：
input{ border：0 none； }
input{ background：none；border：none； }
（2）解决input间距问题：IE6,7下input会有间距问题：margin：-1px ;
input{ margin:-1px; }
（3）控制输入长度：maxlength="15";(但是number不支持这个....)
（4）IE6下input内容超出，背景滚动问题：
①maxlength控制内容输入长度；
②div模拟背景写给div；
7.表单的类型(H5新增)：
（1）<input type="
email
"/> 只允许输入E-mail类型的文本框；若输入格式不正确，在提交时会显示错误提示
（2）<input type="
url
"/> 只允许输入url的文本框，（移动端调出键盘）
；输入格式不正确的话，在提交时会显示错误提示；
（3）<input type="
tel
"/> 在移动设备上会显示配合输入数字的键盘；
（4）<input type="
number
"/>只允许输入数字的文本框；
（5）<input type="
search
"/> 一般用于搜索；
（6）<input type="
range
"/> 范围：限定输入范围的输入框（可拖动划块）
value，min，max，step（步长，每拖动一下走几步）
（7）<input type="
color
"/>取色器，颜色输入框；
（8）<input type="
date
"/>年月日的选取（
datepicker日期选择器
）
（9）<input type="
month
"/>选取年月日
（10）<input type="
week
"/>选取周
（11）<input type="
time
"/>选取时分
（12）<input type="
datetime
"/>浏览器不支持UTC时间
（13）<input type="
datetime-local
"/>本地时间
-webkit-appearance：none；
8.表单的相关属性
<input type="text"
placeholder
="请输入"/>
（1）placeholder 输入提示(用户未输入之前提示用户将要输入的内容，当输入时就消失)
（2）focus 页面载入以后自动获取焦点（不要滥用，一般来说一个页面只有一个）:使用方法：oDiv.focus（）；
（3）autocomplete（值为on/off）自动完成，当用户输入时会根据之间保存的输入内容显示一个列表；
（4）form=“值”；所属form的id值，表示申明此表单元素从属于指定form；给<form></form>加一个id名；
（5）formaction；表单提交的目标地址；
（6）formmethod；表单提交数据的方式（get/post）
之前版本中只能对同一个表单内的表单元素，用统一指定的方式提交到统一指定的目标；
（7）list=“”；给用户输入提供一个选项列表，如果列表不存在用户输入内容，则允许用户自行输入；
（8）required;必填项；若用户输入为空，则显示错误提示；
（9）pattern=“”；正则表达式，提交时按照正则表达式的规则对输入内容进行验证，不符合规则时显示错误提示；
（10）<input type="file" accept="img/
png
"/>
accept后面的可以是"img/*","vedio/*";
accept="";限制上传类型，多个是用逗号分隔；
9.清除表单的中select的默认样式 ( 就是那一个尖尖 )：
select{ appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
};
select::-ms-expand{ display:none; };
要同时加上这两句代码才能把默认样式给清除了；