Bootstrap - Form Controls: A Comprehensive Guide for Beginners

Hallo那里，未来的网页开发者们！我很高兴与你们一起踏上这个旅程，探索Bootstrap表单控制的奇妙世界。作为一个教授计算机科学超过十年的人，我可以向你保证，掌握这些概念将在你的网页开发职业生涯中带来游戏性的改变。那么，让我们跳进去吧！

Einführung in Bootstrap-Formularsteuerelemente

Bevor wir beginnen, lassen Sie mich eine kurze Geschichte teilen. Ich hatte einmal einen Schüler, der Schwierigkeiten hatte, Formulare zu erstellen. Er würde Stunden damit verbringen, Eingaben auszurichten und sie ansprechend aussehen zu lassen. Dann entdeckte er die Bootstrap-Formularsteuerelemente, und es war, als würde eine Glühbirne über seinem Kopf angehen! Das ist die Kraft von Bootstrap - es macht Komplexes einfach.

Bootstrap-Formularsteuerelemente sind vorgestaltete Elemente, die es Benutzern ermöglichen, Daten auf Ihrer Webseite einzugeben. Sie sind responsiv, anpassungsfähig und unglaublich einfach zu bedienen. Lassen Sie uns jeden Typ detailliert erkunden.

Größenanpassung

Eine der ersten Dinge, die Sie lernen möchten, ist, wie Sie Ihre Formularsteuerelemente skalieren können. Bootstrap bietet drei Größen an: klein, standard und groß.

<input class="form-control form-control-lg" type="text" placeholder="Große Eingabe">
<input class="form-control" type="text" placeholder="Standard-Eingabe">
<input class="form-control form-control-sm" type="text" placeholder="Kleine Eingabe">

In diesem Beispiel haben wir drei Eingabefelder verschiedener Größen erstellt. Die form-control-Klasse ist die Basisklasse für alle Formularsteuerelemente in Bootstrap. Das Hinzufügen von form-control-lg macht es groß, während form-control-sm es klein macht.

Formular-text

Manchmal müssen Sie zusätzliche Informationen zu einem Formularfeld bereitstellen. Da kommt der Formular-text zur Hilfe.

<label for="inputPassword5" class="form-label">Passwort</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Ihr Passwort muss 8-20 Zeichen lang sein, Buchstaben und Zahlen enthalten und darf keine Leerzeichen, Sonderzeichen oder Emojis enthalten.
</div>

Hier haben wir einige hilfreiche Informationen unter der Passworteingabe hinzugefügt. Die form-text-Klasse gestaltet diesen Text angemessen, sodass er als zusätzliche Information hervorsticht.

Deaktiviert

Es könnte Situationen geben, in denen Sie bestimmte Formularsteuerelemente deaktivieren möchten. Bootstrap macht das einfach:

<input class="form-control" type="text" placeholder="Deaktivierte Eingabe" aria-label="Deaktivierte Eingabebeispiel" disabled>
<textarea class="form-control" placeholder="Deaktivierte Textarea" aria-label="Deaktivierte Textarea-Beispiel" disabled></textarea>

Durch das Hinzufügen des disabled-Attributs haben wir diese Formularsteuerelemente uneditierbar gemacht. Sie werden grau angezeigt, was dem Benutzer anzeigt, dass sie nicht bearbeitet werden können.

Readonly

Readonly-Eingaben sind ähnlich zu deaktivierten, aber sie können immer noch fokussiert und ausgewählt werden.

<input class="form-control" type="text" value="Readonly-Eingabe hier..." aria-label="Readonly-Eingabebeispiel" readonly>

Das readonly-Attribut macht die Eingabe uneditierbar, aber sie kann immer noch fokussiert werden.

Readonly-Klartext

Manchmal möchten Sie Informationen als Teil eines Formulars anzeigen, ohne sie zu einem bearbeitbaren Feld zu machen. Da kommt readonly-klartext ins Spiel:

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

Die form-control-plaintext-Klasse entfernt die Standard-Formularfeldgestaltung, sodass es als Klartext appears.

Datei-Eingabe

Datei-Eingaben ermöglichen Benutzern das Hochladen von Dateien. So erstellen Sie eines:

<div class="mb-3">
<label for="formFile" class="form-label">Standard-Datei-Eingabebeispiel</label>
<input class="form-control" type="file" id="formFile">
</div>

Dies erstellt ein Datei-Eingabefeld, das konsistent mit anderen Bootstrap-Formularsteuerelementen gestaltet ist.

Datei-Eingabe mit Größen

Wie andere Formularsteuerelemente können auch Datei-Eingaben skaliert werden:

<div class="mb-3">
<label for="formFileSm" class="form-label">Kleine Datei-Eingabebeispiel</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Große Datei-Eingabebeispiel</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Wir verwenden die gleichen Größenklassen wie zuvor: form-control-sm und form-control-lg.

Datei-Eingabe mit Attributen

Sie können auch Datei-Eingaben mit Attributen anpassen:

<div class="mb-3">
<label for="formFileMultiple" class="form-label">Mehrere Dateien-Eingabebeispiel</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

Das multiple-Attribut ermöglicht es Benutzern, mehr als eine Datei auszuwählen.

Farbe

Bootstrap unterstützt sogar Farb-Eingaben:

<label for="exampleColorInput" class="form-label">Farbwähler</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Wählen Sie Ihre Farbe">

Dies erstellt ein Farbwähler-Eingabefeld, das konsistent mit anderen Bootstrap-Formularsteuerelementen gestaltet ist.

Datalists

Datalists bieten eine Liste von vordefinierten Optionen für ein Eingabefeld:

<label for="exampleDataList" class="form-label">Datalist-Beispiel</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Tippen zum Suchen...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

Dies erstellt ein Eingabefeld mit Automatischer Vervollständigungsvorschlägen aus der Datalist.

Zusammenfassung der Bootstrap-Formularsteuerungsmethoden

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir behandelt haben:

Methode	Beschreibung
Größenanpassung	Passen Sie die Größe von Formularsteuerelementen mit Klassen wie form-control-lg und form-control-sm an
Formular-text	Fügen Sie zusätzliche Texte zu Formularsteuerelementen mit der form-text-Klasse hinzu
Deaktiviert	Machen Sie Formularsteuerelemente uneditierbar mit dem disabled-Attribut
Readonly	Machen Sie Formularsteuerelemente uneditierbar, aber fokussierbar mit dem readonly-Attribut
Readonly-Klartext	Zeigen Sie Informationen als Klartext mit der form-control-plaintext-Klasse an
Datei-Eingabe	Erstellen Sie Datei-Upload-Eingaben mit type="file"
Datei-Eingabe Größen	Passen Sie die Größe von Datei-Eingaben mit Größenklassen an
Datei-Eingabe Attribute	Passen Sie Datei-Eingaben mit Attributen wie multiple an
Farbe	Erstellen Sie Farbwähler-Eingaben mit type="color"
Datalists	Bieten Sie vordefinierte Optionen für ein Eingabefeld mit dem <datalist>-Element

Und da haben Sie es! Sie haben gerade die Ins und Outs der Bootstrap-Formularsteuerelemente gelernt. Denken Sie daran, Übung macht den Meister. Versuchen Sie, diese Elemente in Ihre eigenen Projekte zu integrieren, und bald werden Sie beautiful, responsive Formulare mit Leichtigkeit erstellen.

Fröhliches Coden, zukünftige Webentwickler!

Credits: Image by storyset