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>

 參考網址