Categories: 前端相關

筆記 | 常用 HTML form 表單標籤

不知道為何我很常忘記 HTML form 這個標籤相關的程式碼….
可能因為目前工作上遇到的網頁都沒有表單的需求，畢竟做的都是行銷活動的網頁，只是上六角的課上到AJAX的部分時，看起來以後轉職的話，不管是跟伺服器拿取資料或是登入與註冊這種常見的功能都需要用到，所以還是學清楚一點呀~
寫個筆記將大部分較常用的 HTML form 表單標籤與屬性記錄下來，以方便查詢。

<form>的標籤屬性
放在<form>裡的標籤元素(也稱控制元件)
可添加的表單標籤的屬性
其他表單標籤

<form>的標籤屬性

action = url

用來指定表單送出後的目的網址。

method = POST / GET

用來指定資料傳輸時用的 HTTP 協議，
POST用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。
GET用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出。
target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。

target 用來指定瀏覽器要如何顯示表單送出後伺服器回應的結果。

_self: 顯示在表單所在的當前視窗
_blank: 顯示在新頁籤/視窗
_parent: 顯示在上一層的視窗 (如果表單是放在<frame>裡)
_top: 顯示在最頂層的視窗

autocomplete 這個表單中的欄位是否啟用瀏覽器自動完成機制

off: 否
on: 是，預設值

放在<form>裡的標籤元素(也稱控制元件)

<input> 輸入欄位
<input>的type屬性用來指定input的呈現方式
<input type=”text”> 文字輸入欄位
<input type=”password”> 隱藏文字的輸入欄位
<input type=”checkbox”> 核取方框
<input type=”radio”> 選項按鈕
<input type=”submit”> 遞交表單按鈕

<textarea>多行文字輸入欄位

<select>+<option> 下拉式選單
<select>用來建立下拉式選單，<option>則代表選單中的選項。

可添加的表單標籤的屬性

．name: 代表表單送出時，該欄位的名稱。
　<input type=”text” name=”name” value=”yuki”>
　送出表單後，會以name=yuki傳給伺服器。
． value: 當作預設值或代表傳遞資料的值。
　<input type=”submit”>的value則代表按鈕裡的文字。
． autofocus: 載入表單後，將游標主動聚焦的欄位。
． disabled: 禁止使用的欄位。
． placeholder: 可呈現在欄位裡的提示文字。
． required: 將欄位設定為必填。
． maxlength: 輸入的文字上限。
． minlength: 最少須輸入的文字數量。

其他表單標籤

<fieldset> 是區塊形式的表單標籤，可將控制元件做分組，搭配<legend>標籤，表示分組標題。
<legend> 為<fieldset>做命名。

<label>可為欄位呈現標題，並可使用for屬性增加欄位的點擊範圍，或將欄位包在標籤裡亦可。

<fieldset>
    <legend>My pet</legend>
    <label>Dog name:</label> <input name="name">
    <label>age:</label> <input type="number" name="age">
  </fieldset>

<optgroup>用來將<select>裡的選項做分組，使用label屬性命名分組標題。

<select name="partyFood">
  <optgroup label="Eat">
    <option>Burger</option>
    <option>Sausage</option>
    <option>Taco</option>
  </optgroup>
  <optgroup label="Drink">
    <option>Grey Tea</option>
    <option>Cola</option>
    <option>Lemonade</option>
  </optgroup>
</select>

Yuki Hiew