Day3 | Form 表單

發表於 分類於
關於 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 屬性中，同組 radio 與 checkbox 屬性的 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> 結尾。

❒ 參考資訊