智能表单的运用

智能表单为HTML5新增的内容

一、智能表单常用的几种属性：

1. value:设置文本框里的默认值
2. placeholder:占位符（不用删）
3. required:设置必填字段
4. disabled:禁止用户填写或点击
5. novalidate:取消表单验证
6. password:密码框
7. autofocus：光标聚集
8. pattern:正则，设置文本框里面的内容所匹配的格式
9. autocomplete:自动完成
10. file:文件上传
11. datetime-local:日期
12. multiple:支持多选,允许上传多个文件

二、使用方法

代码如下（示例）

<form action="" method="GET" id="form1">
<p>   
  <label>用户名：</label>

  <input type="text" name="user1" placeholder="请输入用户名"
   required autofocus pattern="^[\u4e00-\u9fa5]{0,}$">
</p>
<p>密码框：<input type="password" name="pwd" placeholder="请输入密码"disabled></p>
<!-- multiple:支持多选,允许上传多个文件 -->
<input type="file" multiple name="">
<input type="submit" value="提交" >
<input type="button" value="普通" disabled>
<input type="button" value="按钮" >
</form>

form:指定表单以外的元素跟随提交的表单id
<input type="text" name="user2" form="form1">
<form action="" method="GET">
<p>网址：<input type="url"></p>
<p>email邮箱地址：<input type="email"></p>
<!-- step:控制数量的变化步幅 -->
<p>数量：<input type="number" value="0" step="2" min="0" max="50"></p>
<!-- 表示范围的滑块 -->
<p>
  范围：0 <input type="range" value="10" min="0" max="100" step="10"> 100
</p>
<p>
  颜色：<input type="color" name="">
</p>
<p>
  日期：<input type="datetime-local">
</p>
<p>
  月份：<input type="month">
</p>
<p>
  日期：<input type="date">
</p>
<p>
  周：<input type="week">
</p>
<p>
  时间：<input type="time">
</p>
<p>
  省份：<select name="" id="">
    <option value="">河南</option>
    <option value="">河北</option>
    <option value="">蒙古</option>
    <option value="">新疆</option>
  </select>
</p>
<p>
  身份：<input type="text" list="person">
  <datalist id="person">
    <option value="">司机</option>
    <option value="">警察</option>
    <option value="">小学生</option>
    <option value="">喷子</option>
  </datalist>
</p>
<p>
  <select name="" id="">
    <option value="">中国</option>
    <option value="">巴基斯坦</option>
    <option value="">美国</option>
    <option value="">日本</option>
  </select>
</p>
<!-- label文本提示 -->
<p>
  网址：<input type="text" list="site">
  <datalist id="site">
    <option value="www.baidu.com" label="百度网址"></option>
    <option value="www.foidx.com" label="百度"></option>
  </datalist>
</p>
<output>结果输出</output>
<input type="submit" value="提交">