HTML5资料之表单

◆ 表单类型：

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

• email：输入email格式，会校验是否有@
• tel：手机号码
• url：只能输入url格式，会校验是否有http:
• number：只能输入数字
• search：搜索框，带有x号
  
• range：范围，滑动条
  
• color：拾色器
  
• time：时间
  
• date：日期 不是绝对的
  

–datetime：时间日期

• month：月份
  
• week：星期
  

◆ 表单元素：

1.<datalist>：数据列表，与input 配合使用

智能下拉菜单，可以模糊匹配，与select标签明显不同

<!--datalist-->
<input type="text" list="car" />
<datalist id="car">
    <option>宝马</option>
    <option>宝骏</option>
    <option>宝强</option>
    <option>宝宝</option>
    <option>奥迪</option>
    <option>奥迪奥</option>
    <option>迪奥</option>
</datalist>

<!--select-->
<select >
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
    <option>选项1</option>
</select>

2.<output>：输出信息

3.<keygen>：生成密钥的 用于表单安全传输

4.<meter>：度量器

• max：最大值
• min：最小值
• value：当前值
• low：低阈值（低于阈值度量器变色）
• high：高阈值（高于阈值度量器变色）

5.<progress>：进度条

• max：最大值
• min：最小值
• value：当前值
  

◆ 表单属性：

1.placeholder：提示文字（占位符）

在表单输入框中显示提示文字

2.autofocus：自动获取焦点

3.multiple：多选，上传多个文件

4.autocomplete 自动完成（填充的），在表单下方显示之前填写过的数据供选择，默认on开启，off为取消自动提示

5.novalidate：关闭自带的表单标签验证功能，可用于form标签

<form action="" novalidate>

6.required：必填项

7.pattern：自定义正则验证

 手机号:<input type="tel" name="tel" required="required" pattern="^(\+86)?1[3,5,8](\d{9})$">

注：1-4示例：

用户名：<input type="text" placeholder="例如：李狗蛋" autofocus name="userName" autocomplete="off" required/>

◆ 表单事件：

1.oninput：当用户输入时触发

2.oninvalid：当验证不通过是触发

可以用来设置验证不通过时的提示文字

obj.oninvalid=function(){
	his.setCustomValidity('亲，请输入正确的信息！');
}