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：选取时间、日、月、年（本地时间）
  

  例子：

  效果展示：

  
  
  效果展示

• HTML5 的新的表单元素：

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

  datalist例子：

  效果展示：

  
  
  datalist效果展示

• 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：必填项
  

  例子：

  
          
          
  
          
  
          
          
          
              111
              222
              333
          
          
      
  

  效果展示：

  
  
  html5表单验证效果展示