HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- Formulare

❮ Vorherige Nächste ❯

Bootstrap-Standardeinstellungen

Formularsteuerelemente erhalten mit Bootstrap automatisch ein globales Styling:

Alle textuellen <input>, <textarea>, und <select>Elemente mit Klasse .form-controlhaben eine Breite von 100%.

Bootstrap-Formularlayouts

Bootstrap bietet drei Arten von Formularlayouts:

  • Vertikale Form (Standard)
  • Horizontale Form
  • Inline-Formular

Standardregeln für alle drei Formularlayouts:

  • Etiketten und Formularsteuerelemente einschließen <div class="form-group">(erforderlich für optimalen Abstand)
  • Fügen Sie Klasse .form-controlzu allen Textelementen <input>, <textarea>, und hinzu<select>

Vertikale Bootstrap-Form (Standard)

Das folgende Beispiel erstellt ein vertikales Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Senden-Schaltfläche:

Beispiel

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap-Inline-Formular

In einem Inline-Formular sind alle Elemente inline, linksbündig, und die Beschriftungen sind daneben.

Hinweis: Dies gilt nur für Formulare innerhalb von Ansichtsfenstern, die mindestens 768 Pixel breit sind!

Zusätzliche Regel für ein Inline-Formular:

  • Fügen Sie .form-inlinedem <form>Element eine Klasse hinzu

Das folgende Beispiel erstellt ein Inline-Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Senden-Schaltfläche:

Beispiel

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Tipp: Wenn Sie nicht für jede Eingabe eine Bezeichnung einfügen, werden Screenreader Probleme mit Ihren Formularen haben. Sie können die Labels für alle Geräte außer Screenreadern ausblenden, indem Sie die .sr-onlyKlasse verwenden:

Beispiel

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Horizontale Bootstrap-Form

Eine horizontale Form bedeutet, dass die Beschriftungen auf großen und mittleren Bildschirmen neben dem Eingabefeld (horizontal) ausgerichtet sind. Auf kleinen Bildschirmen (767 Pixel und darunter) wird es in eine vertikale Form umgewandelt (Beschriftungen werden über jeder Eingabe platziert).

Zusätzliche Regeln für eine horizontale Form:

  • Fügen Sie .form-horizontaldem <form>Element eine Klasse hinzu
  • Fügen Sie .control-labelallen <label>Elementen Klasse hinzu

Tipp: Verwenden Sie die vordefinierten Rasterklassen von Bootstrap, um Beschriftungen und Gruppen von Formularsteuerelementen in einem horizontalen Layout auszurichten.

Das folgende Beispiel erstellt ein horizontales Formular mit zwei Eingabefeldern, einem Kontrollkästchen und einer Senden-Schaltfläche.

Beispiel

<form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

❮ Vorherige Nächste ❯