html 5的新增表单属性

 1、表单2.0——HTML5新增的input type：
email：在表单提交时提供了格式验证功能，要求@左右各有一个字符即可，错误提示信息可以定制，但外观无法定制（是窗口）
<input type="email">
number：呈现一个数字输入框，在提交时会验证数字格式，使用min、max、step指定最小值、最大值、步长
<input type="number" min="18" max="60" step="2">
url：提供了URL验证输入框，只要满足字母+冒号即可
<input type="url">
tel：提供了电话号码输入框，在手机浏览器中会弹出数字模拟键盘
<input type="tel">
search：显示一个搜索框，在手机浏览器中会在模拟键盘右下角显示“搜索”按钮
range：显示为一个滑块组件(数值选择组件)，使用min、max、step指定最小值、最大值、步长

<input type="range" min="18" max="60" step="2">

color：显示一个颜色选择器——浏览器使用操作系统自带的颜色选择框
date：这是最基本的日期选择器，你只能从日历中选择某个日期。——Internet Explorer 或 Firefox 不支持 <input type="date"> 元素。

month：显示一个月份选择器——Internet Explorer 或 Firefox 不支持 <input type="month"> 元素。
week：显示一个星期选择器——Internet Explorer 或 Firefox 不支持 <input type="week"> 元素。

datetime：显示既显示日期组件，又显示时间组件，其实就是“date”类型和“time”类型的组合。——Internet Explorer、Firefox 或者 Chrome 不支持 <input type="datetime"> 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

datetime-local：显示本地时间——Internet Explorer 或 Firefox 不支持 <input type="datetime-local"> 元素。
提示：上述四个输入框项目中暂时先别用——用jQuery插件代替即可。

2、表单2.0 —— 四个新的表单元素
   HTML5之前已有的表单元素——可与用户交互并提交：
input、select/option、textarea、button
  HTML5中新增的表单元素——不能与用户交互，不能提交，仅用于信息展示：
(1)datalist：数据列表，为某个输入框提供输入建议
    <datalist id="dish">
    <option>京酱肉丝</option>
    <option>鱼香肉丝</option>
             </datalist>
      <input list="dish">
(2)progress:进度条，有max、value的属性；
(3)meter刻度尺，度量衡
   通过不同的颜色值显示指定的数字在哪个范围“最优”、“合适”、“危险”范围：
   最优值在上下线之间：黄--绿--黄
   最优值在下限之下：绿--黄--红
   最优值在上限之上：红--黄--绿

<meter min="0" max="100" low="30" high="70" optimum="50" value="60"></meter>

min：最小值

max：最大值

low：合理值中最低限度，指下限

high: 合理值中最高限度，指上限

optimum:最合适的值

value：当前值 

(4)output:输出
  外观效果和普通的span一样。是语义标签，表示此处的内容是一个计算后的结果的输出
  <output>￥50.00</output>

3.表单2.0------表单元素的新属性
HTML4表单元素的属性：
   id,style,title,class,name,value,type,checked,selected,disabled
HTML5中表单元素的新属性
   （1）placeholder: 占位符；用于在输入框中显示提示文字，与value没有任何关系；placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
   （2）autofocus:规定在页面加载后文本区域自动获得输入焦点。
   （3）autocomplete:是否启用自动补全功能；autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers(包括date, month, week, time, datetime, datetime-local), range 以及 color。
autocomplete="off"; 关闭自动补全功能，默认是on
   （4）multiple：多个/多项
用于指定input type="file/email"可以省略多个输入项，使用英文逗号分隔;select标签也可以使用multiple属性；例如：<select  multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

（5）required:必填
      指定当前输入域内容不能为空；required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
（6）pattern:样式
   限定当前输入域中必须输入符合指定正则表达式的值；pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

（7）step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。
step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
（8）autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers(包括date, month, week, time, datetime, datetime-local), range 以及 color。
（9）checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
（10）size 属性规定下拉列表中可见选项的数目。
（11）min:最小值
    限定当前数字输入域中数值的最小值；

max:最大值

   限定当前数字输入域中数值的最大值，type为number

（12)minlength:最小长度
      限制当前输入域中字符最少个数-------不是h5标准属性
  maxlength:最大长度
    限制当前输入域中字符最大个数
注意：min/max 与minlength/maxlength的区别：min/max是数字域上的限制，只能限制数字的大小，而minlength/maxlength是文本域上的限制，是maxlength 、mixlength属性与 <input type="text"> 或 <input type="password"> 配合使用。

（12）disabled 属性规定应该禁用 input 元素。disabled 属性无法与 <input type="hidden"> 一起使用。
（13）height 、width属性只适用于 <input type="image">，它规定 image input 的高度。

   （14）form:表单
用于指定当前元素（放在表单外部）从属于哪个表单
<form action="" id="my-form">
   ........
</form>
<input type="" form="my-form">
*********************************************************************************