in English

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

Wir werden Ihre E-Mail-Adresse niemals an Dritte weitergeben. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

Formularsteuerelemente

Steuerelemente für Textformulare – wie <input>s, <select>s und <textarea>s – werden mit der .form-controlKlasse gestaltet. Enthalten sind Stile für das allgemeine Erscheinungsbild, den Fokuszustand, die Größe und mehr.

Erkunden Sie unbedingt unsere benutzerdefinierten Formulare , um weitere Stile zu <select>finden.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Tauschen Sie für Dateieingaben die .form-controlfür .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Dimensionierung

Stellen Sie Höhen mit Klassen wie .form-control-lgund ein .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Schreibgeschützt

Fügen Sie das readonlyboolesche Attribut zu einer Eingabe hinzu, um eine Änderung des Eingabewerts zu verhindern. Schreibgeschützte Eingaben erscheinen heller (genau wie deaktivierte Eingaben), behalten aber den Standard-Cursor bei.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Schreibgeschützter Klartext

Wenn Sie möchten, dass <input readonly>Elemente in Ihrem Formular als reiner Text formatiert sind, verwenden Sie die .form-control-plaintextKlasse, um die Standardformatierung von Formularfeldern zu entfernen und den korrekten Rand und Abstand beizubehalten.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Bereichseingänge

Horizontal scrollbare Bereichseingaben mit einstellen .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Kontrollkästchen und Radios

Standard-Checkboxen und Optionsfelder werden mit Hilfe einer einzigen Klasse für beide Eingabetypen verbessert, die das Layout und Verhalten ihrer HTML-Elemente.form-check verbessert . Kontrollkästchen dienen zum Auswählen einer oder mehrerer Optionen in einer Liste, während Radios zum Auswählen einer Option aus vielen dienen.

Deaktivierte Kontrollkästchen und Radios werden unterstützt. Das disabledAttribut wendet eine hellere Farbe an, um den Status der Eingabe anzuzeigen.

Kontrollkästchen und Optionsfelder unterstützen die HTML-basierte Formularvalidierung und bieten prägnante, zugängliche Beschriftungen. Daher sind unsere <input>s und <label>s Geschwisterelemente im Gegensatz zu an <input>innerhalb von a <label>. Dies ist etwas ausführlicher, da Sie idund for-Attribute angeben müssen, um die und in Beziehung zu <input>setzen <label>.

Standard (gestapelt)

Standardmäßig wird eine beliebige Anzahl von Kontrollkästchen und Radios, die unmittelbare Geschwister sind, vertikal gestapelt und mit einem angemessenen Abstand versehen .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

In der Reihe

Gruppieren Sie Kontrollkästchen oder Optionsfelder in derselben horizontalen Reihe, indem Sie sie .form-check-inlinezu beliebigen hinzufügen .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Ohne Etiketten

