您的位置：首页 > Web前端 > HTML5

HTML5中input新增标签详解

2013-09-29 14:25 489 查看

一、type属性里新增的标签：

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

例：

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>lianxi</title>
   </head>
<body>
<p>时间date：<input type="date" /></p>
<p>datetime:<input type="datetime" value="10:20"/></p>
<p>datetime-local:<input type="datetime-local" value=""/></p>
<p>time:<input type="time" value=""/></p>
<p>week:<input type="week" value=""/></p>
<p>month:<input type="month" value=""/></p>
</body>
</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> 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 标签
相关文章推荐
新的分享
章节导航