摘要：属性在标签中，属性可指定显示不同的表单控件，每个控件都有不同的目的和收集特定类型的数据。传统做法是使用框架如，而推出了标签的新值属性。目前几乎所有的应用程序的表单都涉及到日期选择器，如预约医生航班等，虽然可能是不同的形式。
虽只是一个看似简单的 HTML 表单元素，但它这么一个单一的元素，就有多达 30 多个属性（attribute），相信无论你是个小菜鸟还是像我一样写了 15 年 HTML 的老手，知道这点的时候还是会惊讶不已的。而且如果再加上全局属性那就更多了，例如最重要的 type 属性有超过20个可能的值！可以来简单看看 MDN 文档。
type 属性在 input 标签中，type 属性可指定显示不同的表单控件，每个控件都有不同的目的和收集特定类型的数据。如果想看到所有的输入元素类型，可以查看这里（目前在 Chrome 里表现的最好），可能有一些你不知道的又新又有趣的类型。
COLOR许多 Web 应用会用到颜色选择器，可以让用户自定义选择颜色。传统做法是使用 JavaScript 框架（如 jQuery），而 W3C 推出了 input 标签的新值属性 color。下面这段代码在 Mac OS X chrome 里的表现就如下截图：
虽然最新版本的 Chrome 和 Firefox 都有自带的 color picker，但目前浏览器对 color 属性的支持仍然不是很好。不过你依旧可以通过设置颜色的十六进制值来改变默认的颜色。
DATE, MONTH, AND WEEK目前几乎所有的 Web 应用程序的表单都涉及到日期选择器，如预约医生、航班等，虽然可能是不同的形式。而与颜色选择器类似，传统的日期选择器控件通常是用 JavaScript 框架完成。
而现在，浏览器可以通过新的 input 类型 date、month、week 实现本地的日期选择器。下面这张截图是这三种类型的日期选择器的代码在 MAC OS X Chrome 上的表现：
不幸的是，目前浏览器对这几个日期选择器的支持并不是特别好：最新版本的 Android 完全支持，Chrome 和 iOS 部分支持（主要是其对相关属性的不支持）。让浏览器对这几个新的本地日期选择器良好支持还是需要一段时间的，所以 JavaScript 控件仍是目前最好的解决方案。
TEXT, EMAIL, TEL, URLtext 属性已经有很多年了，现在 email、tel、url 这几个新属性也加入了。普通浏览器里，这些新加的类型似乎和普通的文本输入没有什么差别，所以问题来了：如果没什么不同，为什么还要去用呢？
看看下图的这个 iOS 键盘：这 4 种不同的输入类型将自动使用一个特定的键盘 - email 的键盘有一个方便的 @ 符号，tel 使用数字键键盘，而 url 提供快速域名常用的.、/、.com。
这些方法能提升以前在移动设备上让人感到沮丧的用户体验，而现在的浏览器都已经完全支持了这些属性。
RANGE在某些特定情况下，当数据精确度要求并不是很高的时候，可以让用户在某些值中选择即可。比如在一个照片编辑应用里让用户来控制图像的亮度或饱和度，这个时候使用文本输入绝对是一个糟糕的做法：会让用户不知该如何选择，而且程序员还要进行数值检测来确保数值在合适的范围内。这是不但加大了程序员的工作量，还会导致不好的用户体验。
这时候就该 range 上场了，使用一个滑块控件可以让用户在给定的最小值和最大值范围内进行特定选择。下面这段代码在 MAC OS X Chrome 上的效果截图：
目前浏览器对范围滑块的支持还是相当不错的，iOS、Android（之前提到的演示页面可能会有问题）平台上都是完美支持，IE10 +、Firefox、Safari 以及 Chrome 也没有问题。所以，下次如果需要一个滑块，可以尝试使用 input 的 range 类型来替换传统的 JavaScript 解决方案。
TIME和 date 类型类似，time 也可以给你一个输入时间的界面，下面是这段代码在 MAC OS X Chrome 上的效果截图：
不过，和其它的 date 类型一样，time 目前也没有很好的浏览器支持。如果你需要一个实用的跨浏览器解决方案，多个文本输入或基于 JavaScript 的解决方案现在来看还是最佳的。
其他资源正如引言中提到的，这只是 input 的一小部分类型举例，其他一些有趣的属性如 required pattern list readonly 等，如果还想继续学习，下面这些资源或许能帮到你：
Learn about and other HTML elements on Treehouse
View the demo page with every input type
W3C documentation for
MDN documentation for
Cross browser support for types on caniuse.com
原文 How to Use the Input Element
SegmentFault 编译
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49549.html
摘要：欢迎来我的博客阅读打造高效个性一之打造高效个性二之如果说塑造了一个婀娜多姿颜值高的貌美姑娘，那么就是给她塑造了一个柔情侠骨百事通的女汉子之心。一款增加了一些在上实用的命令插件。 欢迎来我的博客阅读：「打造高效个性Terminal（一）之 iTerm」「打造高效个性Terminal（二）之 zsh」 oh-my-zsh 如果说iTerm塑造了一个婀娜多姿颜值高的貌美姑娘，那么zsh就是给...
摘要：人生，远不止是钱。如何管理，一个更复杂的人生人生，就是一个大型应用。把复杂的人间，拆解成了行动与目标。所以，，以及和两个函数，就构成了的逻辑。现在，你不仅完全理解了的设计哲学，你更懂得了如何管理人生。 Veux的哲学，实质上是人生的哲学。 看一看这张图。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...
摘要：解决浏览器保存密码自动填充问题问题描述话说有一天，我如往常一样打开我的开发网站进行登录操作。后来发现是浏览器存在自动填充机制的问题。 解决浏览器保存密码自动填充问题 问题描述 话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新...
相关内容：什么是css选择器标签选择器类选择器id选择器并集选择器（分组选择器）交集选择器后代选择器子标签选择器属性选择器相邻兄弟选择器伪类选择器伪元素选择器（伪对象选择器）首发时间：2018-03-02 修改：2018-04-30：修改了排版，增加了伪类选择器，伪元素选择器，在原本简略的介绍的基础上增加了描述并修改了某些术语描述。2018-05-05：修改了部分伪类选择器的注解，由于之前发生了小...
阅读 2414·2021-11-15 11:36
阅读 1150·2019-08-30 15:56
阅读 2206·2019-08-30 15:53
阅读 967·2019-08-30 15:44
阅读 632·2019-08-30 14:13
阅读 977·2019-08-30 10:58
阅读 446·2019-08-29 15:35
阅读 1272·2019-08-29 13:58
