---
# System prepended metadata

title: 表單

---

<h1>表單</h1>

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

form-control
form:表單
control:控制


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

![form-control.png](https://hackmd.io/_uploads/SkIG4NWQT.png)

Ａ：到 **variables.scss**
找 form-check
![截圖 2023-11-02 下午10.41.12.png](https://hackmd.io/_uploads/SJeZNB4WQT.png)


<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)**
    ![截圖 2023-11-03 上午12.26.45.png](https://hackmd.io/_uploads/Sk3yRr-Qa.png)
    
    
    
form-check
    
    
補充：
aria-label="(前面屬性照抄 ex:input)" (視障軟體判讀)
    
    
  