文档章节

HTML5中input新增标签详解

惠风康桥
 惠风康桥
发布于 2012/11/27 22:46
字数 975
阅读 2642
收藏 2

HTML5中input新增标签详解

一、type属性里新增的标签:
(1) date、datetime、datetime-local、time、week、month这些是 type属性里表示时间类型的。(这些只在opera里面支持)
例:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.    <title>lianxi</title>
  6.    </head>
  7. <body>
  8. <p>时间date:<input type="date" /></p>
  9. <p>datetime:<input type="datetime" value="10:20"/></p>
  10. <p>datetime-local:<input type="datetime-local" value=""/></p>
  11. <p>time:<input type="time" value=""/></p>
  12. <p>week:<input type="week" value=""/></p>
  13. <p>month:<input type="month" value=""/></p>
  14. </body>
  15. </html>


week标签输入框里会出现w标识,表示当前是几周。

需要注意的几点:
1.datetime-local和datetime的区别在用户提交表单,数据的时候, 他们向服务器发送的格式,datetime可以使用1982-12-12T03:45Z或1982-12-12T03:45:00.0000Z的格式发送 到服务器,而datetime-local结尾则没有这个Z! 这个Z代表的是格林尼治时间(也称为UTC时间和通用时间。)  
2.type="week", 出现的时间前面会出w,表示当前是本年的第几周。例:当前时间是2010.6.30,会出现2010-w26
3.时间类型是用户不能手动输入的。

(2)range:表示滑动条或拖动 条。(opera,safari,谷歌支持)
例:代码:
<input   type="range"   value=""/>


(3)email:这个是验证邮箱格式的类型。若输入的类型不是邮箱类型,它会自动报错。(opera支持)
例:代码:
<form action="" method="" enctype="">
email:<input type="email" name /><br/>
<input type="submit" value="提交"/>
</form>


(4)number:表 示数值数据类型。(opera支持)
<form action="" method="" enctype="">
<input type="number" min="0" step="0.01" name="nmb" value="11">
</form>

注 意:type="number"的时候,input标签同时支持 min max step等属性。分别限制input输入框内的数值最小值、最大值、和点击上下箭头时的变化值。value值同以前一样还是默认的值,同事也可以手动修改 框里的数值大小。


 二、 其它新增的标签
1.autocomplete
autocomplete:on|off;
当为on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页 面时,浏览器能把用户写过的值自动填写在相应的input框里。免去了用后台来做,来传送数据的麻烦。

2.autofocus(谷歌支持)
autofocus:autofocus; 当页面加载时使字段获得焦点,当type="hidden"时,无法使用。一个页面只能有一个autofocus字段聚焦。
例:<input  autofocus  type="search"  value="请输入信息"/>


3.placeholder(谷歌支持)
placeholder表示占位符,当type="text"或type="email"等属性时,提示用户输入的信息格式或内容 等。
例:代码:

<p>placeholder(表示占位符,在谷歌里面支持)</p>
<p> 用户名: <input type="text" name="fullname" placeholder="John Ratzenberger"></p>
<p>邮箱: <input type="email" name="address" placeholder=""></p>
<p> 密码: <input type="password" name="password"></p>
<p>Description: <input type="text" name="desc" placeholder="My Email Account"></p>



4.list(opera支持)
list引用detalist元素。如果定义,则一个下拉列表可用于向输入字段插入值。
例:代码:
网址: <input name=hp type=url list=hpurls/>
<datalist id=hpurls>
<option value="http://www.google.com/" label="Google"/>
<option value="http://www.reddit.com/" label="Reddit"/>
</datalist>


5.max、min属性来限制数值的范围大小。 minheight、maxheight属性限制字符串的长度。

6.required(opera 支持)
required:true|false;是一个布尔型属性,定义输入字段的值是否是必需 的,当指定时,这个元素是必须的。
当使用下列类型使无法使用:hidden,images,button,submit,reset因为有 value值去定义。required属性省去了页面要用*或其他内容作特殊标记,让用户来知道是必填的内容,也免去了验证的麻烦。
例:代 码:<h1>用户注册</h1>
<form action="" method="">
<p> 邮箱地址:
<input id="username" type="email" required=true name=un/>
</p>
<p> 密码:
<input id="password1" type=password required name=up/>
</p>
<p> 确认密码:
<input id="password2" type=password required name=up/>
</p>
<input type=submit value="提交"><br/>
</form> 


 

本文转载自:

惠风康桥
粉丝 4
博文 41
码字总数 40456
作品 0
青岛
私信 提问
HTML4 和 HTML5 的10个关键区别

HTML5是HTML标准的下一个版本。越来越多的程序员开始HTML5来构建网站。如果你同时使用HTML4和HTML5的话 ,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多。虽然HTML5没有完全颠覆...

虫虫
2011/10/13
89.7K
14
HTML中标签的rel属性的含义_HTML5新增属性值

HTML中<a>标签有个rel属性,这篇文章简要介绍下rel属性的含义、Value,及在HTML5中新增的一些属性值。 1、rel属性定义: <a>标签的rel属性用于指出当前文档与被链接文档的关系。仅在有href属...

囧南风囧
2012/08/24
0
0
HTML5 设计原理

注:本文中的例子应该用代码展示的,但是因为现在用的DOCTYPE为XHTML1.0,浏览器读不出来HTML5代码,pre也没法 代码阅读,所以只能通过文字来说明了。 避免不必要的复杂性 如果可能,简明的解...

oschina
2012/05/18
3.9K
8
HTML5 的 PLACEHOLDER 属性

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本...

小编辑
2011/06/29
31.8K
12
好程序员前端分享HTML5 发展史

  好程序员前端分享HTML5发展史,HTML5草案的前身名为WebApplications1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。   HTML5的第一份正式草案已于2008年1...

好程序员IT
05/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

https://zhuanlan.zhihu.com/p/61408911

在Logistimo,我们的所有应用程序都是Docker化的,并在Kubernetes内以docker容器运行。我们注意到在使用Java的容器上发生了大量重启,并且非常随机。Docker检查发现该pod被OOMKiller代码杀死...

xiaomin0322
2分钟前
0
0
北斗三号IGSO-2卫星发射成功!

6月25日,中国航天科技集团官方公众号宣布,北斗三号IGSO-2卫星发射成功! 航天科技集团表示,6月25日2点09分,我国在西昌卫星发射中心用长征三号乙运载火箭成功将北斗三号第2颗倾斜地球同步...

linux-tao
5分钟前
1
0
oracle通过dblink查询sqlserver报错

报错如下: SQL> select * from t@mstest; select * from t@test * ERROR at line 1: ORA-28545: error diagnosed by Net8 when connecting to an agent Unable to retrieve text of NETWORK......

突突突酱
8分钟前
0
0
docker-elasticsearch学习

如果不适用docker,面临的问题有: 部署非常慢 成本非常高 资源浪费 难于迁移和扩展 可能会被限定硬件厂商 虚拟化技术的优点: 虚拟化技术出现以后,一个物理机可以部署多个App,每个App独立...

Vincent-Duan
17分钟前
0
0
MySQL权限管理坑

权限系统的工作原理 MySQL权限系统通过下面两个阶段进行认证: (1)对连接的用户进行身份认证,合法的用户通过认证、不合法的用户拒绝连接。 (2)对通过认证的合法用户赋予相应的权限,用户...

bengozhong
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部