html设置input圆角矩形_html5中关于input用法的改变

① 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不支持