Bootstrap 5 表單

堆疊表單

所有設置了 .form-control 類的 <input> 和 <textarea> 元素都可獲得正確的表單樣式：

實例

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">電子郵件：</label>
    <input type="email" class="form-control" id="email" placeholder="請輸入電子郵件地址" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">密碼：</label>
    <input type="password" class="form-control" id="pwd" placeholder="請輸入密碼" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> 記住我
    </label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

親自試一試

另外請您注意，我們為每個 label 元素添加了 .form-label 類以確保正確的填充。

復選框有不同的標記。它們被設置了 .form-check 類的容器元素包圍。label 設置 .form-check-label 類，而復選框和單選按鈕使用 .form-check-input。

Textarea

實例

<label for="comment">評論：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

親自試一試

表單行 / 網格（行內表單）

如果您希望表單元素并排顯示，請使用 .row 和 .col：

實例

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="請輸入電子郵件地址" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="請輸入密碼" name="pswd">
    </div>
  </div>
</form>

親自試一試

您將在 Bootstrap 網格 章節中學到有關列和行的更多內容。

表單控件尺寸

您可用 .form-control-lg 或 .form-control-sm 更改 .form-control 輸入控件的大小：

實例

<input type="text" class="form-control form-control-lg" placeholder="大型輸入控件">
<input type="text" class="form-control" placeholder="普通輸入控件">
<input type="text" class="form-control form-control-sm" placeholder="小型輸入控件">

親自試一試

禁用和只讀

請使用 disabled 和/或 readonly 屬性禁用輸入字段：

實例

<input type="text" class="form-control" placeholder="普通輸入控件">
<input type="text" class="form-control" placeholder="被禁用的輸入控件" disabled>
<input type="text" class="form-control" placeholder="只讀的輸入控件" readonly>

親自試一試

純文本輸入

請使用 .form-control-plaintext 類來設置沒有邊框的輸入字段的樣式，但保留適當的外邊距和內邊距：

實例

<input type="text" class="form-control-plaintext" placeholder="純文本輸入">
<input type="text" class="form-control" placeholder="普通輸入控件">

親自試一試

拾色器

如需正確設置 type="color" 的輸入樣式，請使用 .form-control-color 類：

實例

<input type="color" class="form-control form-control-color" value="#CCCCCC">

親自試一試