.position-staticZu Eingaben hinzufügen , .form-checkdie keinen Beschriftungstext haben. Denken Sie daran, immer noch einen zugänglichen Namen für Hilfstechnologien anzugeben (z. B. mit aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Layout

Da Bootstrap für fast alle unsere Formularsteuerelemente gilt, werden Formulare standardmäßig vertikal gestapelt display: block. width: 100%Zusätzliche Klassen können verwendet werden, um dieses Layout auf einer Per-Form-Basis zu variieren.

Gruppen bilden

Die .form-groupKlasse ist der einfachste Weg, Formularen Struktur zu verleihen. Es bietet eine flexible Klasse, die die richtige Gruppierung von Bezeichnungen, Steuerelementen, optionalem Hilfetext und Nachrichten zur Formularvalidierung fördert. Standardmäßig gilt nur margin-bottom, aber es werden zusätzliche Stile nach .form-inlineBedarf übernommen. Verwenden Sie es mit <fieldset>s, <div>s oder fast jedem anderen Element.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Raster bilden

Komplexere Formulare können mit unseren Rasterklassen erstellt werden. Verwenden Sie diese für Formularlayouts, die mehrere Spalten, unterschiedliche Breiten und zusätzliche Ausrichtungsoptionen erfordern.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Reihe bilden

.rowSie können auch gegen tauschen .form-row, eine Variante unserer Standardrasterzeile, die die standardmäßigen Spaltenstege für engere und kompaktere Layouts überschreibt.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Mit dem Rastersystem können auch komplexere Layouts erstellt werden.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontale Form

Erstellen Sie horizontale Formulare mit dem Raster, indem Sie die .rowKlasse zu Formgruppen hinzufügen und die .col-*-*Klassen verwenden, um die Breite Ihrer Beschriftungen und Steuerelemente anzugeben. Stellen Sie sicher, dass Sie .col-form-labelIhre <label>s auch so hinzufügen, dass sie mit ihren zugehörigen Formularsteuerelementen vertikal zentriert sind.

Manchmal müssen Sie vielleicht Hilfsprogramme für Ränder oder Auffüllungen verwenden, um die perfekte Ausrichtung zu erzielen, die Sie benötigen. Beispielsweise haben wir das padding-topEtikett unserer gestapelten Radioeingänge entfernt, um die Textgrundlinie besser auszurichten.

Radios 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Größe des horizontalen Formularetiketts

Stellen Sie sicher, dass Sie .col-form-label-smoder .col-form-label-lgzu Ihrem <label>s oder <legend>s verwenden, um die Größe von .form-control-lgund korrekt einzuhalten .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Spaltengröße

Wie in den vorherigen Beispielen gezeigt, erlaubt Ihnen unser Rastersystem, eine beliebige Anzahl von .cols innerhalb eines .rowoder zu platzieren .form-row. Sie werden die verfügbare Breite gleichmäßig zwischen ihnen aufteilen. Sie können auch eine Teilmenge Ihrer Spalten auswählen, um mehr oder weniger Platz einzunehmen, während die verbleibenden .cols den Rest gleichmäßig aufteilen, mit bestimmten Spaltenklassen wie .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Automatische Größenanpassung

Das folgende Beispiel verwendet ein Flexbox-Dienstprogramm, um den Inhalt vertikal zu zentrieren, und ändert .colsich zu, .col-autosodass Ihre Spalten nur so viel Platz wie nötig beanspruchen. Anders ausgedrückt: Die Spaltengröße richtet sich nach dem Inhalt.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Sie können das dann noch einmal mit größenspezifischen Spaltenklassen remixen.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Und natürlich werden benutzerdefinierte Formularsteuerelemente unterstützt.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline-Formulare

Verwenden Sie die .form-inlineKlasse, um eine Reihe von Beschriftungen, Formularsteuerelementen und Schaltflächen in einer einzelnen horizontalen Zeile anzuzeigen. Formularsteuerelemente in Inline-Formularen weichen leicht von ihren Standardzuständen ab.

  • Steuerelemente sind display: flex, reduzieren alle HTML-Leerzeichen und ermöglichen es Ihnen, die Ausrichtung mit Abstands- und Flexbox- Dienstprogrammen zu steuern.
  • Steuerelemente und Eingabegruppen erhalten width: auto, um den Bootstrap-Standard zu überschreiben width: 100%.
  • Steuerelemente werden nur in Viewports mit einer Breite von mindestens 576 Pixel angezeigt , um schmale Viewports auf Mobilgeräten zu berücksichtigen.

Möglicherweise müssen Sie die Breite und Ausrichtung einzelner Formularsteuerelemente manuell mit Abstandsdienstprogrammen adressieren (wie unten gezeigt). Stellen Sie schließlich sicher, dass Sie immer ein <label>in jedes Formularsteuerelement einfügen, selbst wenn Sie es vor Nicht-Screenreader-Besuchern mit ausblenden müssen .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Benutzerdefinierte Formularsteuerelemente und -auswahlen werden ebenfalls unterstützt.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternativen zu versteckten Labels

Hilfstechnologien wie Screenreader werden Probleme mit Ihren Formularen haben, wenn Sie nicht für jede Eingabe eine Bezeichnung einfügen. Bei diesen Inline-Formularen können Sie die Beschriftungen mithilfe der .sr-onlyKlasse ausblenden. Es gibt weitere alternative Verfahren zum Bereitstellen einer Kennzeichnung für Hilfstechnologien, wie z. B. das aria-label, aria-labelledbyoder title-Attribut. Wenn keines davon vorhanden ist, können Hilfstechnologien auf die Verwendung des placeholderAttributs zurückgreifen, falls vorhanden, aber beachten Sie, dass die Verwendung von placeholderals Ersatz für andere Kennzeichnungsmethoden nicht empfohlen wird.

Hilfstext

Hilfetext auf Blockebene in Formularen kann mit .form-text(früher bekannt als .help-blockin v3) erstellt werden. Inline-Hilfetext kann flexibel mit jedem Inline-HTML-Element und Hilfsklassen wie .text-muted.

Zuordnen von Hilfetext zu Formularsteuerelementen

Hilfetext sollte explizit mit dem Formularsteuerelement verknüpft werden, auf das er sich bezieht, indem das aria-describedbyAttribut verwendet wird. Dadurch wird sichergestellt, dass unterstützende Technologien wie Bildschirmlesegeräte diesen Hilfetext ankündigen, wenn der Benutzer das Steuerelement fokussiert oder eingibt.

Hilfetext unter Eingaben kann mit gestaltet werden .form-text. Diese Klasse enthält display: blockund fügt einen oberen Rand hinzu, um den Abstand zu den obigen Eingaben zu erleichtern.

Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emojis enthalten. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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

Muss 8-20 Zeichen lang sein. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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.

Beispiel für deaktiviertes Feldset 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
Vorbehalt mit Ankern

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-*">, erhalten diese nur den Stil pointer-events: none. Wie im Abschnitt über den deaktivierten Zustand für Schaltflächen (und insbesondere im Unterabschnitt für Ankerelemente) erwähnt, ist diese CSS-Eigenschaft noch nicht standardisiert und wird in Internet Explorer 10 nicht vollständig unterstützt. Die Anker-basierten Steuerelemente werden es ebenfalls noch sein fokussierbar und über die Tastatur bedienbar. Sie müssen diese Steuerelemente manuell ändern, indem Sie hinzufügen tabindex="-1", um zu verhindern, dass sie den Fokus erhalten, und aria-disabled="disabled"um ihren Status an Hilfstechnologien zu übermitteln.

Cross-Browser-Kompatibilität

Während Bootstrap diese Stile in allen Browsern anwendet, unterstützen Internet Explorer 11 und darunter das disabledAttribut auf einer <fieldset>. Verwenden Sie benutzerdefiniertes JavaScript, um das Feldset in diesen Browsern zu deaktivieren.

Validierung

Geben Sie Ihren Benutzern wertvolles, umsetzbares Feedback mit der HTML5-Formularvalidierung – verfügbar in allen von uns unterstützten Browsern . Wählen Sie aus dem Standard-Validierungsfeedback des Browsers oder implementieren Sie benutzerdefinierte Nachrichten mit unseren integrierten Klassen und Starter-JavaScript.

Uns ist bewusst, dass derzeit nicht auf die clientseitigen benutzerdefinierten Validierungsstile und QuickInfos zugegriffen werden kann, da sie nicht für unterstützende Technologien verfügbar sind. Während wir an einer Lösung arbeiten, empfehlen wir, entweder die serverseitige Option oder die Standard-Browser-Validierungsmethode zu verwenden.

Wie es funktioniert

So funktioniert die Formularvalidierung mit Bootstrap:

  • Die HTML-Formularvalidierung wird über die beiden Pseudoklassen von CSS :invalidund :valid. Es gilt für <input>, <select>, und <textarea>Elemente.
  • Bootstrap ordnet die Stile :invalidund :validder übergeordneten .was-validatedKlasse zu, die normalerweise auf die <form>. Andernfalls wird jedes erforderliche Feld ohne Wert beim Laden der Seite als ungültig angezeigt. Auf diese Weise können Sie auswählen, wann sie aktiviert werden sollen (normalerweise nachdem versucht wurde, das Formular einzureichen).
  • Um das Erscheinungsbild des Formulars zurückzusetzen (z. B. bei dynamischen Formularübermittlungen mit AJAX), entfernen Sie die .was-validatedKlasse <form>nach der Übermittlung wieder aus der.
  • Als Fallback können statt der Pseudo-Klassen auch Klassen für die .is-invalidserverseitige Validierung verwendet werden . Sie benötigen keine Elternklasse ..is-valid.was-validated
  • Aufgrund von Einschränkungen bei der Funktionsweise von CSS können wir (derzeit) <label>ohne die Hilfe von benutzerdefiniertem JavaScript keine Stile auf ein anwenden, das vor einem Formularsteuerelement im DOM steht.
  • Alle modernen Browser unterstützen die Constraint Validation API , eine Reihe von JavaScript-Methoden zur Validierung von Formularsteuerelementen.
  • Feedback-Nachrichten können die Browser-Standardeinstellungen (je nach Browser unterschiedlich und nicht per CSS anpassbar) oder unsere benutzerdefinierten Feedback-Stile mit zusätzlichem HTML und CSS verwenden.
  • setCustomValiditySie können in JavaScript benutzerdefinierte Gültigkeitsmeldungen bereitstellen .

Betrachten Sie vor diesem Hintergrund die folgenden Demos für unsere benutzerdefinierten Formularvalidierungsstile, optionalen serverseitigen Klassen und Browserstandards.

Benutzerdefinierte Stile

Für benutzerdefinierte Bootstrap-Formularvalidierungsmeldungen müssen Sie das novalidateboolesche Attribut zu Ihrer <form>. Dadurch werden die standardmäßigen Feedback-QuickInfos des Browsers deaktiviert, es wird jedoch weiterhin Zugriff auf die Formularvalidierungs-APIs in JavaScript bereitgestellt. Versuchen Sie, das unten stehende Formular abzusenden; Unser JavaScript fängt die Senden-Schaltfläche ab und leitet das Feedback an Sie weiter. Wenn Sie versuchen zu senden, sehen Sie die auf Ihre Formularsteuerelemente angewendeten Stile :invalidund .:valid

Benutzerdefinierte Feedbackstile wenden benutzerdefinierte Farben, Rahmen, Fokusstile und Hintergrundsymbole an, um Feedback besser zu kommunizieren. Hintergrundsymbole für <select>s sind nur mit verfügbar .custom-selectund nicht mit .form-control.

Sieht gut aus!
Sieht gut aus!
Bitte geben Sie eine gültige Stadt an.
Bitte wählen Sie ein gültiges Bundesland aus.
Bitte geben Sie eine gültige Postleitzahl an.
Sie müssen vor dem Absenden zustimmen. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Browser-Standardeinstellungen

Sie sind nicht an benutzerdefinierten Validierungs-Feedbacknachrichten oder dem Schreiben von JavaScript zum Ändern des Formularverhaltens interessiert? Alles gut, Sie können die Standardeinstellungen des Browsers verwenden. Versuchen Sie, das unten stehende Formular zu senden. Je nach Browser und Betriebssystem sehen Sie ein etwas anderes Feedback.

Obwohl diese Feedback-Stile nicht mit CSS gestaltet werden können, können Sie den Feedback-Text dennoch über JavaScript anpassen.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Serverseitig

Wir empfehlen die clientseitige Validierung, aber falls Sie eine serverseitige Validierung benötigen, können Sie ungültige und gültige Formularfelder mit .is-invalidund angeben .is-valid. Beachten Sie, dass .invalid-feedbackdies auch mit diesen Klassen unterstützt wird.

Stellen Sie bei ungültigen Feldern sicher, dass die ungültige Rückmeldung/Fehlermeldung mit dem entsprechenden Formularfeld verknüpft ist, indem Sie verwenden aria-describedby. Dieses Attribut ermöglicht es, auf mehr als einen idzu verweisen, falls das Feld bereits auf zusätzlichen Formulartext verweist.

Sieht gut aus!
Sieht gut aus!
Bitte geben Sie eine gültige Stadt an.
Bitte wählen Sie ein gültiges Bundesland aus.
Bitte geben Sie eine gültige Postleitzahl an.
Sie müssen vor dem Absenden zustimmen. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Unterstützte Elemente

Validierungsstile sind für die folgenden Formularsteuerelemente und -komponenten verfügbar:

  • <input>s und <textarea>s mit.form-control
  • <select>s mit .form-controloder.custom-select
  • .form-checks
  • .custom-checkboxs und .custom-radios
  • .custom-file
Bitte geben Sie eine Nachricht in das Textfeld ein.
Beispiel für ungültigen Feedbacktext
Weiteres Beispiel für ungültigen Feedback-Text
Beispiel für ungültiges Feedback zur benutzerdefinierten Auswahl
Beispiel: Feedback zu einer ungültigen benutzerdefinierten Datei
@
Beispiel für ungültiges Input-Gruppen-Feedback
Beispiel für ungültiges Input-Gruppen-Feedback
Beispiel für ungültiges Input-Gruppen-Feedback 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Kurzinfos

Wenn Ihr Formularlayout dies zulässt, können Sie die .{valid|invalid}-feedbackKlassen gegen .{valid|invalid}-tooltipKlassen austauschen, um das Validierungsfeedback in einem formatierten Tooltip anzuzeigen. Stellen Sie sicher, dass ein übergeordnetes position: relativeElement für die Tooltip-Positionierung darauf steht. Im Beispiel unten haben unsere Spaltenklassen dies bereits, aber Ihr Projekt erfordert möglicherweise eine alternative Einrichtung.

Sieht gut aus!
Sieht gut aus!
Bitte geben Sie eine gültige Stadt an.
Bitte wählen Sie ein gültiges Bundesland aus.
Bitte geben Sie eine gültige Postleitzahl an. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Anpassen

Validierungszustände können über Sass mit der $form-validation-statesKarte angepasst werden. _variables.scssDiese Sass-Karte befindet sich in unserer Datei und wird durchlaufen, um die Standard- valid/ invalidValidierungszustände zu generieren. Enthalten ist eine verschachtelte Karte zum Anpassen der Farbe und des Symbols jedes Staates. Obwohl keine anderen Zustände von Browsern unterstützt werden, können diejenigen, die benutzerdefinierte Stile verwenden, problemlos komplexeres Formular-Feedback hinzufügen.

Bitte beachten Sie, dass wir nicht empfehlen, diese Werte anzupassen, ohne auch das form-validation-stateMixin zu ändern.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Validierung der Eingabegruppe

Um zu erkennen, welche Elemente abgerundete Ecken innerhalb einer Eingabegruppe mit Validierung benötigen, benötigt eine Eingabegruppe eine zusätzliche .has-validationKlasse.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Bitte wählen Sie einen Benutzernamen.

Benutzerdefinierte Formulare

Verwenden Sie für noch mehr Anpassung und browserübergreifende Konsistenz unsere vollständig benutzerdefinierten Formularelemente, um die Standardeinstellungen des Browsers zu ersetzen. Sie bauen auf semantischem und barrierefreiem Markup auf und sind daher ein solider Ersatz für jedes standardmäßige Formularsteuerelement.

Kontrollkästchen und Radios

Jedes Kontrollkästchen, jedes Radio <input>und jede <label>Kopplung ist in ein eingeschlossen <div>, um unsere benutzerdefinierte Steuerung zu erstellen. Strukturell ist dies derselbe Ansatz wie unser default .form-check.

Wir verwenden den Geschwisterselektor ( ~) für alle unsere <input>Zustände – wie :checked– um unseren benutzerdefinierten Formularindikator richtig zu gestalten. In Kombination mit der .custom-control-labelKlasse können wir auch den Text für jedes Element basierend auf dem <input>Status von formatieren.

Wir blenden den Standard <input>mit aus opacityund verwenden den .custom-control-label, um einen neuen benutzerdefinierten Formularindikator an seiner Stelle mit ::beforeund zu erstellen ::after. Leider können wir kein benutzerdefiniertes Element nur aus dem erstellen, <input>da CSS mit contentdiesem Element nicht funktioniert.

In den aktivierten Zuständen verwenden wir base64-eingebettete SVG-Symbole von Open Iconic . Dies bietet uns die beste Kontrolle für das Styling und die Positionierung über Browser und Geräte hinweg.

Kontrollkästchen

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Benutzerdefinierte Kontrollkästchen können auch die :indeterminatePseudoklasse verwenden, wenn sie manuell über JavaScript festgelegt werden (es gibt kein verfügbares HTML-Attribut, um sie anzugeben).

Wenn Sie jQuery verwenden, sollte so etwas ausreichen:

$('.your-checkbox').prop('indeterminate', true)

Radios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

In der Reihe

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Deaktiviert

Benutzerdefinierte Kontrollkästchen und Radios können ebenfalls deaktiviert werden. Fügen Sie das disabledboolesche Attribut zum hinzu <input>und der benutzerdefinierte Indikator und die Bezeichnungsbeschreibung werden automatisch formatiert.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Schalter

Ein Schalter hat das Markup eines benutzerdefinierten Kontrollkästchens, verwendet jedoch die .custom-switchKlasse zum Rendern eines Umschalters. Auch Switches unterstützen das disabledAttribut.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Menü auswählen

Benutzerdefinierte <select>Menüs benötigen nur eine benutzerdefinierte Klasse, .custom-selectum die benutzerdefinierten Stile auszulösen. Benutzerdefinierte Stile sind auf das <select>anfängliche Erscheinungsbild der s beschränkt und können die <option>s aufgrund von Browsereinschränkungen nicht ändern.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sie können auch aus kleinen und großen benutzerdefinierten Auswahlen wählen, die zu unseren ähnlich großen Texteingaben passen.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Das multipleAttribut wird ebenfalls unterstützt:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Ebenso wie das sizeAttribut:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Bereich

Erstellen Sie benutzerdefinierte <input type="range">Steuerelemente mit .custom-range. Die Spur (der Hintergrund) und der Daumen (der Wert) sind beide so gestaltet, dass sie in allen Browsern gleich angezeigt werden. Da nur IE und Firefox das „Füllen“ ihrer Spur links oder rechts vom Daumen unterstützen, um den Fortschritt visuell anzuzeigen, unterstützen wir dies derzeit nicht.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Bereichseingaben haben implizite Werte für minund max— 0bzw. 100. Sie können neue Werte für diejenigen angeben, die die Attribute minund verwenden.max

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Standardmäßig „rasten“ Bereichseingaben an ganzzahligen Werten ein. Um dies zu ändern, können Sie einen stepWert angeben. Im folgenden Beispiel verdoppeln wir die Anzahl der Schritte mit step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Dateibrowser

Das empfohlene Plugin zum Animieren der benutzerdefinierten Dateieingabe: bs-custom-file-input , das verwenden wir derzeit hier in unseren Dokumenten.

Die Dateieingabe ist die knorrigste von allen und erfordert zusätzliches JavaScript, wenn Sie sie mit funktionalem Datei auswählen ... und ausgewähltem Dateinamentext verbinden möchten.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Wir verstecken die Standarddatei <input>über opacityund formatieren stattdessen die <label>. Mit wird die Schaltfläche generiert und positioniert ::after. Schließlich deklarieren wir ein widthund heightauf <input>für den richtigen Abstand zum umgebenden Inhalt.

Übersetzen oder Anpassen der Zeichenfolgen mit SCSS

Die :lang()Pseudo-Klasse wird verwendet, um die Übersetzung des „Browse“-Textes in andere Sprachen zu ermöglichen. Überschreiben oder fügen Sie Einträge zur $custom-file-textSass-Variablen mit dem relevanten Sprach-Tag und den lokalisierten Zeichenfolgen hinzu. Die englischen Saiten können auf die gleiche Weise angepasst werden. So könnte man beispielsweise eine spanische Übersetzung hinzufügen (der spanische Sprachcode lautet es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Hier ist lang(es)die benutzerdefinierte Dateieingabe für eine spanische Übersetzung in Aktion:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Sie müssen die Sprache Ihres Dokuments (oder eines Teilbaums davon) richtig einstellen, damit der richtige Text angezeigt wird. Dies kann unter anderem mit dem langAttribut des <html>Elements oder dem Content-LanguageHTTP-Header erfolgen .

Übersetzen oder Anpassen der Zeichenfolgen mit HTML

Bootstrap bietet auch eine Möglichkeit, den „Browse“-Text in HTML mit dem data-browseAttribut zu übersetzen, das der benutzerdefinierten Eingabebezeichnung hinzugefügt werden kann (Beispiel auf Niederländisch):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>