在Html5中，大幅度地增加與改良了input元素的種類，可以簡單的使用這些元素來實現Html5之前需要使用JavaScript才能實現的許多功能。
到目前為止，對於這些input的種類來說，支持得最多、最全面的是Opera浏覽器(也可以進行多浏覽器的比較Firefox、Safari、Chrome、Opera)。對於不支持新增input元素的浏覽器來說，統一這些input元素視為text類型。另外，Html5中也沒有規定這些元素再各浏覽器中的外觀形式，所以同樣input元素再不同的浏覽器中可能會有不同的外觀。
1、url類型
url類型的input元素是一種專門用來輸入url地址的文本框。提交時如果該文本框中的內容不是url地址格式的文字，則不允許提交。
<input type="url" name="url" value="http://www.btCSS.com" />
2、email類型
email類型的input元素是一種專門用來輸入email的文本框。提交時如果該文本框中的內容不是email地址格式的文字則不允許提交，但是它並不檢查email地址是否存在，提交時該文本框可以為空，除非加上了required屬性。
email類型的文本框具有一個multiple屬性——它允許在該文本框中輸入一串以逗號分割的email地址。當然並不強制要求用戶輸入該email地址列表。在實際使用中，可以由開發者編程的方式將用戶聯系人地址列表中的郵件列表彈出，在每個聯系人的郵件地址旁邊帶有復選框，供用戶選擇輸入。
<input type="email" name="email1" value="[email protected]" />
3、date類型
date類型的input元素是深受開發者喜愛的一種元素我們也經常看到網頁中要求我們輸入的各種各樣的日期，例如生日、購買日期、訂票日期等。date類型的input元素以日歷的形式方便用戶輸入。當該文本框獲取焦點時，顯示日歷，可以在日歷總選擇日期進行輸入。
<input type="date" name="date1" value="2011-08-14" />
4、time類型
time類型的input元素是一種專門用來輸入時間的文本框，並且在提交時會對輸入時間的有效性進行檢查。它的外觀取決於浏覽器，可能時簡單的文本框，只在提交時檢查是否在其中輸入了有效的時間，也可能以時鐘的形式出現，還可以攜帶時區。
<input type="time" name="time1" value="12:00" />
5、detetime類型
datetime類型的input元素是一種專門用來輸入UTC日期和時間的文本框，並且在提交時會對輸入的日期和時間進行有效性檢查。
<input type="datetime" name="datetime1" />
6、detetime-local類型
detetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框，並且在提交時會對輸入的日期和時間進行有效檢查。
<input type="datetime-local" name="datetime-local1" />
7、month類型
month類型的input元素是一種專門用來輸月份的文本框，並且在提交時會對輸入的月份進行有效檢查。
<input type="month" name="month1" value="2011-08" />
8、week類型
week類型的input元素是一種專門用來輸周號的文本框，並且在提交時會對輸入的周號進行有效檢查。它可能是一個簡單的輸入文本框，允許用戶輸入一個數字；也可能更復雜、更精確。它的格式類似於“2011-W08”，代表2011年第7周。
Opera浏覽器中提供了一個輔助輸入的日歷，可以在該日歷中選取日期，選取完畢後文本框中自動顯示周號。
<input type="week" name="week1" value="2011-W08" />
9、number類型
number類型的input元素是一種專門用來輸數字的文本框，並且在提交時會對輸入的內容是否為數字。它們具有min、max與step屬性。
在Opera浏覽器中，它帶有數值控制按鈕，以控制其數值，使之不超過最大值於最小值，同時在點擊該數值控制按鈕時，其中的數值會按step屬性進行增減，當然也可以直接在其中輸入數字。
<input type="number" name="number1" value="54" min="3" max="100" step="10" />
10、range類型
range類型的input元素是一種只允許輸入一段范圍內數值的文本框，它具有min屬性與max屬性，可以設定最小值與最大值（默認為0與100），它還具有steo屬性，可以制定每次拖動的維度，在Opera浏覽器中，用滑動條的方式進行值的制定。
<input type="number" name="number1" value="54" min="3" max="100" step="10" />
11、output元素的追加
在Html5中，追加了新的元素output。output元素定義不同類型的輸出，比如計算結果或腳本的輸出。output元素必須從屬於某個表單，也就是說，必須將它書寫在表單內部，或者對它添加form屬性。目前位置該元素植被Opear浏覽器支持。
<form action="" id="testform"> 請選擇一個數值 <input type="range" name="range1" min="0" max="100" step="5" /> <output onforminput="value=range1.value">50</output> </form>
12、search類型
search類型的input元素是一種專門用來輸入搜索關鍵詞的文本框的文本框。search類型與text類型僅僅在外觀上有卻別。在Safari浏覽器中，它的外觀為操作系統默認的圓角矩形文本框，但這個外觀可以用css央視表進行改寫。在其他浏覽器中，TA的外觀暫與text類型的文本框外觀相同，但可以用CSS樣式表進行改寫。（-webkit-appearance:textfIEld）
<input type="search" name="search1" />
13、tel類型
tel類型的input元素被設計為用來輸入電話號碼的專用文本框。它沒有特殊的校驗規則，不強制輸入數字（因為許多電話號碼通常帶有其他文字），譬如86-010-86670831.但是開發者可以通過pattern屬性來制定對於輸入的電話號碼格式的驗證。
<input type="tel" name="tel1" pattern="15901010831" />
14、color類型
color類型的input元素用來選取顏色，它提供了一個顏色選取器。目前它只在Opear浏覽器與BlackBerry浏覽器中被支持。
<input type="tel" name="tel1" pattern="15901010831" />
綜合運用
在HTML5中追加了這麼多元素後，那麼Html5最基本的表單時什麼樣子呢？這粒拿一個網頁上常用的簡單用戶注冊頁面做例子。在該例子中，綜合使用了Html5中新增的input元素，並對這些元素添加了必要的驗證屬性。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>綜合運用</title>
<style type="text/CSS">
* {
margin:10px;
}
h1 {
font-size: 24px;
}
section {
margin: 20px auto;
}
#input-app{
position:absolute;
right:10px;
top:10px;
}
</style>
</head>
<body>
<section id="input-app">
<h1>綜合運用</h1>
<form action="" name="form1">
<label for="username">姓名</label>
<input type="text" name="username" id="username" required /><br />
<label for="age">年齡</label>
<input type="number" name="age" id="age" min="0" max="100" /><br />
<label for="birthday">出生日期</label>
<input type="date" name="birthday" id="birthday" /><br />
<label for="email">Email</label>
<input type="email" name="email" id="email" required /><br />
<label for="url">個人主頁</label>
<input type="url" name="url" id="url" /><br />
<label for="memo">個人簡介</label>
<textarea name="memo" id="memo" cols="30" rows="10"></textarea><br />
<input type="submit" value="提交" />
</form>
</section>
</body>
</Html>
可以對比下這段代碼在各浏覽器中的不同。個人認為在Opera浏覽器中查看時顯示效果最佳。