HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google Maps注意
- 以下的程式碼皆是寫於<body>與</body>標籤之內。
- 程式碼的示範，已由本網站「樣式表自動修飾」，實際測試將依各家瀏覽器「預設樣式表不同而有差距」。
<input>標籤可利用不同的 type 屬性，製成不同功用的表單元件。
value 屬性
value 設定欄位的預設值。
- <input type="text" value="初始值">
readonly 屬性
此欄位只可讀而無法改變輸入值。
- <input type="text" value="只可讀而不能修改"
- <input type="text" value="只可讀而不能修改"
- 行1：縮寫語法。
- 行2：正確寫法。
disabled 屬性
此屬性會讓元素無法被用戶使用。
- <input type="text" value="無法使用此欄位"
- <input type="text" value="無法使用此欄位"
- 行1：縮寫語法。
- 行2：正確寫法。
size 屬性
設定欄位寬度，值為「字元數」。
- 以7個(英文)字為寬度：<input type="text" size="7">
maxlength 屬性
指定最大字元數。agar.io 名稱輸入即使用此語法，更動此網站程式碼後將可使名稱長度不受限制。
maxlength 屬性沒有提供超出字數提醒，只會裁掉多餘的字數。如果需要提醒功能，請使用 javascript 語法
- 最多 10 個字：<input type="text" maxlength="10">
HTML5 新增屬性
以下所介紹的屬性皆為 html5 新增，故尚無法支援所有瀏覽器。
autofocus 屬性
自動對焦，當網頁載入時，游標會自動移動到上面
- <input type="text"
- <p>若無法看出效果，請重新整理。</p>
autocomplete 屬性
autocomplete 屬性可以使表單元件根摢之前使用者所填入的資料自動完成。(IE9以前 不支援)
autocomplete 可使用在<form>元素，使<form>內的所有表單元件都處於自動完成狀態。利用這個方法，可以使<form>設定自動完成，而在不需要自動完成的元件另外調整，使程式碼更為簡潔。
- <form
- 姓名：<input type="text" name="name"><br/>
- 暱稱：<input type="text" name="nickname"><br/>
- 帳號：<input type="text" name="id"><br/>
- 密碼：<input type="password" name="password" autocomplete="off"><br/>
- <input type="submit">
- </form>
novalidate 屬性
validate 在英文上是驗證的意思，novalidate 就是不驗證，所以當<form>屬性使用此屬性後將不會自動驗證那些原本應該帶有驗證功能的元素，例如：type="email"。(Safari, IE9以前 不支援)
- <form
- 電郵：<input type="email"><br/>
- <input type="submit" value="不驗證">
- </form>
- <hr/>
- <form>
- 電郵：<input type="email"><br/>
- <input type="submit" value="會驗證">
- </form>
- 行1,6：有使用 novalidate 屬性在支援的瀏覽器不會進行驗證；而沒有使用則會自動驗證。
- 行2,7：type="email" 在 Safari 中不會驗證，所以看不出差別。
form 屬性
當表單元件無法包含在<form>和</form>之間時，可利用 form 屬性配對。原理類似 type="radio" 使用同個 name 值，表示他們是一組的。(IE 不支援)
- <form action="/html/form/ex-1.php" method="get"
- 哪個學校最棒？<br>
- <input type="radio" name="school" value="tfg">北一女中<br>
- <input type="radio" name="school" value="zsgh" checked>中山女中<br>
- </form>
- <input type="radio" name="school" value="cmsgh" form="best-school">景美女中<br>
- <input type="submit" value="傳送" form="best-school">
- 行1,7,8：<form>的id值與<input>的form值進行配對。
以下五種屬性功能皆是用來代替form原先即存在的屬性，且若兩種同功能之屬性同時設定在form與input內，系統將以設定於input內的屬性為優先。
formaction 屬性
與<form>的action屬性類似，都是用來指定資料該被傳送到哪個網址，但如果同在<form>設定 action，也同時在<input>設定formaction，formaction會被優先考慮。
而formaction這個屬性要與按鈕做為搭配，所以只有 type="submit"(普通按鈕) 及 type="image"(圖片按鈕) 才能加入formaction屬性。
formenctype 屬性
formenctype 用來表示當資料被傳送時該如何被加密，(只有在使用post傳值時可用，也就是method="post")。
formenctype屬性與formaction有類似功用，就是form原先有的屬性搬到<input>。而formenctype即是把<form>的enctype屬性移個<input>使用。除此之外若同時設定formenctype與enctype，enctype會被優先考慮。
而formenctype這個屬性要與按鈕做為搭配，所以只有 type="submit"(普通按鈕) 及 type="image"(圖片按鈕) 才能加入formenctype屬性。
其他類似屬性
其他類似的屬性有：formmethod,formnovalidate,formtarget。
formmethod代替method,formnovalidate代替novalidate,formtarget代替target。
height,width屬性
用來設定圖片按鈕(type="image")的高(height)及寬(width)，屬性值不必填寫單位，單位一律採px。
list 屬性
利用<input>的list屬性與<datalist>搭配，可以做出邊打文字邊跳出預設清單的效果。(Safari不支援)
min and max 屬性
min和max分別用來指定最小值及最大值，而適用此的type為：number, range, date, datetime-local, month, time 或 week時才可使用。
multiple 屬性
multiple翻成中文的意思即「多樣的」的意思。在未設定multiple的情況下，使用type為file時，僅能選取一個檔案上傳，若使用multiple屬性，則可以選擇多個檔案。
pattern 屬性
pattern用來指定輸入框應符合的格式。pattern內填入「正則表達式」，若所輸入文字不符合此「正則表達式」，則資料將無法傳送。(Safari10, IE9以前 不支援不支援)
安全的網頁設計不應該只有在前端網頁防止被傳進來的格式，應於後端檢查，以免前端程式碼遭到惡意修改。但此屬性仍有其價值，其目的在提醒使用者不應傳送你指定格式外的資料。
placeholder 屬性
在使用者尚未輸入資料前使用placeholder給與使用者提示，使用者輸入資料後提示將自動消失。
required 屬性
required即所謂的「必填」若使用者未在設有required屬性的資料填答，表單將無法傳輸。
安全的網頁設計不應該只有在前端網頁防止使用者未填答情形，應於後端檢查，以免前端程式碼遭到惡意修改。但此屬性仍有其價值，其目的在提醒使用者應填答未填選之欄位。
step 屬性
step屬性專門處理數字方面的資料，設定數字一次加減的單位，比如我設定3，則使用者能輸入的數即為：-6,-3,0,3,6...等。(IE9以前 不支援)