這邊的筆記主要紀錄Bootstrap的form表單元件的兩個部分

跟form表單相關的className套在哪一個標籤上
HTML5表單觀念

form-group

當某個className叫form-group的HTML標籤，通常其內部都會包住以下三種元素
label標籤、input標籤和 small標籤，那small標籤不一定會存在。
以下的例題中有六種狀況，會在下面分別對這六種狀況做介紹

範例中第一個form-group

那你可以看到在<form>標籤裡面的第一層div，他的class就是form-group。
那在這個form-group裡面的input欄位的class名稱是form-control，
那在這個form-group裡面的label是不用特地為它的className做設定的，
那在這個form-group裡面的samll標籤的class名稱是form-text
此時，input欄位和small標籤的樣式，都會變成Bootstrap的制定樣式了。

範例中第二個form-group

它的input標籤的className一樣要被命名為form-control。
那跟第一個form-group的input欄位不同的地方是type，
因為，一個是要輸入email，另一個是要輸入password，所以，功能不一樣，type的內容也會不一樣。

範例中第三個form-check

這邊要注意一下囉～～～
這邊是要使用checkbox，
而在bootstrap中的checkbox外圍要用form-check把它包裹起來。
接著，input標籤的className要改成form-check-input，
在label標籤的className要改成form-check-label。

form-check中，input和label標籤的另外的寫法

除了在上面的範例中的利用label標籤的for值去對應相同id的input標籤的元件之外，
還有另外一種不需要在label中加入for也可以點擊到相對應的input元件的寫法，
也就是將label包在該對應的input元件外面，
ex:

<div class="form-check">
	<label class="form-check-label">
		<input type="checkbox" class="form-control">Check me out
	</label>
</div>

以上的寫法就可以達成一樣的效果囉～～

form-group v.s. form-check

在bootstrap中，若表單有東西要輸入(像input)的話，外層要用form-group包裹起來。
若內層有checkbox或radiobox要使用的話，外層要用form-check包裹起來喔。

範例中第四個form-group(單選型select)

這邊這個範例可以看到form-group裡面是包裹著select。
那我們一樣要為這個select的class加上form-control。

範例中第五個form-group(多選型select)

這邊form-group裡面一樣是包裹住select元件，所以，該select的class要加入form-control，
而這邊的select比較不一樣喔，這邊的是多選型的select，
所以，在select的html標籤中要加入multiple。

範例中第六個form-group(textarea)

這邊form-group裡面是包裹住textarea元件，
那textarea元件的class要加入form-control。

以上的範例小結論

首先，不管form-group或者form-check它們的外層，都會包在一個<form></form>的html標籤內。

調正input欄位的大小

只要在input欄位的class名稱中的form-control後面加上sm或lg即可調整其大小囉，
什麼都沒加的話，就維持原本的樣式大小囉。
ex:

<div class="demo">
  <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
  <input class="form-control" type="text" placeholder="Default input">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

注意看一下這些input欄位的className寫法，前面有一個基底樣式form-control後面才是接
樣式的classNameform-control-sm之類的修飾該基底樣式的其他樣式。

調正select欄位的大小

只要在select欄位的class名稱中的form-control後面加上sm或lg即可調整其大小囉，
什麼都沒加的話，就維持原本的樣式大小囉。
ex:

<div class="demo">
	<select class="form-control form-control-lg">
        <option>Large select</option>
    </select>
    <select class="form-control">
        <option>Default select</option>
    </select>
    <select class="form-control form-control-sm">
        <option>Small select</option>
    </select>
</div>

它的className一樣是由基底樣式和修飾的樣式所組成。

input欄位readonly和disabled差別

以上的範例
若我們希望一個input欄位是唯讀的效果的話，我們就在該input的html標籤中，
加入readonly屬性就ok囉。
若我們希望一個input欄位是無法被使用的效果的話，我們就在該input的html標籤中，
加入disabled屬性就ok囉。

以上這兩種屬性的差別在於readonly的input欄位可以被tab鍵或滑鼠點選到。
但是，disabled的input欄位是你用tab鍵或滑鼠都點選不到的。

Landy Blog

bootstrap form的功能筆記