<input> 虽只是一个看似简单的 HTML 表单元素,但它这么一个单一的元素,就有多达 30 多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了 15 年 HTML 的老手,知道这点的时候还是会惊讶不已的。而且如果再加上全局属性那就更多了,例如最重要的 type 属性有超过20个可能的值!可以来简单看看 MDN 文档

type 属性

在 input 标签中,type 属性可指定显示不同的表单控件,每个控件都有不同的目的和收集特定类型的数据。如果想看到所有的输入元素类型,可以查看这里(目前在 Chrome 里表现的最好),可能有一些你不知道的又新又有趣的类型。

COLOR

许多 Web 应用会用到颜色选择器,可以让用户自定义选择颜色。传统做法是使用 JavaScript 框架(如 jQuery),而 W3C 推出了 input 标签的新值属性 color。下面这段代码在 Mac OS X chrome 里的表现就如下截图:

<input type="color" value="#6fbc6d">

虽然最新版本的 Chrome 和 Firefox 都有自带的 color picker,但目前浏览器对 color 属性的支持仍然不是很好。不过你依旧可以通过设置颜色的十六进制值来改变默认的颜色。

DATE, MONTH, AND WEEK

目前几乎所有的 Web 应用程序的表单都涉及到日期选择器,如预约医生、航班等,虽然可能是不同的形式。而与颜色选择器类似,传统的日期选择器控件通常是用 JavaScript 框架完成。

而现在,浏览器可以通过新的 input 类型 datemonthweek 实现本地的日期选择器。下面这张截图是这三种类型的日期选择器的代码在 MAC OS X Chrome 上的表现:

<input type="date">
<input type="month">
<input type="week">

不幸的是,目前浏览器对这几个日期选择器的支持并不是特别好:最新版本的 Android 完全支持,Chrome 和 iOS 部分支持(主要是其对相关属性的不支持)。让浏览器对这几个新的本地日期选择器良好支持还是需要一段时间的,所以 JavaScript 控件仍是目前最好的解决方案。

TEXT, EMAIL, TEL, URL

text 属性已经有很多年了,现在 emailtelurl 这几个新属性也加入了。普通浏览器里,这些新加的类型似乎和普通的文本输入没有什么差别,所以问题来了:如果没什么不同,为什么还要去用呢?

看看下图的这个 iOS 键盘:这 4 种不同的输入类型将自动使用一个特定的键盘 - email 的键盘有一个方便的 @ 符号,tel 使用数字键键盘,而 url 提供快速域名常用的./.com

<input type="text">
<input type="email"
<input type="tel">
<input type="url">

这些方法能提升以前在移动设备上让人感到沮丧的用户体验,而现在的浏览器都已经完全支持了这些属性。

RANGE

在某些特定情况下,当数据精确度要求并不是很高的时候,可以让用户在某些值中选择即可。比如在一个照片编辑应用里让用户来控制图像的亮度或饱和度,这个时候使用文本输入绝对是一个糟糕的做法:会让用户不知该如何选择,而且程序员还要进行数值检测来确保数值在合适的范围内。这是不但加大了程序员的工作量,还会导致不好的用户体验。

这时候就该 range 上场了,使用一个滑块控件可以让用户在给定的最小值和最大值范围内进行特定选择。下面这段代码在 MAC OS X Chrome 上的效果截图:

<input type="range">

目前浏览器对范围滑块的支持还是相当不错的,iOS、Android(之前提到的演示页面可能会有问题)平台上都是完美支持,IE10 +、Firefox、Safari 以及 Chrome 也没有问题。所以,下次如果需要一个滑块,可以尝试使用 input 的 range 类型来替换传统的 JavaScript 解决方案。

TIME

和 date 类型类似,time 也可以给你一个输入时间的界面,下面是这段代码在 MAC OS X Chrome 上的效果截图:

<input type="time">

不过,和其它的 date 类型一样,time 目前也没有很好的浏览器支持。如果你需要一个实用的跨浏览器解决方案,多个文本输入或基于 JavaScript 的解决方案现在来看还是最佳的。

其他资源

正如引言中提到的,这只是 input 的一小部分类型举例,其他一些有趣的属性如 required pattern list readonly 等,如果还想继续学习,下面这些资源或许能帮到你:


原文 How to Use the Input Element
SegmentFault 编译

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hija1b1ha2j

