Bootstrap 4 表單
Bootstrap 4 的預設設定
表單控制元件自動獲得 Bootstrap 提供的一些全域性樣式。
所有帶有 .form-control 類的文字 <input>、<textarea> 和 <select> 元素的寬度都為 100%。
Bootstrap 4 表單佈局
Bootstrap 提供兩種表單佈局
- 堆疊式（全寬）表單
- 內聯表單
Bootstrap 4 堆疊式表單
以下示例建立一個包含兩個輸入欄位、一個複選框和一個提交按鈕的堆疊式表單。
在每個表單控制元件周圍新增一個帶有 .form-group 的包裝元素，以確保適當的邊距
示例
<form action="/action_page.php">
<div class="form-group">
<label for="email">電子郵件地址:</label>
<input type="email" class="form-control" placeholder="輸入電子郵件" id="email">
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" placeholder="輸入密碼" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 記住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己動手試一試 »
Bootstrap 內聯表單
在內聯表單中，所有元素都是內聯且左對齊的。
注意：這僅適用於視口寬度至少為 576px 的表單。在小於 576px 的螢幕上，它將水平堆疊。
內聯表單的附加規則
- 向
<form>元素新增類.form-inline
以下示例建立了一個包含兩個輸入欄位、一個複選框和一個提交按鈕的內聯表單
示例
<form class="form-inline" action="/action_page.php">
<label for="email">電子郵件地址:</label>
<input type="email" class="form-control" placeholder="輸入電子郵件" id="email">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" placeholder="輸入密碼" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 記住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己動手試一試 »
帶實用工具的內聯表單
上述內聯表單感覺“壓縮”，使用 Bootstrap 的間距實用工具會好看得多。以下示例為所有裝置（小型及以上）上的每個輸入添加了右邊距（.mr-sm-2）。當輸入欄位換行時（由於空間/寬度不足從水平變為垂直），使用底部邊距類（.mb-2）來設定樣式。
示例
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">電子郵件地址:</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="輸入電子郵件" id="email">
<label for="pwd" class="mr-sm-2">密碼:</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="輸入密碼" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 記住我
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">提交</button>
</form>
自己動手試一試 »
您將在我們的 Bootstrap 4 實用工具章節中瞭解更多關於間距和其他“輔助”類的知識。
表單行/網格
您還可以使用列（.col）來控制表單輸入的寬度和對齊方式，而無需使用間距實用工具。只需記住將它們放在 .row 容器中即可。
在下面的示例中，我們使用兩列並排顯示。您將在 Bootstrap 網格章節中瞭解更多關於列和行的知識。
示例
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="輸入電子郵件" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="輸入密碼" name="pswd">
</div>
</div>
</form>
自己動手試一試 »
如果您想要更小的網格邊距（覆蓋預設列間距），請使用 .form-row 而不是 .row
示例
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="輸入電子郵件" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="輸入密碼" name="pswd">
</div>
</div>
</form>
自己動手試一試 »
表單驗證
您可以使用不同的驗證類向用戶提供有價值的反饋。根據您希望在提交表單之前還是之後提供驗證反饋，向 <form> 元素新增 .was-validated 或 .needs-validation。輸入欄位將顯示綠色（有效）或紅色（無效）邊框，以指示表單中缺少什麼。您還可以新增 .valid-feedback 或 .invalid-feedback 訊息，明確告訴使用者缺少什麼或在提交表單之前需要做什麼。
示例
在此示例中，我們使用 .was-validated 來指示在提交表單之前缺少什麼
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">使用者名稱:</label>
<input type="text" class="form-control" id="uname" placeholder="輸入使用者名稱" name="uname" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">請填寫此欄位。</div>
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd" placeholder="輸入密碼" name="pswd" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">請填寫此欄位。</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 我同意 bla bla。
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">勾選此複選框以繼續。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己動手試一試 »
示例
在此示例中，我們使用 .needs-validation，它將在表單提交後（如果有任何缺失）新增驗證效果。請注意，您還需要新增一些 jQuery 程式碼才能使此示例正常工作。
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">使用者名稱:</label>
<input type="text" class="form-control" id="uname" placeholder="輸入使用者名稱" name="uname" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">請填寫此欄位。</div>
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd" placeholder="輸入密碼" name="pswd" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">請填寫此欄位。</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 我同意 bla bla。
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">勾選此複選框以繼續。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
// 如果存在無效欄位，則停用表單提交
(function() {
'use strict';
window.addEventListener('load', function() {
// 獲取我們想要新增驗證樣式的表單
var forms = document.getElementsByClassName('needs-validation');
// 遍歷它們並阻止提交
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
自己動手試一試 »
