HTML5中input新增标签详解

2012/11/27 22:46
阅读数 6K

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> 


 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部