Neueste Web-Entwicklung Tutorials
 

Bootstrap Forms

❮ Zurück Weiter Kapitel ❯

Bootstrap's Standardeinstellungen

Form - Steuerelemente automatisch einige globale Styling mit erhalten Bootstrap :

Alle Text- <input> , <textarea> und <select> Elemente mit Klasse .form-control haben eine Breite von 100%.

Bootstrap Formular - Layouts

Bootstrap bietet drei Arten von Formularlayouts:

  • Vertikale (dies ist die Standardeinstellung)
  • Horizontale Form
  • Inline-Form

Standard-Regeln für alle drei Formularlayouts:

  • Verwenden Sie immer <form role="form"> (hilft Zugänglichkeit für Menschen verbessern mit Screen - Reader)
  • Wrap - Etiketten und Formular - Steuerelemente in <div class="form-group"> (für optimalen Abstand erforderlich)
  • In Klasse .form-control für alle Text- <input> , <textarea> und <select> Elemente

Bootstrap Vertikale - Form (Standard)

Das folgende Beispiel erzeugt eine vertikale Form mit zwei Eingabefelder, ein Kontrollkästchen, und ein Submit-Button:

Beispiel

<form role="form">
  <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>
Versuch es selber "

Bootstrap Inline - Formular

In einem Inline-Form sind alle Elemente inline, linksbündig und die Etiketten entlang.

Hinweis: Dies gilt nur für Formulare innerhalb viewports , die mindestens 768px breit sind!

Zusätzliche Regel für eine Inline-Form:

  • In Klasse .form-inline mit dem <form> Element

Im folgenden Beispiel wird eine Inline-Form mit zwei Eingabefelder, ein Kontrollkästchen, und ein Submit-Button:

Beispiel

<form class="form-inline" role="form">
  <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>
Versuch es selber "

Tipp: Wenn Sie nicht über ein Etikett für jeden Eingang umfassen, Bildschirm Leser Probleme mit Formen haben. Sie können die Etiketten für alle Geräte, außer Bildschirmleseprogrammen verstecken, indem die Verwendung von .sr-only - Klasse:

Beispiel

<form class="form-inline" role="form">
  <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>
Versuch es selber "

Bootstrap Horizontal - Formular

Eine horizontale Form hebt sich von den anderen Formen sowohl in der Menge von Markup, und in der Präsentation des Formulars.

Zusätzliche Regeln für eine horizontale Form:

  • In Klasse .form-horizontal auf das <form> Element
  • In Klasse .control-label für alle <label> Elemente

Tipp: Verwenden Sie Bootstrap's vorgegebenen Raster Klassen Etiketten und Gruppen von Formular - Steuerelemente in einem horizontalen Layout auszurichten.

Das folgende Beispiel erzeugt eine horizontale Form mit zwei Eingabefelder, ein Kontrollkästchen, und ein Submit-Button:

Beispiel

<form class="form-horizontal" role="form">
  <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>
Versuch es selber "

❮ Zurück Weiter Kapitel ❯