育將電腦工作室 - 線上書籍

5-7 表單

5-7-2 doPost(e) next

111網頁前端設計工程師培訓班
===============

自訂驗證：在input 加上

```javascript
oninvalid="setCustomValidity('這個欄位必填');" oninput="setCustomValidity('');"
```

```javascript

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

<div class="mb-3">
        <label for="name" class="form-label">姓名</label>
        <input type="text" name='name' value='' class="form-control" id="name" aria-describedby="nameHelp" required>
        <div id="nameHelp" class="form-text">請輸入姓名(網頁無障礙語法)</div>
      </div>

<div class="mb-3">
        <label for="url" class="form-label">網址</label>
        <input type="url" name="url" value=''  class="form-control" id="url" aria-describedby="urlHelp" >
        <div id="urlHelp" class="form-text">請輸入網址</div>
      </div>

<div class="mb-3">
        <label for="email" class="form-label">EMAIL</label>
        <input type="email" name="email" value=''  class="form-control" id="email" aria-describedby="emailHelp" >
        <div id="emailHelp" class="form-text">請輸入EMAIL</div>
      </div>

<div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" name="password" value=''  class="form-control" id="password">
      </div>

<div class="mb-3">
        <label for="date" class="form-label">日期方塊</label>
        <input type="date" name="date" value=''  class="form-control" id="date">
      </div>

<div class="mb-3">
        <label for="month" class="form-label">年月方塊</label>
        <input type="month" name="month" value=''  class="form-control" id="month">
      </div>

<div class="mb-3">
        <label for="week" class="form-label">年週方塊</label>
        <input type="week" name="week" value=''  class="form-control" id="week">
      </div>

<div class="mb-3">
        <label for="number" class="form-label">數字方塊</label>
        <input type="number" name="number" value=''  class="form-control" id="number">
      </div>

<div class="mb-3">
        <label for="color" class="form-label">顏色選擇器</label>
        <input type="color" name="color" value='#000000'  class="form-control" id="color">
      </div>

<div class="mb-3">
        <label for="search" class="form-label">搜尋方塊</label>
        <input type="search" name="search" value=''  class="form-control" id="search">
      </div>

<div class="mb-3">
        <label for="range" class="form-label">滑動方塊</label>
        <input type="range" name="range" value=''  class="form-control" id="range" min="0" max="100" value="90" step="1">
      </div>

<div class="mb-3">
        <label class="form-label w-100">單選</label>
        <div class="form-check form-check-inline">
          <input type="radio" name="radio" value='單選1'  class="form-check-input" id="radio_1">
          <label class="form-check-label" for="radio_1">單選1</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" name="radio" value='單選2'  class="form-check-input" id="radio_2" checked>
          <label class="form-check-label" for="radio_2">單選2</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="radio" name="radio" value='單選3'  class="form-check-input" id="radio_3">
          <label class="form-check-label" for="radio_3">單選3</label>
        </div>
      </div>

<div class="mb-3">
        <label class="form-label w-100">多選</label>
        <div class="form-check form-check-inline">
          <input type="checkbox" name="checkbox" value='多選1'  class="form-check-input" id="checkbox_1">
          <label class="form-check-label" for="checkbox_1">多選1</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" name="checkbox" value='多選2'  class="form-check-input" id="checkbox_2" checked>
          <label class="form-check-label" for="checkbox_2">多選2</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" name="checkbox" value='多選3'  class="form-check-input" id="checkbox_3">
          <label class="form-check-label" for="checkbox_3">多選3</label>
        </div>
      </div>

<div class="mb-3">
        <label class="form-label">下拉選單</label>
        <select name="select" class="form-select" id="select">
          <option value="下拉選單1">下拉選單1</option>
          <option value="下拉選單2" selected>下拉選單2</option>
          <option value="下拉選單3">下拉選單3</option>
        </select>
      </div>

<div class="mb-3">
        <label class="form-label">下拉選單(多選)</label>
        <select name="select_m" class="form-select" id="select_m" multiple>
          <option value="下拉選單(多選)1">下拉選單(多選)1</option>
          <option value="下拉選單(多選)2" selected>下拉選單(多選)2</option>
          <option value="下拉選單(多選)3">下拉選單(多選)3</option>
        </select>
      </div>

<div class="mb-3">
        <label class="form-label">文字區域</label>
        <textarea name="textarea" class="form-control" id="textarea" rows="5" >文字區域

```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown