Bootstrap- Formulareingaben
Unterstützte Formularsteuerelemente
Bootstrap unterstützt die folgenden Formularsteuerelemente:
- Eingang
- Textbereich
- Kontrollkästchen
- Radio
- wählen
Bootstrap-Eingabe
Bootstrap unterstützt alle HTML5-Eingabetypen: Text, Passwort, DateTime, DateTime-Local, Date, Month, Time, Week, Number, E-Mail, URL, Search, Tel und Color.
Hinweis: Eingaben werden NICHT vollständig formatiert, wenn ihr Typ nicht richtig deklariert ist!
Das folgende Beispiel enthält zwei Eingabeelemente; eine vom Typ Text und eine vom Typ Passwort:
Beispiel
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Bootstrap-Textbereich
Das folgende Beispiel enthält einen Textbereich:
Beispiel
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap-Kontrollkästchen
Kontrollkästchen werden verwendet, wenn Sie möchten, dass der Benutzer eine beliebige Anzahl von Optionen aus einer Liste von voreingestellten Optionen auswählt.
Das folgende Beispiel enthält drei Kontrollkästchen. Die letzte Option ist deaktiviert:
Beispiel
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Verwenden Sie die .checkbox-inlineKlasse, wenn Sie möchten, dass die Kontrollkästchen in derselben Zeile erscheinen:
Beispiel
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Bootstrap-Optionsschaltflächen
Optionsfelder werden verwendet, wenn Sie den Benutzer auf nur eine Auswahl aus einer Liste von voreingestellten Optionen beschränken möchten.
Das folgende Beispiel enthält drei Optionsfelder. Die erste Option ist standardmäßig aktiviert und die letzte Option ist deaktiviert:
Beispiel
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Verwenden Sie die .radio-inlineKlasse, wenn Sie möchten, dass die Optionsfelder in derselben Zeile erscheinen:
Beispiel
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Bootstrap-Auswahlliste
Auswahllisten werden verwendet, wenn Sie dem Benutzer ermöglichen möchten, aus mehreren Optionen auszuwählen.
Das folgende Beispiel enthält eine Dropdown-Liste (Auswahlliste):
Beispiel
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>