小小标签,强大功能——深藏不露的 <input>的更多相关文章

  1. java web过滤器实际应用(解决中文乱码 html标签转义功能 敏感字符过滤功能)

    转载地址:http://www.cnblogs.com/xdp-gacl/p/3952405.html 在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可 ...

  2. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  3. C#开发微信门户及应用(37)--微信公众号标签管理功能

    微信公众号,仿照企业号的思路,增加了标签管理的功能,对关注的粉丝可以设置标签管理,实现更加方便的分组管理功能.开发者可以使用用户标签管理的相关接口,实现对公众号的标签进行创建.查询.修改.删除等操作, ...

  4. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  5. FM收音机 RDS的强大功能

    FM收音机 RDS的强大功能 分类: MTK2011-04-26 16:06 14889人阅读 评论(6) 收藏 举报 交通公告体育音乐娱乐教育 前言 随着发展,会有越来越多的电台具有RDS广播功能, ...

  6. Python和SQL Server 2017的强大功能

    Python和SQL Server 2017的强大功能 摘要: 源:https://www.red-gate.com/simple-talk/sql/sql-development/power-pyt ...

  7. Python和SQL 2017的强大功能

    Python和SQL Server 2017的强大功能   原文来自:https://www.red-gate.com/simple-talk/sql/sql-development/power-py ...

  8. 生鲜配送管理系统_升鲜宝V2.0 小标签打印功能【代配送商品打印小标签功能】说明_15382353715

    小标签打印说明 小标签打印可以打印本系统的订单商品数量,也可以把外部的订单商品导入本系统进行打印. 打印本系统中的订单商品操作说明[上篇文章已经讲解相关的操作说明] 打印本系统之外的订单商品明细清单 ...

  9. 生鲜配送管理系统_升鲜宝V2.0 小标签打印功能说明_15382353715

    小标签打印说明 小标签打印可以打印本系统的订单商品数量,也可以把外部的订单商品导入本系统进行打印. 打印本系统中的订单商品操作说明 1.1    界面说明 1.2     查询条件 1.2.1     ...

随机推荐

  1. Leaflet:控件Control相关

    Leaflet官方文档中只给出了4种控件:Zoom.Attribution.Layers.Scale:它们都是继承自Control类,具体可以参考Control. Control Zoom.Scale ...

  2. P1424

    #include <stdio.h> int main(){ int s = 250; int x, n, distance = 0; scanf("%d %d",&a ...

  3. dependencies与devDependencies中应该放哪些依赖

    网上一般的解释都是,开发环境用devDependencies,生产环境用dependencies,说的很简明,但是这里有个问题是,哪些包需要放到devDependencies中,哪些包需要放到depe ...

  4. SQL Server--设置用IP地址登录

    问题概述:新安装的SQL Server数据库无法用IP地址登录. 是因为 SQL Server  "服务器网络实用工具"中禁用了"命名管道"所致! 在sqlse ...

  5. 简单聊一聊Javascript中的模块化

    在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Ja ...

  6. BUG | ValueError: Shape mismatch: The shape of labels (received (320,)) should equal the shape of logits except for the last dimension (received (64, 5)).

    1 TensorFlow报错 报错信息: 2 报错原因 字面原因: 这个问题是由于输出层的类别数和训练数据shape不同导致. 底层原因: Step1 : 代码中,我通过ImageDataGenera ...

  7. SQL从零到迅速精通【基本语句】

    1.使用T-SQL语句创建数据表authors,输入语句如下. CREATE TABLE authors { auth_id int PRIMARY KEY,--数据表主键 auth_name VAR ...

  8. windows下后台启动PHP,Nginx,Redis(使用RunHiddenConsole)

    启动命令(红色代码可选): 启动PHP RunHiddenConsole D:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php-cgi.exe -b 127.0 ...

  9. ybt1130:找第一个只出现一次的字符

    1130:找第一个只出现一次的字符 时间限制: 1000 ms         内存限制: 65536 KB提交数: 62333     通过数: 23786 [题目描述] 给定一个只包含小写字母的字 ...

  10. 企业网络防范Serv-U的漏洞

    很多企业都将自己的网站建立在互联网上,日常有专门的维护人员进行维护,很多时候对网站的更新当然不是直接在服务器上操作,而是将要更新的网页页面通过FTP工具上传到服务器上实现.因此必须要在服务器上搭建起一 ...