Input
以下測試皆為使用Chrome瀏覽器記錄顯示結果，並非所有瀏覽器皆有支援HTML5新的類型及屬性。
◎必填欄位判斷：required
========================
<input id="uname" type="uname" required>
◎自動完成功能：autocomplete
========================
<input id="website" type="url" autocomplete="on">
<input id="email" type="email" autocomplete="off">
補充說明：
Chrome瀏覽器的設定 > 進階設定 > 密碼和表單 > 啟用自動填入功能，輕鬆一按即可填入網頁表單 (Chrome版本23.0.1271.97m )
上方的瀏覽器設定如果打勾的話就會有自動完成的功能，但是如果該選項有打勾可是表單屬性設為 autocomplete="off" 則自動完成會關閉，以避免該表單為重要資料，也因此如果瀏覽器自動完成的選項沒有打勾(表示使用者不想使用此功能)，則表單屬性即使設為 autocomplete="on" 也不會有自動完成的功能。
◎電子郵件欄位：type="email"
========================
<input id="email" type="email" placeholder="example@domain.com" required>
◎網址欄位：type="url"
========================
<input id="website" type="url" placeholder="http://domain.com" required>
◎欄位隱藏：type=" hidden "
========================
<input type="hidden" name="隱藏欄位名稱" value="隱藏欄位值">
◎欄位輸入例
========================
%%%%%%%%%%%%%%%%%%%%%%%%
<form action="#" method="get">
<fieldset>
<p>E-mail：<br /><input type="email" name="user_email" /></p>
<p>URL：<br /><input type="url" name="user_url" /></p>
<p>Number：<br /><input type="number" name="user_number" min="-10" max="10" step="2"/></p>
<p>Range：<br /><input type="range" name="user_range"/></p>
<p>Search：<br /><input type="search" name="user_search" /></p>
<p>Color：<br /><input type="color" name="user_color" /></p>
<input type="submit" /></form>
</fieldset>
◎日期欄位輸入例
========================
%%%%%%%%%%%%%%%%%%%%%%%
<form action="#" method="get">
<fieldset>
<p>Date：<br /><input type="date" name="user_date" /></p>
<p>Month：<br /><input type="month" name="user_month" /></p>
<p>Week：<br /><input type="week" name="user_week" /></p>
<p>Time：<br /><input type="time" name="user_time" /></p>
<p>Datetime：<br /><input type="datetime" name="user_datetime" /></p>
<p>Datetime-Local：<br /><input type="datetime-local" name="user_datetime-local" /></p>
<input type="submit" /></form>
</fieldset>
◎密碼檔案上傳核取方塊選項按鈕欄位輸入例
========================
%%%%%%%%%%%%%%%%%%%%%%%
<fieldset>
<p>文字輸入方塊：<br /><input type="text" value="預設輸入值" /></p>
<p>密碼輸入：<br /><input type="password" value="輸入的字會變星號" /></p>
<p>檔案上傳：<br /><input type="file" />(需配合表單的enctype值)</p>
隱藏欄位：<input type="hidden" value="你看不到我，但這筆資料仍然會隨表單送出" />
</fieldset>
<fieldset>
核取方塊為覆選<br />
<input type="checkbox" value="A" />核取方塊A
<input type="checkbox" value="B" checked="checked" />核取方塊B
<input type="checkbox" value="C" />核取方塊C
<br />
選項按鈕為單選，相同name的選項會被視為一個group。<br />
<input type="radio" value="A1" name="A" id="A" />選項按鈕A-1
<input type="radio" value="A2" name="A" id="A" checked="checked" />選項按鈕A-2
<input type="radio" value="B1" name="B" id="B" checked="checked" />選項按鈕B-1
<input type="radio" value="B2" name="B" id="B" />選項按鈕B-2
</fieldset>
<fieldset>
按鈕的效果與button標籤相同。<br />
<input type="image" src="http://lh5.ggpht.com/_SAlWJ_xow1Y/TEwRvVCHPAI/AAAAAAAABV4/nz6nIc3Tt1E/omew_logo.gif" />
<input type="submit" value="送出表單" />
<input type="reset" value="重置表單" />
<input type="button" value="一般按鈕" />
</fieldset>
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
◎選單欄位： select
========================
<form action="http://www.crazyit.org" method="post">
下面是簡單的下拉式選單：<br />
<select id="skills" name="skills">
<option value="java">Java語言</option>
<option value="c">C語言</option>
<option value="ruby">Ruby語言</option>
</select><br /><br /><br />
下面是允許多選的清單方塊：<br />
<select id="books" name="books"
multiple="multiple" size="4">
<option value="java">圖解網頁設計必學的9堂課</option>
<option value="android">CSS3網頁設計實作應用</option>
<option value="ee">一定要學會的HTML5</option>
</select><br />
下面是允許多選的清單方塊：<br />
<select id="leegang" name="leegang"
multiple="multiple" size="6">
<optgroup label="網頁設計系列書籍">
<option value="java" >圖解網頁設計必學的9堂課</option>
<option value="android">CSS3網頁設計實作應用</option>
<option value="ee">一定要學會的HTML5</option>
</optgroup>
<optgroup label="其他書籍">
<option value="struts">Eclipse完全攻略</option>
<option value="ror">if與else的思考術</option>
</optgroup>
</select><br />
<button type="submit"><b>提交</b></button><br />
</form>
