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>

瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。