热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

小小标签,强大功能——深藏不露的

虽只是一个看似简单的HTML表单元素,但它这么一个单一的元素,就有多达30多个属性(attribute),相信无论你是个小菜鸟还是像我一样写了15年HTML的老手,知

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

type 属性

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

COLOR

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


《小小标签,强大功能——深藏不露的 <input>》&#8221; /></span></p><p>虽然最新版本的 Chrome 和 Firefox 都有自带的 color picker,但目前浏览器对 color 属性的支持仍然不是很好。不过你依旧可以通过设置颜色的十六进制值来改变默认的颜色。</p><h3>DATE, MONTH, AND WEEK</h3><p>目前几乎所有的 Web 应用程序的表单都涉及到日期选择器,如预约医生、航班等,虽然可能是不同的形式。而与颜色选择器类似,传统的日期选择器控件通常是用 Javascript 框架完成。</p><p>而现在,浏览器可以通过新的 input 类型 <code>date</code>、<code>month</code>、<code>week</code> 实现本地的日期选择器。下面这张截图是这三种类型的日期选择器的代码在 MAC OS X Chrome 上的表现:</p><p><code><input type=


《小小标签,强大功能——深藏不露的 <input>》&#8221; /></span></p><p>不幸的是,目前浏览器对这几个日期选择器的支持并不是特别好:最新版本的 Android 完全支持,Chrome 和 iOS 部分支持(主要是其对相关属性的不支持)。让浏览器对这几个新的本地日期选择器良好支持还是需要一段时间的,所以 Javascript 控件仍是目前最好的解决方案。</p><h3>TEXT, EMAIL, TEL, URL</h3><p><code>text</code> 属性已经有很多年了,现在 <code>email</code>、<code>tel</code>、<code>url</code> 这几个新属性也加入了。普通浏览器里,这些新加的类型似乎和普通的文本输入没有什么差别,所以问题来了:如果没什么不同,为什么还要去用呢?</p><p>看看下图的这个 iOS 键盘:这 4 种不同的输入类型将自动使用一个特定的键盘 &#8211; <code>email</code> 的键盘有一个方便的 @ 符号,<code>tel</code> 使用数字键键盘,而 <code>url</code> 提供快速域名常用的<code>.</code>、<code>/</code>、<code>.com</code>。</p><p><code><input type=


《小小标签,强大功能——深藏不露的 <input>》&#8221; /></span></p><p>这些方法能提升以前在移动设备上让人感到沮丧的用户体验,而现在的浏览器都已经完全支持了这些属性。</p><h3>RANGE</h3><p>在某些特定情况下,当数据精确度要求并不是很高的时候,可以让用户在某些值中选择即可。比如在一个照片编辑应用里让用户来控制图像的亮度或饱和度,这个时候使用文本输入绝对是一个糟糕的做法:会让用户不知该如何选择,而且程序员还要进行数值检测来确保数值在合适的范围内。这是不但加大了程序员的工作量,还会导致不好的用户体验。</p><p>这时候就该 <code>range</code> 上场了,使用一个滑块控件可以让用户在给定的最小值和最大值范围内进行特定选择。下面这段代码在 MAC OS X Chrome 上的效果截图:</p><p><code><input type=

《小小标签,强大功能——深藏不露的 <input>》&#8221; /></span></p><p>目前浏览器对范围滑块的支持还是相当不错的,iOS、Android(之前提到的演示页面可能会有问题)平台上都是完美支持,IE10 +、Firefox、Safari 以及 Chrome 也没有问题。所以,下次如果需要一个滑块,可以尝试使用 input 的 <code>range</code> 类型来替换传统的 Javascript 解决方案。</p><h3>TIME</h3><p>和 date 类型类似,<code>time</code> 也可以给你一个输入时间的界面,下面是这段代码在 MAC OS X Chrome 上的效果截图:</p><p><code><input type=

《小小标签,强大功能——深藏不露的 <input>》&#8221; /></span></p><p>不过,和其它的 date 类型一样,<code>time</code> 目前也没有很好的浏览器支持。如果你需要一个实用的跨浏览器解决方案,多个文本输入或基于 Javascript 的解决方案现在来看还是最佳的。</p><h2>其他资源</h2><p>正如引言中提到的,这只是 <code>input</code> 的一小部分类型举例,其他一些有趣的属性如 <code>required</code> <code>pattern</code> <code>list</code> <code>readonly</code> 等,如果还想继续学习,下面这些资源或许能帮到你:</p><ul><li>Learn about <input> and other HTML elements on Treehouse</li><li>View the demo page with every input type</li><li>W3C documentation for <input></li><li>MDN documentation for <input></li><li>Cross browser support for <input> types on caniuse.com</li></ul><p>原文 How to Use the Input Element<br />SegmentFault 编译</p>        <br>
        <script type= var cpro_id = "u6885494";

推荐阅读
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1.webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用(1) ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 表单代码 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了logistic回归(线性和非线性)相关的知识,包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ... [详细]
  • 场景1.IE,Firefox浏览器访问不了网站,谷歌浏览器可以,返回错误码DNS_PROBE_POSSIBLE.2.pingwww.qq.com可以ping通,ping局域 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
author-avatar
王者灬旋律
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有