自己总结的有关表单的一些基础知识....表单的类型和属性......

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; };

要同时加上这两句代码才能把默认样式给清除了；