Formen
Beispiele und Verwendungsrichtlinien für Formularsteuerelementstile, Layoutoptionen und benutzerdefinierte Komponenten zum Erstellen einer Vielzahl von Formularen.
Ü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 type
Attribut verwenden , um neuere Eingabekontrollen wie E-Mail-Verifizierung, Nummernauswahl und mehr zu nutzen.email
number
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
.
Zuordnen von Formulartext zu Formularsteuerelementen
Formulartext sollte explizit mit dem Formularsteuerelement verknüpft werden, auf das es sich bezieht, indem das aria-describedby
Attribut verwendet wird. Dadurch wird sichergestellt, dass Hilfstechnologien – wie z. B. Bildschirmleseprogramme – diesen Formulartext ansagen, wenn der Benutzer das Steuerelement fokussiert oder eingibt.
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-text
Klasse 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 disabled
boolesche 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 disabled
Attribut 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 über die Tastatur fokussierbar und 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-hidden
Elemente, die mit der Klasse ausgeblendet werden- Verweisen auf ein vorhandenes Element, das als Label fungieren kann
aria-labelledby
- Bereitstellen eines
title
Attributs - Explizites Festlegen des barrierefreien Namens für ein Element mit
aria-label
Wenn keines davon vorhanden ist, können unterstützende Technologien auf die Verwendung des placeholder
Attributs 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 placeholder
Inhalt, 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 $btn-input-*
und $input-*
Variablen sehen.
Variablen
$btn-input-*
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;