Formen

Überblick

Die Formularsteuerelemente von Bootstrap erweitern unsere Rebooted-Formularstile um Klassen. Verwenden Sie diese Klassen, um ihre benutzerdefinierten Anzeigen für eine konsistentere Wiedergabe über Browser und Geräte hinweg zu aktivieren.

Stellen Sie sicher, dass Sie für alle Eingaben (z. B. für E-Mail-Adressen oder numerische Informationen) ein geeignetes typeAttribut verwenden , um neuere Eingabekontrollen wie E-Mail-Verifizierung, Nummernauswahl und mehr zu nutzen.emailnumber

Hier ist ein kurzes Beispiel, um die Formularstile von Bootstrap zu demonstrieren. Lesen Sie weiter, um Informationen zu erforderlichen Klassen, Formularlayouts und mehr zu erhalten.

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

Formulartext

Formulartext auf Block- oder Inline-Ebene kann mit erstellt werden .form-text.

Formulartext unter Eingaben kann mit gestaltet werden .form-text. Wenn ein Element auf Blockebene verwendet wird, wird ein oberer Rand hinzugefügt, um den Abstand zu den obigen Eingaben zu erleichtern.

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

Inline-Text kann jedes typische Inline-HTML-Element (sei es ein <span>, <small>, oder etwas anderes) mit nichts anderem als der .form-textKlasse verwenden.

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

Deaktivierte Formulare

Fügen Sie das disabledboolesche Attribut zu einer Eingabe hinzu, um Benutzerinteraktionen zu verhindern und sie heller erscheinen zu lassen.

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

Fügen Sie das disabledAttribut zu a <fieldset>hinzu, um alle darin enthaltenen Steuerelemente zu deaktivieren. Browser behandeln alle nativen Formularsteuerelemente ( <input>, <select>, und <button>Elemente) innerhalb von <fieldset disabled>als deaktiviert und verhindern sowohl Tastatur- als auch Mausinteraktionen auf ihnen.

Wenn Ihr Formular jedoch auch benutzerdefinierte schaltflächenähnliche Elemente wie enthält <a class="btn btn-*">...</a>, erhalten diese nur den Stil von pointer-events: none, was bedeutet, dass sie weiterhin fokussierbar und über die Tastatur bedienbar sind. In diesem Fall müssen Sie diese Steuerelemente manuell ändern, indem Sie sie hinzufügen tabindex="-1", um zu verhindern, dass sie den Fokus erhalten, und aria-disabled="disabled"um ihren Status an Hilfstechnologien zu übermitteln.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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>

Barrierefreiheit

Stellen Sie sicher, dass alle Formularsteuerelemente einen geeigneten zugänglichen Namen haben, damit ihr Zweck den Benutzern von Hilfstechnologien mitgeteilt werden kann. Der einfachste Weg, dies zu erreichen, besteht darin, ein <label>Element zu verwenden oder – im Fall von Schaltflächen – ausreichend beschreibenden Text als Teil des <button>...</button>Inhalts einzufügen.

Für Situationen, in denen es nicht möglich ist, einen sichtbaren <label>oder angemessenen Textinhalt einzufügen, gibt es alternative Möglichkeiten, dennoch einen zugänglichen Namen bereitzustellen, z. B.:

• <label>.visually-hiddenElemente, die mit der Klasse ausgeblendet werden
• Verweisen auf ein vorhandenes Element, das als Label fungieren kannaria-labelledby
• Bereitstellen eines titleAttributs
• Explizites Festlegen des barrierefreien Namens für ein Element mitaria-label

Wenn keines davon vorhanden ist, können unterstützende Technologien auf die Verwendung des placeholderAttributs als Fallback für den zugänglichen Namen auf <input>und <textarea>Elemente zurückgreifen. Die Beispiele in diesem Abschnitt bieten einige Vorschläge für fallspezifische Ansätze.

Während die Verwendung von visuell verborgenen Inhalten ( .visually-hidden, aria-label, und sogar placeholderInhalt, der verschwindet, sobald ein Formularfeld Inhalt enthält) den Benutzern von Hilfstechnologien zugute kommt, kann ein Mangel an sichtbarem Beschriftungstext für bestimmte Benutzer immer noch problematisch sein. Eine Art sichtbares Etikett ist im Allgemeinen der beste Ansatz, sowohl für die Zugänglichkeit als auch für die Benutzerfreundlichkeit.

Sass

Viele Formularvariablen werden auf allgemeiner Ebene festgelegt, um wiederverwendet und durch einzelne Formularkomponenten erweitert zu werden. Sie werden diese am häufigsten als $input-btn-*und $input-*Variablen sehen.

Variablen

$input-btn-*Variablen sind gemeinsam genutzte globale Variablen zwischen unseren Schaltflächen und unseren Formularkomponenten. Sie werden diese häufig anderen komponentenspezifischen Variablen als Werte neu zugewiesen finden.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;