<h1>表單</h1>

form-control-lg(大表格)
form-control-sm(小表格)
但是提示文字會一起放大和縮小（placeholder="提示文字"）
所以還是使用 py-x 推空間就可以。

form-control
form:表單
control:控制

> **怎麼改 .form-control<br>找半天找沒有 ＄form-control 到底要去哪裡改？**


Ａ：到 **variables.scss**
找 form-check

<label>:標籤元素 (配form-label)
<input>：輸入元素 (配form-control)
<select>：選單元素 (配form-select)
<textarea>：多行文字輸入元素
<button>：按鈕元素

> 組合搭配與順序

·label+form-label：推 margin-bottom
（$form-label-margin-bottom:.5rem !default;）

input+form-control：輸入框的樣式
<div>
<label class="form-label"></label>(輸入框上面的標籤)
<input class="form-control"></input>(輸入框)
</div>

·select+option(選單)
下拉選單：
<select class="form-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
</select>

input可以用的東西有
class="form-control（Ｖ）form-check" type="決定欄位用途（如下表）" name="提交到後台的標籤" id="標籤標誌不允許有重複"

比方說三個選項是一組(選取組合)
可以是
<input class="form-check-input" type="radio" name="option" id="option1">
<label class="form-check-label" for="option1">option1</label>
<input class="form-check-input" type="radio" name="option" id="option2">
<label class="form-check-label" for="option2">option2</label>
<input class="form-check-input" type="radio" name="option" id="option3">
<label class="form-check-label" for="option3">option3</label>

name可以一樣
id不能重複 for隨id

**[好用的表](https://matthung0807.blogspot.com/2019/08/html-input-value.html#google_vignette)**

form-check

補充：
aria-label="(前面屬性照抄 ex:input)" (視障軟體判讀)