:::

3-3-4-3 radio 單選或 checkbox 多選表單元件

  1. radio 單選或 checkbox 多選可參考:https://bootstrap5.hexschool.com/docs/5.0/forms/checks-radios/#inline
  2. radio 單選(行內用法)預設值用checked標出
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="輸入框name" id="輸入框1ID" value="選項值1" checked>
      <label class="form-check-label" for="輸入框1ID">選項文字1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="輸入框name" id="輸入框2ID" value="選項值2">
      <label class="form-check-label" for="輸入框2ID">選項文字2</label>
    </div>

     

  3. checkbox 多選(行內用法)預設值用checked標出,可多個,注意 name 要加上 [] 才能多選。
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="輸入框name[]" id="輸入框1ID" value="選項值1" checked>
      <label class="form-check-label" for="輸入框1ID">選項文字1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="輸入框name[]" id="輸入框2ID" value="選項值2">
      <label class="form-check-label" for="輸入框2ID">選項文字2</label>
    </div>

     

  4. 例如:
    <label class="col-sm-2 col-form-label"> 文章分類 </label>
    <div class="col-sm-10">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="cate_id" id="cate_id_1" value="1" />
        <label class="form-check-label" for="cate_id_1">榮譽榜</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="cate_id" id="cate_id_2" value="2" />
        <label class="form-check-label" for="cate_id_2">傑出校友</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="cate_id" id="cate_id_3" value="3" checked />
        <label class="form-check-label" for="cate_id_3">校園新聞</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="cate_id" id="cate_id_4" value="4" />
        <label class="form-check-label" for="cate_id_4">海外交流</label>
      </div>
    </div>


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1793

計數器

今天: 4067406740674067
昨天: 5069506950695069
總計: 5134515513451551345155134515513451551345155134515