English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap Form

In diesem Kapitel werden wir lernen, wie man mit Bootstrap Formulare erstellt. Bootstrap ermöglicht es durch einfache HTML-Tags und erweiterte Klassen, Formulare mit verschiedenen Stilen zu erstellen.

Formularanordnung

Bootstrap bietet die folgenden Arten von Formularanordnungen:

  • Vertikale Formular (Standard)

  • 内联表单

  • 水平表单

Vertikale oder grundlegende Formular

Die grundlegende Formularstruktur ist in Bootstrap integriert, und einige Formularelemente erhalten automatisch globale Stile. Nachfolgend sind die Schritte zur Erstellung einer grundlegenden Formular aufgeführt:

  • Fügen Sie dem übergeordneten <form>-Element hinzu role="form".

  • 把标签和控件放在一个带有 class .form-group im <div> hinzufügen. Dies ist für die Erstellung der besten Abstände erforderlich.

  • Fügen Sie der Klasse ="form-control" 。

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Grundlegende Formular</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Name</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label for="inputfile">Datei-Eingabe</label>
		<input　type="file"　id="inputfile">
		<p　class="help"-block">这里是块级帮助文本的示例。</p>
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　请打勾
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">提交</button>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　内联表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-inline"　role="form">
	<div class="form-group">
		<label　class="sr-only"　for="name">名称</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label　class="sr-only"　for="inputfile">文件输入</label>
		<input　type="file"　id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　请打勾
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">提交</button>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

  • 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。

  • 使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

  • 向父 <form> 元素添加 class .form-horizontal.

  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。

  • 向标签添加 class .control-label.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　for="firstname"　class="col-sm-2　control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="firstname"　
				　　　placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label　for="lastname"　class="col-sm-2　control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="lastname"　
				　　　placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2　col-sm-10">
			<div class="checkbox">
				<label>
					<input　type="checkbox">　请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2　col-sm-10">
			<button　type="submit"　class="btn　btn-default">登录</button>
		</div>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select.

输入框(Input)

Eingabefeld (Input)5 Die häufigsten Formulartextfelder sind Eingabefelder input. Benutzer können darin die meisten notwendigen Formulardaten eingeben. Bootstrap bietet Unterstützung für alle ursprünglichen HTMLder Unterstützung für die input-Typen, einschließlich:-text, password, datetime, datetime und local, date, month, time, week, number, email, url, search, tel. Geeignete type deklaration ist obligatorisch, um input erhalten vollständige Stile.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Eingabefeld</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Beschriftung</label>
		<input type="text" class="form-control" placeholder="Texteingabe">
	</div>
　</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Textfeld (Textarea)

Verwenden Sie das Textfeld textarea, wenn Sie mehrzeilige Eingaben benötigen. Ändern Sie erforderlichenfalls rows Eigenschaft (wenige Zeilen = kleinerer Kasten, viele Zeilen = größerer Kasten).

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Textfeld</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Textfeld</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Checkbox (Checkbox) und Radio-Button (Radio)

Checkboxen und Radio-Buttons ermöglichen es dem Benutzer, aus einer Reihe vorgegebener Optionen auszuwählen.

  • Wenn Sie möchten, dass der Benutzer aus einer Liste mehrere Optionen auswählen kann, verwenden Sie checkbox. Wenn Sie möchten, dass der Benutzer nur eine Option auswählen kann, verwenden Sie radio.

  • Für eine Reihe von Checkboxen und Radio-Buttons verwenden .checkbox-inline oder .radio-inline class, um sie auf einer Zeile anzuzeigen.

Nachfolgendes Beispiel zeigt beide Typen (Standard und inline):

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Checkboxen und Radio-Buttons</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">Beispiel für Standard-Checkboxen und Radio-Buttons</label>
<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="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios"1"　value="option1"　checked>　Option　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios"2"　value="option2">Option　2　-　Wählen Sie dies aus, um die Auswahl abzubrechen　1
	</label>
</div>
<label for="name">Beispiel für inline-Checkboxen und Radio-Buttons</label>
<div>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}1"　value="option1">　Option　1
	</label>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}2"　value="option2">　Option　2
	</label>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}3"　value="option3">　Option　3
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios3"　value="option1"　checked>　Option　1
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios4"　　value="option2">　Option　2
	</label>
</div>
</body>
</html>
Test to see ‹/›

The results are as follows:

Auswahlkästchen (Select)

