Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Forms (フォーム)

さまざまな Forms (フォーム) を作成するための control styles (フォームコントロールスタイル)、layout options (レイアウトオプション)、custom components (カスタムコンポーネント) の例と使用ガイドラインです。

目次

Overview

form controls は our Rebooted form styles を拡張します。 これらのクラスを使用して、ブラウザやデバイス間でより一貫したレンダリングを行うために、カスタマイズされた表示にします。

電子メールの検証や数値選択などの新しい入力コントロールを利用するには、すべての入力に適切な type 属性を使用するようにしてください (例: 電子メールのアドレスには email、数値情報には number)。

フォームスタイルの簡単な例です。 必要に応じて、適切なクラス、フォームレイアウトなどのドキュメントを読んでください。

We'll never share your email with anyone else.
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</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">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form text

Block-level(ブロックレベル) や inline-level(インラインレベル) のフォームテキストは .form-text を用いて作成することができる。

Associating form text with form controls

フォームテキストは aria-describedby 属性を使って、関連するフォームコントロールに明示的に関連付けます。 これにより、ユーザーがコントロールにフォーカスを合わせたり入力したりしたときに、スクリーンリーダなどの支援技術がこのフォームテキストをアナウンスすることを確実にします。

入力の下にあるフォームテキストは .form-text でスタイルを整えることができます。ブロックレベルの要素を使用する場合は、上の入力項目との間隔が取りやすいように上の余白が追加されます。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

インラインテキストは、典型的なインラインHTML要素(<span><small>など)であれば、.form-textクラス以上のものを使用することができます。

Must be 8-20 characters long.
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Disabled forms

入力に disabled boolean 属性を追加することができます。下記の例をご覧ください。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

すべてのコントロールを無効にするには、<フィールドセット>disabled 属性を追加します。

デフォルトでは、ブラウザは <fieldset disabled> 内のすべてのネイティブフォームコントロール (<input>, <select>, <button> ) を無効として扱い、キーボードとマウスの両方のインタラクションを防ぎます。 しかし、フォームに <a ... class="btn btn-*"> 要素が含まれている場合、これらの要素には pointer-events: none のスタイルしか与えられません。

<form>
  <fieldset disabled aria-label="Disabled fieldset example">
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</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">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>