接續上一篇還沒紀錄完的bootstrap form元件的內容。

form-check

當裡面是要使用checkbox和radiobox元件的時候，它們的外層，是要用form-check包裹起來喔。

checkbox

在以上這個範例可以看到在checkbox中的其中一個input標籤上有寫了disabled，
代表該input無法被點取囉。
如果你希望整個checkbox都無法被選取的話，你要在這些checkbox的外層用一個<fieldset></fieldset>標籤把他們整個包起來，並在這個fieldset的html標籤上加入disabled屬性就可以達成囉。

radiobox

那這個radiobox的範例，你可以看到有三個form-check構成這個radiobox。
那你可以看到每一個form-check裡面的input欄位的name屬性值都是一樣的，代表它們是屬於同一個radiobox。
那它的type要寫入radio，它會變成radiobox的選項模式。
那在每個form-check的input的class名稱一樣是要寫入form-check-input，而label標籤的class名稱是form-check-label。
在最後一個input欄位中，加入了disabled屬性，所以，該選項就無法被選取囉~

form-check-inline 使選項水平排列

如果我們不希望heckbox和radiobox它們的選項不要垂直排列的話，
我們只需要在外層的form-check的class中，再加上form-check-inline，就可以囉。
ex:

<div class="demo">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
  </div>
</div>

form-row調整格線系統間距

你可以看到用form-row那一個區塊的input欄位之間會比較接近。
原本的row那一個區塊的input欄位之間會比較遠。
那由於form-row的關係，可以讓我們的form內容的排列更為彈性囉。
也因為用form-row的關係我們可以利用格線系統將三個選項排在同一行中。

col-form-label

像上面form-row的範例中，你注意在那些lable中的class有特別加入col-form-label，
這個class的效果是為了讓在在格線系統下的label和input欄位能夠更為對齊。
特別是在一個form-group有使用格線系統，並把label和input欄位分配在左右兩邊的排版時，label的className建議要加入control-form-label，來讓排版更為美觀。

以上這個範例，就可以看到有加control-form-label的label的高度跟右邊的input欄位的高度比較對齊。

行內表單 form-inline 讓內部元素排成一列

原本bootstrap的input欄位的寬度預設是100%，故它會把整個父元素寬度佔滿，讓接在這個input欄位的下一個元件直接換行，
如果，你希望這些元件都排在同一行，又不想要動用到格線系統來達成這種佈局的話，
你就必須在form的class中加上form-inline，當加上這個class時，這個form會被加上display:flex的屬性，
進而讓內部的元素全部排成同一行。
ex:

<div class="demo">
  <form class="form-inline">
    <label class="sr-only" for="inlineFormInputName2">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
    </div>

    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>

    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

form-text 表單文字

你在某一個段落的class中，加入form-text，其樣式就會變成表單文字的樣式。
ex:

<div class="demo">
  <label for="inputPassword5">Password</label>
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
  <small id="passwordHelpBlock" class="form-text text-muted">
    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
  </small>
</div>

可以看到這邊是為small的class加入form-text，讓其內文格式變成表單樣式。

禁用表單

當你想要禁用單一的input的話，你就在它的html標籤中，加入disabled屬性就可以了。
ex:

<div class="form-group" >
	<label for="disabledTextInput">Disabled input</label>
	<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled>
</div>

若你想要對整個表單都禁用的話，你就直接在它的外層加上disabled屬性。
ex:

<form>
    <fieldset disabled>
      <div class="form-group" >
        <label for="disabledTextInput">Disabled input</label>
        <input  type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" >
      </div>
      <div class="form-group">
        <label for="disabledSelect">Disabled select menu</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </fieldset>
  </form>

你可以看到我們直接對外層的<fieldset>標籤直接加上disabled屬性，就可直接禁用整個form表單了。

自訂表單樣式

checkbox

你可以看到包裹那些input和label的最外層的div區塊的class名稱是由基底className和樣式className組成的，
分別為custom-control和custom-check一起組成。
而內層的input欄位的className是custom-control-input。
而內層的label的className是custom-control-label

radiobox

你可以看到包裹那些input和label的最外層的div區塊的class名稱是由基底className和樣式className組成的，
分別為custom-control和custom-radio。
而內層的input欄位的className是custom-control-input。
而內層的label的className是custom-control-label。

Landy Blog

bootstrap form的功能筆記-01