HTML5中input新增标签详解

时间 2019-11-09

标签 html5 html input 新增标签详解栏目 HTML5 繁體版

原文原文链接

HTML5中input新增标签详解

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

<!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值同之前同样仍是默认的值，同事也能够手动修改框里的数值大小。

2、其它新增的标签
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>

浏览器