<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. QT:QT Creator下载安装

    学习自: QtCreator5.12.6安装图文教程 - 知乎 (7条消息) Qt Creator下载安装_芒种.的博客-CSDN博客 (7条消息) QT5.11下载与安装教程_杨书航的博客-CSDN ...

  2. ValueError: not enough values to unpack

    当在同一行为两个变量赋值时,要用分号;而非逗号,隔开

  3. linux-日常工作积累

    Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...

  4. LeetCode-057-插入区间

    插入区间 题目描述:给你一个 无重叠的 ,按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的话,可以合并区间). 示例说明请见LeetCo ...

  5. pandas 中dataframe的操作

    先用pandas生成数据, import numpy as npimport pandas as pddf= pd.DataFrame(np.arange(30).reshape(6,5),colum ...

  6. 矩池云上使用nvidia-smi命令教程

    简介 nvidia-smi全称是NVIDIA System Management Interface ,它是一个基于NVIDIA Management Library(NVML)构建的命令行实用工具, ...

  7. Java 多线程中的死锁概述

    死锁 死锁的定义 发生在并发中 当两个线程(或更多)线程(或线程)相互持有对方所需要的资源,又不主动释放,导致所有线程都无法继续执行,是程序陷入无尽的阻塞,这就是死锁. 如果多个线程之间的依赖关系是环 ...

  8. jq集成月份插件(不要年月日,只要年月)

    最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的 ...

  9. LGP3092题解

    看 DP 的时候翻到的题,发现这题的坑鸽子了一年半 这个状态感觉比较厉害,还是来记录一下吧. 首先硬币数量很少让我们想到状压,可以想出来一个十分 navie 的状态:\(dp[S][n]\) 表示用过 ...

  10. jdbc action 接口示例

    package com.gylhaut.action; import java.sql.SQLException;import java.util.ArrayList;import java.util ...