Verwenden Sie Auswahlkästchen, wenn Sie möchten, dass der Benutzer aus mehreren Optionen auswählen kann, aber standardmäßig nur eine Option ausgewählt werden kann.

  • Verwenden Sie <select>, um Listeinträge anzuzeigen, was in der Regel solche Auswahllisten sind, die der Benutzer gut kennt, wie z.B. Bundesstaaten oder Zahlen.

  • Verwenden multiple="multiple" Ermöglicht dem Benutzer, mehrere Optionen auszuwählen.

Der folgende Beispiel zeigt beide Typen (select und multiple):

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　Auswahlfeld</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label　for="name">Auswahlliste</label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label　for="name">Mehrfachauswahlliste</label>
		<select　multiple　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

statischer Kontrollkästchen

Wenn Sie eine rein textuelle Beschriftung nach dem Formularetikett in einem waagerechten Formular platzieren möchten, verwenden Sie bitte die Klasse <p>. .form-control-static.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　statischer Kontrollkästchen</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-label">E-Mail</label>
		<div class="col-sm-10">
			<p　class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">Passwort</label>
		<div class="col-sm-10">
			<input　type="password"　class="form-control"　id="inputPassword"　
				　　　placeholder="Bitte geben Sie das Passwort ein">
		</div>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Formularsteuerungsstatus

Abgesehen von :focus Status (d.h., wenn der Benutzer auf input klickt oder die Tab-Taste verwendet, um auf input zu fokussieren), definiert Bootstrap auch Stile für deaktivierte Eingabefelder und bietet Klassen für Formularvalidierung an.

Eingabefeldfokus

wenn das Eingabefeld input eine :focus wird der Umrandung des Eingabefelds entfernt und gleichzeitig box-shadow.

Deaktiviertes Eingabefeld input

Wenn Sie ein Eingabefeld input deaktivieren möchten, müssen Sie nur einfach disabled Die Eigenschaft, die nicht nur das Eingabefeld deaktiviert, sondern auch den Stil des Eingabefelds und den Stil des Mauszeigers ändert, wenn der Zeiger auf das Element gehalten wird.

Deaktivierter Feldsatz fieldset

Durch Hinzufügen der disabled-Attribut an <fieldset> alle Steuerelemente im <fieldset> deaktivieren.

Validierungszustand

Bootstrap enthält Validierungsschemata für Fehler, Warnungen und Erfolgsnachrichten. Es genügt, eine angemessene Klasse (.has-Warnung、 .has-Fehler oder .has-Erfolg）können Validierungszustände verwendet werden.

Nachstehende Beispiele zeigen alle Steuerverarbeitungszustände:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Formsteuerverarbeitungszustand</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-label">Fokus</label>
		<div class="col-sm-10">
			<input class="form-control"　id="focusedInput"　type="text"　　value="Diese Eingabefeld hat den Fokus...">
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			deaktiviert
		</label>
		<div class="col-sm-10">
			<input class="form-control"　id="disabledInput"　type="text"　placeholder="Diese Eingabefeld ist deaktiviert..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div class="form-group">
			<label　for="disabledTextInput"　　class="col-sm-2　control-label">Deaktivieren Sie die Eingabe (Fieldset deaktiviert)
			</label>
			<div class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　　placeholder="Wählen Sie nicht aus">
			</div>
		</div>
		<div class="form-group">
			<label　for="disabledSelect"　　class="col-sm-2　control-label">Deaktivieren Sie das Auswahlmenü (Fieldset deaktiviert)
			</label>
			<div class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>Wählen Sie nicht aus</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			Eingabefehler
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			Eingabewarnung
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputWarning">
		</div>
	</div>
	<div class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			Eingabefehler
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Formularsteuerelementgröße

Sie können die Klasse .input-lg und .col-lg-* um die Höhe und Breite des Formulars einzustellen. Der folgende Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Formularsteuerelementgröße</title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="Standardinput">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
	<div class="form-group">
	</div>
	<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">Standardauswahl</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>
	<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Formularhilfstext

Bootstrap-Formularsteuerelemente können auf dem Input-Feld einen blockigen Hilfstext haben. Um einen Block, der die gesamte Breite einnimmt, hinzuzufügen, verwenden Sie nach dem <input> .help-block。下面的示例演示了这点：

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Formularhilfstext</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<span>Hilfstextbeispiel</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">A longer help text block, more than one line,
		Need to be expanded to the next line. The help text in this example has two lines in total.</span>
</form>
</body>
</html>
Test to see ‹/›

The results are as follows:

Bootstrap ButtonBootstrap Table