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。

テキストエリア

例

<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">

自分で試してみる