新的input類型和屬性
email類型
在HTML5中將一個input元素的類型設置爲email時，表明該輸入框用於輸入電子郵件地址。當頁面加載時，該input元素對應文本框與其他類型文本框顯示效果相同，但是僅限於輸入電子郵件格式的字符串。當表單提交時，將會自動檢測輸入內容，如果用戶輸入非電子郵件格式字符串，將給出錯誤提示。
一段使用email類型的input元素的示例代碼如下。
<body>
<form action="#">
<fieldset>
<legend>
請輸入有效的電子郵箱
</legend>
<input type="email" id='inputEmail'>
<input type="submit" value='提交'>
</fieldset>
</form>
</body>
顯示效果
錯誤提示
對於email類型的input元素，如果添加了“multiple=‘true’”的屬性後，該輸入框將允許用戶輸入一個或多個電子郵箱地址。多個電子郵箱地址使用逗號（英文半角格式）分隔，且多個電子郵箱地址在表單提交時都會進行格式驗證，如果任一電子郵箱地址格式不正確，用戶將得到錯誤提示信息
需要注意的是，email類型的input元素默認並未對輸入信息爲空的情況進行處理
日期時間類型
HTML4中通常是通過第三方JavaScript插件來爲提供日期輸入界面，而在HTML5中只需將一個input元素的類型設置爲日期時間類型，即可在頁面中生成一個日期時間類型的輸入框。當用戶單擊對應日期輸入框時，會彈出日期選擇界面，選擇日期後該界面自動關閉，並將用戶選擇具體日期填充在輸入框中。用戶可設置的日期時間類型包括date、week、month、time、datetime、datetime-local，各種類型對應的輸入框界面及功能有所區別。
一段使用日期時間類型的input元素的示例代碼如下。
<body>
<form action="#">
<fieldset>
<legend>
請輸入有效時間
</legend>
<input type="time">
<input type="datetime">
<input type="datetime-local">
</fieldset>
<fieldset>
<legend>
請輸入有效日期
</legend>
<input type="date">
</fieldset>
<fieldset>
<legend>
請輸入有效星期
</legend>
<input type="week">
</fieldset>
<fieldset>
<legend>
請輸入有效月份
</legend>
<input type="month">
</fieldset>
</form>
</body>
顯示效果
目前Opera瀏覽器對於各種日期時間類型的input元素都提供了較好的支持，而Chrome只提供了date類型的input元素的支持。爲了演示日期時間類型input元素的執行效果，建議大家使用Opera瀏覽器運行。（作者本次用的是Chrome瀏覽器）
我們可以看出，不同的日期時間類型input元素，在頁面中將會以不同形式進行顯示。對於有下拉框格式的輸入框，用戶單擊時將會彈出日曆界面；對於有上下選擇按鈕的輸入框，用戶單擊時對應文本框中將顯示數字加減效果。
HTML5中的日期時間類型表單元素帶來的好處是不言而喻的，開發人員不需要編寫大量的編碼即可輕鬆提升用戶體驗，與此同時，日期時間類型的input元素默認是不允許用戶直接輸入信息的，這在一定程度上也提升了程序的安全性。
range類型
在HTML5中，當一個input元素的類型設置爲range時，將在頁面中生成一個區域選擇控件，用於設置選擇區域信息。
一段使用range類型的input元素的示例代碼如下。
<body>
<script>
function getValue()
{
var value = document.getElementById("rangeInput").value;
var result = document.getElementById("result");
result.innerText = value;
}
</script>
<form>
<fieldset>
<legend>
請選擇您的年齡
</legend>
<input id="rangeInput" type="range" min="0" max="100" onChange="getValue()">
<span id="result"></span>
</fieldset>
</form>
</body>
顯示效果 
search類型
在HTML5中，當一個input元素的類型設置爲search時，表明該輸入框用於輸入查詢關鍵字。search類型的input元素在頁面中顯示效果與普通input元素相似，且也用於接收輸入字符串信息，但是顯示效果與普通input元素有所區別。
一段使用search類型的input元素的示例代碼如下。
<body>
<form>
<fieldset>
<legend>
請輸入您要搜索的信息內容
</legend>
<input type="search">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
顯示效果
如圖所示文本框輸入搜索關鍵字時，輸入文本框後面將顯示叉號，單擊叉號會自動清空輸入框中的文本信息
number類型
number類型的input元素在HTML5中，用於提供一個數字類型的文本輸入控件。該元素在頁面中生成的輸入框只允許用戶輸入數字類型信息，並可通過該輸入框後面的上、下調節按鈕來微調輸入數字大小。
一段使用number類型的input元素的示例代碼如下。
<body>
<form>
<fieldset>
<legend>
請輸入您要搜索的信息內容
</legend>
<input type="number">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
顯示效果
由於number類型的input元素只允許輸入數字類型文本信息，所以當用戶輸入其他類型信息，如字母、符號、漢字等，文本框將會自動清空。
url類型
HTML5中input元素的類型設置爲url時，表示該input元素將生成一個只允許輸入網址格式字符串的輸入框。當頁面加載時，該input元素對應文本框與其他類型文本框顯示效果相同，但是僅限於輸入網址格式的字符串。當表單提交時，將會自動檢測輸入內容，如果用戶輸入非網址格式字符串，將給出錯誤提示。
一段使用url類型的input元素的示例代碼如下。
<body>
<form>
<fieldset>
<legend>
請輸入有效網址信息
</legend>
<input type="url">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
顯示效果
輸入框中輸入錯誤格式的網址並單擊“提交”按鈕時，得到的效果如圖。url類型的input元素與email類型的input元素相同，默認也不會對輸入空信息進行處理。
新的input公用屬性
HTML5中除了增加了新的輸入類型外，還增加了一些新的公共屬性。
1．autofocus屬性
autofocus屬性主要用於設置在頁面加載完畢時，頁面中的控件是否自動獲取焦點。所有的input元素都支持autofocus屬性，該屬性可設置值爲true（自動獲取焦點）和false（不自動獲取焦點）。
一段使用autofocus屬性的input元素的示例代碼如下。
<!DOCTYPE html>
<html>
<meta charset="gb2312" />
<form>
<fieldset>
<legend>
請輸入登錄信息
</legend>
<table>
<tr>
<td>
用戶名 ：
</td>
<td>
<input type="text" id="txtUserName" autofocus="true">
</td>
</tr>
<tr>
<td>
密碼 ：
</td>
<td>
<input type="text" id="txtPassword">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</fieldset>
</form>
</html>
顯示效果
2．pattern屬性
pattern屬性主要用於設置正則表達式，以便對input元素對應輸入框執行自定義輸入校驗。前面小節介紹的email、url類型的input元素，其實也是基於正則表達式進行校驗的，只不過已經由系統設置，無需用戶單獨設置。正則表達式的功能非常強大，用戶可以通過編寫個性化正則表達式實現複雜的邏輯校驗。
一段使用pattern屬性的input元素的示例代碼如下。
<!DOCTYPE html>
<html>
<meta charset="gb2312" />
<form>
<fieldset>
<legend>
請輸入註冊信息
</legend>
<table>
<tr>
<td valign="top">
用戶名 ：
</td>
<td>
<input type="text" id="txtUserName" autofocus="true"
pattern="^[a-zA-Z0-9]{6,}$">
<br>
<span style="color:red;font-size:12px">只允許輸入英文和數字,且長度至少爲6位</span>
</td>
</tr>
<tr>
<td valign="top">
年 齡 ：
</td>
<td>
<input type="text" id="txtAge" pattern="^[1-9]?[0-9]$">
<br>
<span style="color:red;font-size:12px">只允許輸入0-99之間的整數</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</fieldset>
</form>
</html>
顯示效果
用戶名及年齡文本框中分別輸入不符合要求的信息並單擊“提交”按鈕，得到結果如下圖
正則表達式是一項非常重要且常用的技術，在實際開發過程中會有很多地方要用到正則表達式。但是對於初學者來說，要想真正掌握正則表達式的編寫技能是一件很困難的事。對於常用的正則表達式，我們都可以在網上搜索得到，直接拿來使用。如果讀者對正則表達式感興趣，可以有針對性地深入學習，掌握正則表達式對今後的HTML5開發會有很大幫助。
3．placeholder屬性
placeholder屬性用於設置一個文本佔位符，當input元素設置了placeholder屬性值，頁面加載完畢後，input元素對應輸入框內將顯示placeholder屬性設置的信息內容。當輸入框獲取焦點並有信息輸入，輸入框失去焦點後輸入信息將代替原placeholder設置內容；當輸入框獲取焦點且沒有信息輸入，輸入框失去焦點後將仍然顯示原placeholder設置內容。
一段使用placeholder屬性的input元素的示例代碼如下。
<!DOCTYPE html>
<html>
<meta charset="gb2312" />
<form>
<fieldset>
<legend>
請輸入您的姓名
</legend>
姓名：
<input type="text" placeholder="請輸入姓名信息">
</fieldset>
</form>
</html>
顯示效果
姓名輸入框中輸入信息並單擊網頁其他地方，輸入框內信息將被輸入信息代替
當我們刪除輸入框內信息並再次單擊網頁其他地方時，又會得到上面圖1顯示的效果。
4．required屬性
required屬性主要用於設置輸入框是否必須輸入信息，該屬性可設置值分別爲true和false。當input元素的required屬性設置爲true時，提交表單時對應的輸入框不允許爲空；當required屬性設置爲false時，提交表單時對應的輸入框允許爲空。
一段使用required屬性的input元素的示例代碼如下。
<!DOCTYPE html>
<html>
<meta charset="gb2312" />
<form>
<fieldset>
<legend>
請填寫個人信息
</legend>
<table>
<tr>
<td>
姓名 ：
</td>
<td>
<input type="text" autofocus="true" required="true">
</td>
</tr>
<tr>
<td>
年 齡 ：
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</fieldset>
</form>
</html>
顯示效果
不輸入任何信息直接單擊“提交”按鈕，得到提示信息。
新的input類型和屬性，你學會了麼？
- 完成任務
![在這裏插入圖片描述]()
