html5中关于input使用方法的改变

測试环境：Firefox 10.0、Safari 5.1、Opera 11.61， Chrome 14.0.835.202

自己測试的时候都有写在form表单里，有提交button验证。由于对博客使用还不是非常熟练，发博文的时候仅仅有舍弃submit验证。大家在本地练习的时候能够写上submit验证，看各个浏览器的对这些新增的类型验证的差别。

一、新增的属性和属性值

在HTML5中，大幅度地添加与改良了input属性的种类，能够简单的使用这些属性来实现之前须要使用JavaScript才干实现的。对于html5中新增的input属性支持得最多、最全面的是Opera浏览器。

• 1. type属性

  html5中input的type属性增的可取值新增几种，对于不支持这几种新增值的浏览器会统一解析为text类型。

  url, email, date, time, datetime, month, week, number, range, search, tel, color

  • ① url类型

    url类型的input元素是一种专门用来输入url地址的文本框。提交时假设该文本框中的内容不是url地址格式的文字，则不同意提交。

    非url提交时Firefox、Chrome 提示错误，Opera自己主动将url框中值转化为url格式，ie9和safari不支持，正常提交

  • ② email类型

    email类型的input元素是一种专门用来输入email的文本框。提交时假设该文本框中的内容不是email地址格式的文字则不同意提交，可是它并不检查email地址是否存在，提交时该文本框能够为空，除非加上了 required 属性。
    
    email类型的文本框具有一个 multiple 属性——它同意在该文本框中输入一串以逗号切割的email地址。当然并不强制要求用户输入该email地址列表。

    Firefox、Chrome、Opera 非email提交时提示错误，支持required，ie9和safari不支持，正常提交

  • ③ date类型

    date类型的input元素是深受开发人员喜爱的一种元素我们也常常看到网页中要求我们输入的各种各样的日期，比如生日、购买日期、订票日期等。date类型的input元素以日历的形式方便用户输入。当该文本框获取焦点时，显示日历，能够在日历总选择日期进行输入。

    Opera点击弹出一个日历下拉框，但不同意手动输入。Chrome、Safari表现一致，但Safari在提交时没有验证，在输入框右側有上下两个button，点击加减天，Firefox、ie9不支持

  • ④ time类型

    time类型的input元素是一种专门用来输入时间的文本框，而且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器。

    Opera类似系统的时间设置框。Chrome、Safari表现一致，但Safari在提交时没有验证，在输入框右側有上下两个button，点击加减分钟，Firefox、ie9不支持

  • ⑤ datetime类型

    datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，而且在提交时会对输入的日期和时间进行有效性检查。

    Opera支持的最好，非常类似date和time的组合。Chrome、Safari表现一致，但Safari在提交时没有验证，在输入框右側有上下两个button，点击加减分钟，Firefox、ie9不支持

  • ⑥ datetime-local类型

    datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，而且在提交时会对输入的日期和时间进行有效检查。

    Opera中和datetime表现上的差别就是末尾少了个UTC。Chrome、Safari表现一致，但Safari在提交时没有验证，Firefox、ie9不支持

  • ⑦ month类型

    month类型的input元素是一种专门用来输年月份的文本框，而且在提交时会对输入的月份进行有效检查。

    Opera中和date类似，仅仅是仅仅能选择到月份。Chrome、Safari表现一致，但Safari在提交时没有验证，Firefox、ie9不支持

  • ⑧ week类型

    week类型的input元素是一种专门用来输周号的文本框，而且在提交时会对输入的周号进行有效检查。

    Opera提供下拉选择，不同意手动输入。Chrome、Safari表现一致，但Safari在提交时没有验证，Firefox、ie9不支持

  • ⑨ number类型

    number类型的input元素是一种专门用来输数字的文本框，而且在提交时会对输入的内容是否为数字。它们具有 min、max 与 step 属性。 带有数值控制button，以控制其数值，使之不超过最大值于最小值，同一时候在点击该数值控制button时，当中的数值会按step属性进行增减，当然也能够直接在当中输入数字。

    Opera、Chrome、Safari表现一致，但Safari在提交时没有验证，Firefox、ie9不支持

  • ⑩ range类型

    range类型的input元素是一种仅仅同意输入一段范围内数值的文本框，它具有min属性与max属性，能够设定最小值与最大值（默觉得0与100），它还具有step属性，能够制定每次拖动的维度，用滑动条的方式进行值的制定。

    Opera中滑条带刻度、Chrome、Safari不带，Firefox、ie9不支持

  • ⑾ search类型

    search类型的input元素是一种专门用来输入搜索关键词的文本框的文本框。search类型与text类型只在外观上有却别。在Safari浏览器中，它的外观为操作系统默认的圆角矩形文本框，但这个外观能够用css央视表进行改写。在其它浏览器中，TA的外观暂与text类型的文本框外观同样，但能够用css样式表进行改写。（-webkit-appearance:textfield）

    Safari和Chrome在输入框有内容时会默认在输入框右边出现一个×

  • ⑿ tel类型

    tel类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字（由于很多电话号码通常带有其它文字），譬如86-010-86670831.可是开发人员能够通过 pattern属性来制定对于输入的电话号码格式的验证。

    Safari和ie不支持

  • ⒀ tel类型

    color类型的input元素用来选取颜色，它提供了一个颜色选取器。眼下它仅仅在Opear浏览器与BlackBerry浏览器中被支持。

    Safari和ie不支持

• 2、require

  定义输入字段的值是否是必需的,可取值true 和 false 。当使用下列类型时无法使用：hidden, image, button, submit, reset

  Safari和ie9 不支持

• 3、list

  引用 datalist 元素。假设定义，则一个下拉列表可用于向输入字段插入值。

  Webpage:

  仅Opera支持

• 4、autocomplete

  autocomplete 属性规定 form 或 input 域应该拥有自己主动完毕功能。

  凝视：autocomplete 适用于 form 标签，以及下面类型的 input 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
  
  
  
  当用户在自己主动完毕域中開始输入时，浏览器应该在该域中显示填写的选项：

  First name: 
  
  Last name: 
  
  E-mail:

• 5、autofocus

  可取值：true 和 false

  当页面载入时，使输入字段获得焦点。凝视：type="hidden" 时，无法使用。

  除了ie9 都支持

• 6、multiple

  multiple 属性规定输入域中可选择多个值。适用于下面类型的 input 标签：email 和 file。

• 7、pattern

  pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正則表達式。适用于下面类型的 input 标签：text, search, url, telephone, email 以及 password。

  Safari、ie9不支持

• 8、palceholder

  placeholder 属性提供一种提示（hint），描写叙述输入域所期待的值。适用于text, search, url, telephone, email 以及 password。

  ie9 不支持

• 9、height 和 width 属性

  height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。仅仅适用于image类型的input

  全支持

顺便提一下、output

在HTML5中，追加了新的元素output。output元素定义不同类型的输出，比方计算结果或脚本的输出。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它加入form属性。

请输入两个数字 *  = 0

关于form元素上oninput中的text1.value以及text2.value，换成ID.value的形式也能够正常工作，即Text1.value和Text2.value。 output既然具有name属性，只是却不是表单控件，并不能被提交到server。

假设你的浏览器是Chrome、Safari、Opera、Firefox在两个输入框中输入数值后就会看到结果

html5中input不再支持align、size属性。