---
tags: Bootstrap5網頁切版整合術
---
# 5. 表單運用
## 表單運用概觀
表單在運用時需

1. 加上 .form-control, .form-label, .form-text
* **.form-control: 加在`<input>`或`<textarea>`**
* .form-label: 加在`<label>`
* .form-text: 加在輔助文字 例如input下方小字

2. 確認 label for 與 input id 有正確對應，對應id要一樣
3. 確認 input type 使用正確
* input屬性可參考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
* type錯誤範例:
* 密碼沒有使用type="password"，輸入密碼會顯示文字，正確是星號或圓點加密
* 電話沒有使用type="tel"，手機版會出現字母鍵盤，正確是數字鍵盤

4. 確認 button 有正確套用 type
* button沒有使用type="button"，按下button鍵會跟submit一樣，在html網址列結尾出現問號。若不想button有這種效果，就要輸入type="button"

* submit正確是執行form裡面的action屬性，告訴表單你要送去哪，練習時可以不用將表單送出，所以按下submit就會在html網址列結尾出現問號。

## form-control

* .readonly: 只可以閱讀和選取使用


* .form-control-plaintext: 不會出現input外框，選取文字時才會顯示

* 檔案上傳的inpt，要設定type="file"
* .form-control-color: 設定type="color"


* datalist 資料清單
輸入文字可出現提示

## 表單 Select .form-select
## 表單的 Radio 與 Checkbox 運用
* Indeterminate 點擊後就變成一般checkbox 無法再轉回橫槓

* radio為單選 name屬性要設定一樣 才會視為同一群組
* form-switch: 開關效果

* 切換按鈕.btn-check: input checkbox要放在前面，label的for會指向前一個input的id
* .btn-check設定clip和絕對定位，input的格子就不會顯示
* 點擊與未點擊切換.btn-check:checked .btn-outline-primary


## 表單的 Range 樣式
* 可設定range的最小min與最大值max和間距數值step

## 群組式 input
* input-group: 加在外層
* input-group-text: 通常加在文字的地方
* form-control: 加在input、textarea
* flex-nowrap: 預設換行，不換行可加上flex-nowrap
* input-group-斷點: 不建議斷點加在form-control-斷點，建議加在外層調整群組
* 核取方塊checkbox和選項按鈕radio: 不使用.form-control，使用 input-group-text 搭配 form-check-input 製作選項按鈕


* 多個input
* input-group 中有多個 .form-control 可以應用在，允許使用者輸入多個答案時
* 若是要使用到驗證樣式 .input-group 就只能放一個 .form-control

## 表單驗證技巧(很重要)
### 瀏覽器預設驗證功能:

* 瀏覽器預設就有驗證功能，但不會調整樣式
* 若要使用預設驗證:

1. 表單在運用時需，外層加上`<form>`標籤，
2. 內層input需加上`required`屬性 (如果是非必填required可不加，例如備註)
3. 表尾結尾按鈕需加`type="submit"`上，這樣就可以使用瀏覽器本身的驗證功能


### Bootstrap驗證流程:

* bs的驗證主要是加上樣式

1. 在表單form加上novalidate屬性，表示表單還沒經過驗證

2. 在表單form加入.need-vaildation:
用來觸發js用的class，可自訂名稱(js也要跟著改名稱)

3. 加上回應結果
.valid-feedback 成功的回應
.invalid-feedback 失敗的回應

### 伺服器端回饋
* 直接回饋在畫面上

* 伺服器端意味著手動加入回饋樣式，回饋樣式包含：
is-valid, is-invalid
valid-feedback, invalid-feedback

* Q&A:

Q: 伺服器端使用時機?

A: 客戶端驗證 / 伺服器端驗證 這兩個差異是指前後端的驗證


參考資料：
https://ithelp.ithome.com.tw/articles/10206683
https://kknews.cc/zh-tw/code/2brvkny.html

## 新的表單樣式form-floating
* .form-floating: 先放input標籤再放label標籤，範例點擊後 email address會移到上方

## 表單排版技巧
* Gutters: 使用一個row即可，col加總是12就會自動換行，再用gutter調整label與input距離

* 水平表單:
* 範例input的col-sm-10一樣是寫在外層，
**label的col-sm-2會直接寫在同層**，再加上.col-form-label讓文字垂直置中
* legend標籤對應多個radio