HTML5 表单

一、HTML5 输入类型

• HTML5 新的 Input 类型:

   email: 输入合法的邮箱地址
   url：  输入合法的网址
   number： 只能输入数字
   range： 滑块
   color： 拾色器
   Date pickers (date, month, week, time, datetime, datetime-local) 日期选择器
   date：选取日、月、年
   month：选取月、年
   week：选取周和年
   time：选取时间（小时和分钟）
   datetime：选取时间、日、月、年（UTC 时间）
   datetime-local：选取时间、日、月、年（本地时间）
  

  例子：

  <form action="" methods="" id="">
  	<input  type="email">
  	<input  type="date">
  	<input type="submit" value="提交">
  </form>
  

  效果展示：
  

• HTML5 的新的表单元素：

  datalist：输入域的 list 属性值 = datalist 的 id属性值
  keygen：是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。提供一种验证用户的可靠方法。目前浏览器不支持。
  output：元素用于不同类型的输出。
  

  datalist例子：

  <form action="" methods="" id="">
  	<input type="text" name="" id="" list="abc">
  
        <datalist id="abc">
            <option value="datalist1"></option>
            <option value="datalist2"></option>
        </datalist>
  
  	  <input type="submit" value="提交">
  </form>
  

  效果展示：
  

• HTML5 的新的表单属性
  1、新的 form 属性：

  autocomplete=on | off          自动完成
  novalidate=true | false        是否关闭校验
  

  2、新的input属性:

  autocomplete：自动完成
  autofocus：自动获取焦点
  form：属性规定输入域所属的一个或多个表单
  表单重写属性有：
  formaction - 重写表单的 action 属性
  formenctype - 重写表单的 enctype 属性
  formmethod - 重写表单的 method 属性
  formnovalidate - 重写表单的 novalidate 属性
  formtarget - 重写表单的 target 属性
  height 和 width：高和宽
  list：list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
  min, max 和 step：最小值，最大值，步长
  multiple ：多选
  pattern (regexp) ：用于验证input域的正则表达式
  placeholder：占位符  （提示信息）
  required：必填项
  

  例子：

  <form action="test.php" methods="get" id="test" autocomplete="on">
          
          <input type="text" placeholder="datalist" name="" id="abc" list="abc">
  
          <datalist id="abc">
              <option value="datalist1"></option>
              <option value="datalist2"></option>
          </datalist>
  
          <input type="email" placeholder="请输入您的email" name="emm" id="" autofocus required>
          
          <select name="smm" id="" multiple>
              <option value="aa">111</option>
              <option value="bb">222</option>
              <option value="cc">333</option>
          </select>
          <input type="submit" value="提交">
      </form>
  

  效果展示：