Html5 Input 标签类型

分享到:

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型:

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

浏览器支持

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No

注释:Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证 email 域的值。

实例

E-mail: <input type="email" name="user_email" />

提示:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证 url 域的值。

实例

Homepage: <input type="url" name="user_url" />

提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。

Input 类型 - number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

实例

Points: <input type="number" name="points" min="1" max="10" />

请使用下面的属性来规定对数字类型的限定:

属性 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value number 规定默认值

提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

实例

<input type="range" name="points" min="1" max="10" />

请使用下面的属性来规定对数字类型的限定:

属性 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
value number 规定默认值

Input 类型 - Date Pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)

下面的例子允许您从日历中选取一个日期:

实例

Date: <input type="date" name="user_date" />

Input 类型 - search

search 类型用于搜索域,比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

昵    称:
验证码:

相关文档:

  • HTML5学习笔记
    HTML5学习笔记 1.HTML5-新特性 HTML5中的一些有趣的新特性: 用于绘画的canvas元素 用于媒介回放的video和audio元素 对本地离线存储的更好的...
  • html5 meta标签
    <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">width-viewport的宽度height-...
  • 大熊君学习html5系列之------History API(SPA单页应用的必备)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • HTMl5结构元素:article
    article: 表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用。(例如:一...
  • 7款震撼人心的HTML5文字特效
    1、CSS3五彩文字特效文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展...
  • 利用html5压缩图片,产出base64图片
    /*将页面选择的图片等比压缩成指定大小(长边固定)file:图片文件callBack:回调函数maxLen:长边的长度*/functionmakePic(file,callBack,maxLen){ varurl...
  • HTML5与HTML4的区别
    A.简化的语法 更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。 B.一...
  • HTML5 application cache
    ApplicationCacheAPI(一) 基本应用 http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html ApplicationCacheAPI(二) 测试与总结 http://www.cnblogs.com/black...
  • html5 canvas--1.canvas介绍
    从今天开始,我们将开始一个关于html5canvas的系列课程。这个系列是我读《HTML5Canvas:NativeInteractivityandAnimationfortheWeb》后的总结,有兴趣...
  • html5+javascript div拖拽
    <!doctypehtml> <html> <head> <metacharset="UTF-8"> <title>HTML5-Drag-Demoby顽Shi</title> <style> .column{ he...
  • html5(一)
    HTML5三个基本特色:结构、样式、功能。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><!--编码格式--><metaname="descr...
  • W3C vs. WHATWG HTML5 Specs – The Differences Documented
    Afewweeksago,HTML5becameanofficialW3CRecommendation.Itookadvantageofthiseventtodiscuss5interestingbutnowobsoletefeaturesonSitePoint.Theproblemisthatth...
  • HTML5之 离线数据存储
    ---Storage接口无论是sessionStorage还是localStorage 属性/方法 返回值 描述-------------------------------------------------------length integer 包含对象数目...
  • 基于HTML5/CSS3图片网格动画特效
    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱。今天要分享的这款HTML5图片网格动画特效就...
  • HTML5 的标签列表
    结构标签:(块状元素)有意义的div<article>标记定义一篇文章<header>标记定义一个页面或一个区域的头部<nav>标记定义导航链接...
  • build-your-first-mobile-app(第一个 PhoneGap cordova Coldfusion App)
    摘自:http://www.adobe.com/devnet/coldfusion/articles/build-your-first-mobile-app.html...
  • Hexo
    Hexo是一个快速,轻量,强大的Node.js博客框架。带给你难以置信的编译速度,瞬间生成静态文件;支持Markdown,甚至可以在Hexo中集合Octopre...
  • html5打开摄像头并用canvas模拟拍照
    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵。根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验。废话不多说...
  • WCF WebSocketsService (HTML5 WebSocket)
    在Web应用中,HTTP协议决定了客户端和服务端连接是“短连接”,即客户端Request,服务端Response,连接断开。要想实现客户端和服务...
  • jQuery+html5实现的3D动态切换焦点轮播幻灯片
    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动...