美文网首页从零开始学前端css
(3.1HTML5 属性变化)input

(3.1HTML5 属性变化)input

作者: 越IT | 来源:发表于2017-01-10 22:26 被阅读26次

●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

相关文章

  • (3.1HTML5 属性变化)input

    ●Input ·电子邮件Input类型 PC端无差距,移动端差异。 ·统一资源定位符Input类型 只适用于Iph...

  • ng4跳坑记录

    一. 生命周期 1. 触发ngChanges的条件 ● 组件@Input输入属性变化● !!输入属性内部属性变化...

  • 拦截输入属性

    @Input @Output Setter拦截输入属性 ngOnChanges监听数据变化 通过局部变量实现数据交...

  • html5知识点梳理(2020-09-29)

    input标签 height 和 width 属性 height 和 width 属性规定用于 i...

  • input属性

    input光标的颜色:caret-color: #000; input选择输入历史后样式改变 input {bac...

  • HTML 表单元素

    元素 最重要的表单元素是 元素。 元素根据不同的type属性,可以变化为多种形态。 元素 最重要的表单元素是 元素。 元素根据不同的type属性,可以变化...

网友评论

    本文标题:(3.1HTML5 属性变化)input

    本文链接:https://www.haomeiwen.com/subject/iodlbttx.html