html5中关于input用法的改变

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

自己测试的时候都有写在form表单里，有提交按钮验证。因为对博客使用还不是很熟练，发博文的时候只有舍弃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在提交时没有验证，在输入框右侧有上下两个按钮，点击加减天，Firefox、ie9不支持

  • ④ time类型

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

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

  • ⑤ datetime类型

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

    Opera支持的最好，很类似date和time的组合。Chrome、Safari表现一致，但Safari在提交时没有验证，在输入框右侧有上下两个按钮，点击加减分钟，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 属性。带有数值控制按钮，以控制其数值，使之不超过最大值于最小值，同时在点击该数值控制按钮时，其中的数值会按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属性，不过却不是表单控件，并不能被提交到服务器。

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

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