从零开始学前端css

(3.1HTML5 属性变化)input

2017-01-10  本文已影响26人  越IT

●Input

·电子邮件Input类型

<input type=“email” name=“email”>

PC端无差距,移动端差异。

·统一资源定位符Input类型

<input type=“url” name=“url”>

只适用于Iphone手机

·电话号码Input类型

<input type="tel" name="tel">

仅在移动端有效果。浏览器均不支持


·数字Input类型

<input type="number" name="number">
number PC端效果.gif number手机端效果

●Date Pickers Input类型

Date——选取选取日、月、年
Month ——选取月、年
Week ——选取周和年
Time ——选取时间(小时和分钟)

Datetime——选取时间、日、月、年(UTC 时间)
Datetime-local ——选取时间、日、月、年(本地时间)

区别:
1.兼容性:
Datetime仅Safari和opera浏览器。
Datetime-local仅chrome、Safari和opera兼容。
2.一个本地时间,一个UTC时间

input(datepicker)PC端的效果.gif

·Date Pickers date Input类型

移动端仅仅在iPhone上有效果

<input type=“date” name=“date”>
iPhone端的date效果

·Date Pickers month Input类型

<input type=“month” name=“month”>
iphone端的month效果

·Date Pickers time Input类型

<input type=“time” name=“time”>
iphone端的time效果

·Date Pickers datetime Input类型

<input type=“datetime” name=“datetime”>
iPhone端的date效果

●其他input类型

·Range Input类型

<input type=“range” name=“range” min=“1” max=“10”>
range类型.gif

·Search Input类型

<input type=“search” name=“search”>

![Uploading color类型的效果_250337.gif . . .]

search类型效果.gif

·Color Input类型

<input type=“color” name=“color”>
color类型的效果.gif
上一篇 下一篇

猜你喜欢

热点阅读