前言
介紹這麼多東西，總要有可以跟使用者互動的功能吧，難道我要像「 我是不是你最疼愛的人，你為什麼不說話 」一樣嗎？這時候表單就登場了！表單在前端很常會用到，像是註冊和登入⋯⋯等等頁面，那表單有哪些東西呢，繼續看下去。
官方網站的 Forms 頁面
基本表單
確保在輸入框上使用正確的 type 屬性（ 例如，email 用於電子郵件地址或 number 用於數字信息 ），以利用較新的輸入控制，如電子郵件驗證、號碼選擇等。
<label> for 要對應到 <input> 的 id
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
表單文字
使用 .form-text 可以創建塊級或是行內的表單文字。
表單文字需要與控制元件相關聯
表單文字應該使用 aria-describedby 屬性與表單控制元件明確關連，這將確保輔助技術（ 例如螢幕閱讀器 ）在用戶 focus 控制元件或輸入 input 時會宣讀此表單文字。
在輸入框底下的表單文字可以設置樣式 .form-text 。如果表單文字使用的是塊級元素，則會添加一個上邊距，以便輕鬆的與上方的輸入框隔開。
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
可以使用任何典型的 HTML 行內元素實現行內文字（ 可以是 <span> , <small> 或是任何其他行內元素，並加上 form-text 類別 ）。
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
親和性
確保所有表單控制元件都具有適當的親和性名稱，以便將其目的傳達給輔助技術的用戶，實現此目的的最簡單方法是使用 <label> 元素或是按鈕，以包含足夠的描述性文字作為 <button>...</button> 內容的一部分。
在一些情況下無法包含可見的 <label> 或適當的文字內容，還是有其他替代方案可以提供親和性的名稱，例如：
<label>元素選擇使用.visually-hidden類別作隱藏。- 使用
aria-labelledby指向一個可以用作標籤的現有元素。 - 提供一個
title屬性。 - 使用
aria-label明確的在元素上設置親和性名稱。
如果以上這些都不存在，那麼輔助技術可能會訴諸使用 placeholder 屬性作為 <input> 和 <textarea> 元素上親和性名稱的後備。
儘管使用視覺隱藏的內容（ .visually-hidden、 aria-label ，甚至是當表單輸入欄位有內容時就會消失的 placeholder ）將有利於輔助技術使用者，但對於某些用戶而言缺少可見的標籤文字仍然可能會帶來問題，對於親和性與可用性來說，某些形式的可見標籤通常是最佳方法。
官方網站的 Form controls 頁面
尺寸
使用 .form-control-lg 和 .form-control-sm 設置高度。
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
禁用表格
在輸入框 input 加上 disabled 以避免使用者操作並讓它看起來更淡。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
將 disabled 屬性加入到 <fieldset> 中以禁用其中所有控制元件，瀏覽器將所有位於 <fieldset disabled> 標籤內部的原生表單控制元件（ <input> , <select> , 和 <button> 元素 ）視為禁用的，避免它們與鍵盤、滑鼠產生互動。
然而，如果表單內還包含了自定義的類按鈕元素像是 <a class="btn btn-*">...</a> ，這些元素只會被賦予 pointer-events: none 的樣式，意味著它們仍然可以使用鍵盤進行聚焦、操作，在這種情況下，必須透過加入 tabindex="-1" 來手動修改這些控制元件防止它們獲得聚焦，並加入 aria-disabled="disabled" 向輔助技術傳達其狀態。
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<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>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
僅能閱讀
在 input 上加入 readonly 以防止修改 input 的值，僅能閱讀的 input 顯示較淡（ 就像禁用的輸入 ），但保留標準游標。
<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>
僅能閱讀的文本
如果您希望將 <input readonly> 元素設置為純文本，請使用 .form-control-plaintext 來刪除預設表單純文字樣式，並保留適當的 margin 和 padding。
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>
檔案 input
<div class="mb-3">
<label for="formFile" class="form-label">選擇一個檔案的 input 按鈕</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">選擇多個檔案的 input 按鈕</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">禁止選擇檔案的 input 按鈕</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">小尺寸的 input 按鈕</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">大尺寸的 input 按鈕</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
顏色選擇器
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
資料清單
資料清單允許你創造一組可以在 input 內部被存取（ 並自動補齊 ）的 <option> ，它們跟 <select> 元素很相似，但是在樣式設定上具有更多限制與差異，雖然大部分的瀏覽器和作業系統都包含一些對於 <datalist> 元素的支持，但他們的樣式充其量是不一致的。
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
