Day3 | Form 表單

❒ Form 表單

  • <form> 標籤是 HTML 中用來裝表單的容器, <form action="#">..</form> 中的 action 用來指定一個位址 ( URL ),這個位址是告訴瀏覽器當使用者按送出表單後,要將表格的內容送去哪邊。所以建議於表單外層使用 <form> 標籤做包覆。

  • 避免將一個 label 標籤與多個控制元件相關聯, label 與 select 要分別設定,一個 label 標籤對應一個 select

    • 相關討論:stackoverflow 的相關討論

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <form action="#">
      <label for="year">年份</label>
      <select id="year" aria-label="year">
      <option value="2019">2019</option>
      <option value="2020">2020</option>
      </select>
      <label for="month">月份</label>
      <select id="month" aria-label="month">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      </select>
      </form>

❒ 常見的 HTML 表單元素

  • <label> 標籤
    • <label> 標籤的 for 屬性會對應 <input> 標籤的 id 屬性。
  • <input> 標籤: 輸入欄位,可搭配 type 屬性顯示不同方法。
  • <textarea> 標籤:多行段落文字輸入欄位。
  • <select> 標籤搭配 <option> 標籤:下拉式選單。
  • <datalist> 標籤:下拉選項外也附帶文字輸入篩選功能。

❒ 常見的 HTML 表單元素屬性

  • name 屬性:name 中資料會顯示在網址上,提交表單後可從網址上的傳送值得知填的資訊取出對應欄位值。
    • type 屬性中,同組 radiocheckbox 屬性的 name 須設定同名,才能表示是同組。CodePen 範例
  • disabled 屬性:禁止使用該表單元素。
  • value 屬性:表單元素的初始值。
  • placeholder 屬性:用法 <input placeholder="想顯示的文字"> ,用戶輸入值前 placeholder 屬性中的文字會顯示於欄位上。
    • placeholder 屬性適用於以下輸入類型:文本、搜索、url、電話、電子郵件和密碼。
  • for 屬性與 id 屬性:
    • <label> 標籤的 for 屬性會對應 <input> 標籤的 id 屬性。
    • <label> 標籤的 for 屬性會對應 <select> 標籤的 id 屬性。

❒ datalist 與 option 標籤差異

CodePen 範例

使用時機

datalist 標籤適用於選項很多的選單,除了下拉選項外也附帶文字輸入篩選功能,輸入關鍵字會跳出對應的選項。select 標籤需要手動選取選單內的選項。

datalist 架構

1
2
3
4
5
6
7
8
9
10
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
  • label 標籤的 for 屬性」對應「 input 標籤的 id 屬性」。
  • 架構為 input 加上 datalist 標籤,「input 標籤的 list 屬性」對應 「datalist 標籤的 id 屬性」。
  • datalist 內的 <option> 標籤與 select 標籤不同的是,datalist 內的 <option> 標籤不需要 </option> 結尾。
  • input 標籤的 name 屬性
    • 如果網頁內的資料傳遞是使用實際頁面非 API ( SSR ),select 標籤就需要加上 name 屬性,後端工程師可由此知道此資訊名稱。基本上 name 是給後端看的, id 是前端操作用的。一般 name 屬性會與 id 屬性命名相同。
    • name 中資料會顯示在網址上,提交表單後可從網址上的傳送值得知填的資訊。提交表單後,文字欄位會以 name 中的值當欄位名稱 。

select 架構

1
2
3
4
5
6
7
8
<label for="city-select">Choose a City:</label>

<select name="CitySelect" id="city-select">
<option value="" selected disabled>--請選取區域--</option>
<option value="Kaohsiung">高雄市</option>
<option value="Tainan">台南市</option>
<option value="Taichung">台中市</option>
</select>
  • label 標籤的 for 屬性」對應「 input 標籤的 id 屬性」。
  • select 內的 <option> 標籤與 datalist 標籤不同的是,select 標籤內的 <option> 需要 </option> 結尾。

參考資訊