Bootstrap - 表單控制：初學者的全面指南

你好，未來的網頁開發者們！我很興奮能與你們一起踏上這段旅程，探索Bootstrap表單控制的奇妙世界。作為一個教了超過十年計算機科學的人，我可以向你們保證，掌握這些概念將會在你們的網頁開發職業生涯中帶來遊戲規則的變革。那麼，我們來一起深入探討吧！

Bootstrap - Form Control

Bootstrap表單控制介紹

在我們開始之前，讓我分享一個快速的故事。我曾經有一個學生，他在創建表單時遇到了困難。他會花幾個小時嘗試對齊輸入框並使其看起來整齊。然後，他發現了Bootstrap表單控制，那就像是看著一個燈泡在他頭上亮起！這就是Bootstrap的力量——它讓複雜的事情變得簡單。

Bootstrap表單控制是預設樣式的元素，使用戶能在你的網頁上輸入數據。它們是響應式的、可定製的，並且非常容易使用。讓我們詳細探討每一種類型。

大小設定

你首先想要學習的事情之一是如何設定你的表單控制的大小。Bootstrap提供了三種大小：小型、默認和大型。

<input class="form-control form-control-lg" type="text" placeholder="大型輸入">
<input class="form-control" type="text" placeholder="默認輸入">
<input class="form-control form-control-sm" type="text" placeholder="小型輸入">

在這個例子中，我們創建了三個不同大小的輸入框。form-control類是Bootstrap中所有表單控制的基本類。添加form-control-lg會使其變大，而form-control-sm則使其變小。

表單文字

有時候，你需要為表單字段提供額外的信息。這就是表單文字派上用場的地方。

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

在這裡，我們在密碼輸入下方添加了一些幫助文字。form-text類適當地樣式化這段文字，使其作為額外信息凸顯出來。

禁用

可能會有這樣的情況，你想要禁用某些表單控制。Bootstrap讓這件事變得很簡單：

<input class="form-control" type="text" placeholder="禁用的輸入" aria-label="禁用的輸入範例" disabled>
<textarea class="form-control" placeholder="禁用的文本區域" aria-label="禁用的文本區域範例" disabled></textarea>

通過添加disabled屬性，我們使這些表單控制不可編輯。它們會顯示為灰色，向用戶表示這些控制無法被修改。

只讀

只讀輸入與禁用的輸入相似，但它們仍然可以被聚焦和選擇。

<input class="form-control" type="text" value="這裡是只讀輸入..." aria-label="只讀輸入範例" readonly>

readonly屬性使輸入不可編輯，但仍允許它被聚焦。

只讀純文本

有時候，你想要將信息作為表單的一部分顯示，而不是使其成為可編輯的字段。這時，只讀純文本就派上用場了：

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">電子郵件</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

form-control-plaintext類移除了默認的表單字段樣式，使其看起來像純文本。

檔案輸入

檔案輸入允許用戶上傳檔案。這是怎樣創建的：

<div class="mb-3">
<label for="formFile" class="form-label">默認檔案輸入範例</label>
<input class="form-control" type="file" id="formFile">
</div>

這會創建一個與其他Bootstrap表單控制風格一致的檔案輸入字段。

檔案輸入使用大小

就像其他表單控制一樣，檔案輸入也可以被大小化：

<div class="mb-3">
<label for="formFileSm" class="form-label">小型檔案輸入範例</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">大型檔案輸入範例</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

我們使用與之前相同的大小類：form-control-sm和form-control-lg。

檔案輸入使用屬性

你也可以使用屬性來自定義檔案輸入：

<div class="mb-3">
<label for="formFileMultiple" class="form-label">多個檔案輸入範例</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

multiple屬性允許用戶選擇多個檔案。

顏色

Bootstrap甚至支持顏色輸入：

<label for="exampleColorInput" class="form-label">顏色選擇器</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="選擇你的顏色">

這創建了一個顏色選擇器輸入，其樣式與其他Bootstrap表單控制一致。

數據列表

數據列表為輸入字段提供了一組預定義的選項：

<label for="exampleDataList" class="form-label">數據列表範例</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="輸入以搜索...">
<datalist id="datalistOptions">
<option value="舊金山">
<option value="紐約">
<option value="西雅圖">
<option value="洛杉磯">
<option value="芝加哥">
</datalist>

這創建了一個輸入字段，帶有來自數據列表的自動完成建議。

Bootstrap表單控制方法總結

這裡是一個我們所涵蓋方法的總結表：

方法	描述
大小設定	使用像`form-control-lg`和`form-control-sm`這樣的類來調整表單控制的大小
表單文字	使用`form-text`類為表單控制添加額外的文字
禁用	使用`disabled`屬性使表單控制不可編輯
只讀	使用`readonly`屬性使表單控制不可編輯但可聚焦
只讀純文本	使用`form-control-plaintext`類顯示信息作為純文本
檔案輸入	使用`type="file"`創建檔案上傳輸入
檔案輸入大小	使用大小類調整檔案輸入的大小
檔案輸入屬性	使用屬性如`multiple`自定義檔案輸入
顏色	使用`type="color"`創建顏色選擇器輸入
數據列表	使用`<datalist>`元素提供自動完成建議

這就是Bootstrap表單控制的全部內容！記住，熟能生巧。嘗試將這些元素整合到你自己的項目中，很快你就能夠輕鬆地創建有美麗、響應式的表單了。

祝開發愉快，未來的網頁開發者們！

Credits: Image by storyset