表單

1.建立表單

<form id="signupForm">
  <h2>會員註冊</h2>

form：整個表單的容器，而 id="signupForm" 是為了方便之後的進行。
h2：表單標題，讓使用者知道需要註冊會員。

2.表單封面

  <label>
    <input type="text" name="username" required minlength="1" maxlength="12"
           pattern="[A-Z a-z 0-9]+" title="只能用英文或數字，長度 12 以下，不可為空">
  </label>

label：表單欄位的標題，讓使用者知道要輸入什麼。
input type="text"：一般文字的輸入框。
required：代表必填。
minlength / maxlength：限制字數範圍。
pattern：規定只能輸入英文與數字。
title：當輸入不符合要求的規定時，對使用者進行通知。

3.電子郵件欄位

  <label>
    <input type="email" name="email" required>
  </label>

type="email"：自動驗證 Email 格式，切記必須要有 @ 和網域。

4.使用者密碼

  <label>
    <input type="password" name="password" required minlength="8"
           pattern="(?=.*[A-Z])(?=.*\d).{6,}"
           title="至少 6 字，含 1 個大寫與數字">
  </label>

type="password"：輸入內容會隱藏，常用於密碼這種隱私輸入。
minlength="8"：代表至少 8 字。
pattern="(?=.[A-Z])(?=.\d).{6,}"：必須包含至少一個大寫字母和一個數字。

5.確認密碼

  <label>確認密碼：
    <input type="password" name="confirmPassword" required>
  </label>

type="password"：再次輸入密碼，以防使用者輸入錯誤。
required：代表必填，但檢查是否與上面密碼一致，需要靠 JavaScript 來檢查。

6.內容

  <label>喜歡的顏色：
    <input type="color" name="favColor" value="#3366ff">
  </label>

type="color"：瀏覽器會顯示顏色選擇器。
value="#3366ff"：藍色的代碼。

7.年齡條件設定

  <label>年齡：
    <input type="number" name="age" min="10" max="150" step="1">
  </label>

type="number"：顯示數字輸入框，會有個上下增減按鈕。
min="10"：最小值 10。
max="150"：最大值 150。
step="1"：代表只能是整數。

8.表單送出

  <button type="submit">送出</button>
</form>
<div id="errorBox"></div>

button type="submit"：送出表單。
div id="errorBox"：預留區塊，可以額外靠 JavaScript 來顯示錯誤訊息。