📚 表單
===

HTML：

<form action="資料庫" method="POST">
    <label for="mail">電子郵件</label>
    <input type="text" placeholder="提示文字" name="mail" minlength="" maxlength="" required>
        
    <p>type="email"</p>
    <input type="email" name="" id="" pattern="">

    <p>type="radio"</p>
    <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生

    <p>type="checkbox"</p>
    <input type="checkbox" value="movie" name="hobby">電影
    <input type="checkbox" value="music" name="hobby">音樂
    <input type="checkbox" value="book" name="hobby">看書

    <p>type="password"</p>
    <input type="password" id="user-password" name="user-password">

    <p>type="number"</p>
    <input type="number" id="" name="" step="1" min="" max="">

    <p>type="range"</p>
    <input type="range" id="volume" name="volume" min="0" max="100" step="1">

    <p>select:</p>
    <label for="birth">生日</label>
    <select name="birth" id="birth">
        <option value="1900">1900</option>
        <option value="1901">1901</option>
    </select>

    <p>datalist:</p>
    <label >Question:
    <input type="text" list="browsers">
    </label>
    <datalist id="browsers">
        <option value="chrome"></option>
        <option value="firefox"></option>
        <option value="safari"></option>
    </datalist>

    <p>type="date"</p>
    <input type="date" id="party" name="party" value="2017-06-01" min="2017-01-01" max="2017-12-31" required>

    <p>textarea:</p>
    <textarea name="content" id="" cols="30" rows="10"></textarea>

    <p>type="submit"</p>
    <input type="submit" value="下一步" class="css">

    <p>type="button"</p>
    <input type="button" value="點選" class="css">
</form>

>3-> required:強制填寫，禁止空白
>
>1-> method: HTTP
>
>1-> POST: POST請求
>
> name: 告訴資料庫此筆資料為何，通常與id同名
>
> value: 回傳值
>
>6-> pattern: 如追加檢查項目可以加上pattern, 但帶入需**正規表示法**描述字串
>
>21-> step="1": value = min + step*n(0、1、2、3...)
>ex: min=1, step=1.5 ⇒1(1+0)、2.5(1+1.5)、4(1+3)、5.5(1+4.5)、7(1+6)...
>
>24-> step="1": value = step*n(0、1、2、3...)
>ex: step=1.5 ⇒0(0)、1.5(1.5*1)、3(1.5*2)、4.5(1.5*3)...
>
>44-> value: 這裡的value指的是預設的值
>
>47-> cols="30" rows="10": 可寫30*10個字

CSS:

/*滑過去會有手手的提示圖*/
.css{
  cursor:pointer;
}

/*當正確時，有綠色邊框；錯誤時，有紅色邊框*/
input:valid{
  border:2px solid green;
}
input:invalid{
  border:2px solid red;
}

:::success
+ 表單驗証要伴隨著<form>跟<input type="submit">才會執行
+ 若要保留表單驗証、卻又不要送出submit時，監聽的節點要綁整個表格(form)，觸發事件為submit，並在{}裡寫e.preventDefault();
- [codepen](https://codepen.io/super-shrimp/pen/KKqdRjq)
:::

[所有表單樣示codepen](https://codepen.io/super-shrimp/pen/yLXYOxQ?editors=1100)