Bootstrap 表單：初學者的全方位指南

你好啊，有志於網頁開發的各位！作為一位具有多年經驗的計算機科學老師，我非常興奮能夠引導你們進入 Bootstrap 表單的精彩世界。別擔心你們是編程新手——我們會從基礎開始，逐步進行。在這個教學結束時，你們將能夠像專業人士一樣創建表單！

Bootstrap - Forms

Bootstrap 表單介紹

在我們深入之前，讓我們先討論一下為什麼表單這麼重要。想像你在一個咖啡館，咖啡師詢問你的訂單。這其實就是網站上表單的作用——它從用戶那裡收集信息。Bootstrap，我們友好的鄰居 CSS 框架，讓創建這些表單變得非常簡單！

基本表單

讓我們從一個簡單的表單開始。這裡有一個基本示例：

<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">電子郵件地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我們絕不會將你的電子郵件地址與其他人分享。</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密碼</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">勾選我</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>

讓我們分解一下：

<form> 標籤包住了我們整個表單。
每個表單元素都被一個帶有 mb-3 類的 <div> 包裹，用於底邊距間距。
我們使用 <label> 標籤來描述每個輸入。
<input> 元素有 form-control 類，這給它們提供了 Bootstrap 的樣式。
我們包含了一個複選框和一個提交按鈕。

記住，在網頁開發中，實踐是關鍵。試著自己輸入這段代碼，看看它在瀏覽器中是什麼樣子！

表單控件

Bootstrap 提供了各種表單控件。這裡是一張一些常見控件的表格：

控件	HTML 標籤	Bootstrap 類
文本輸入	`<input type="text">`	`form-control`
密碼	`<input type="password">`	`form-control`
電子郵件	`<input type="email">`	`form-control`
文本區域	`<textarea>`	`form-control`
複選框	`<input type="checkbox">`	`form-check-input`
單選框	`<input type="radio">`	`form-check-input`
下拉選單	`<select>`	`form-select`

禁用的表單

有時候，你可能想要禁用某些表單元素。Bootstrap 讓這件事變得很簡單：

<form>
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">禁用的輸入</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁用的輸入">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">禁用的選單</label>
<select id="disabledSelect" class="form-select">
<option>禁用的選單</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">
不能勾選這個
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

在這個示例中，我們將我們的表單元素包裹在一個帶有 disabled 屬性的 <fieldset> 標籤中。這會禁用其中的所有表單元素。你也可以通過給單個元素添加 disabled 屬性來禁用個別元素。

無障礙性

無障礙性在網頁開發中至關重要。它確保包括殘疾人在內的每個人都能使用你的網站。以下是一些讓你的表單更具無障礙性的提示：

使用正確的標籤：總是使用 <label> 標籤，並使用 for 屬性將它們與輸入相連接。

<label for="username">用戶名：</label>
<input type="text" id="username" name="username">

提供清晰的指示：使用 aria-describedby 將輸入鏈接到它們的描述。

<label for="password">密碼：</label>
<input type="password" id="password" name="password" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
你的密碼必須是 8-20 個字符長，包含字母和數字，且不能包含空格、特殊字符或表情符號。
</div>

使用 fieldset 和 legend 來分組相關的輸入：

<fieldset>
<legend>選擇你喜歡的怪獸</legend>
<div>
<input type="radio" id="kraken" name="monster">
<label for="kraken">海怪</label>
</div>
<div>
<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">大腳怪</label>
</div>
</fieldset>

記住，無障礙性不僅是可有可無的——它是創建包容性網站，讓所有人都能使用的重要元素。

結論

好了，各位！我們已經涵蓋了 Bootstrap 表單的基本知識，從創建簡單的輸入到確保無障礙性。記住，掌握網頁開發的關鍵在於實踐。所以，馬上嘗試這些示例，創建你自己的驚艷表單吧！

就像我總是告訴我的學生，編程就像烹飪一樣——你起初可能會搞得一團糟，但隨著練習，你會很快就能夠烹飪出美味的網站。快樂編碼，並且別忘了在過程中玩得開心！

Credits: Image by storyset