Bootstrap - Formularauslegung: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der Bootstrap-Formularauslegungen zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, habe ich unzählige Schüler erleuchtet sehen, als sie realizes, wie mächtig und benutzerfreundlich Bootstrap sein kann. Also, tauchen wir ein und entschlüsseln die Geheimnisse der Erstellung schöner, responsiver Formulare!

Grundlagen der Formularauslegung

Bevor wir mit dem Coden beginnen, stellen wir uns vor, wir sind Architekten, die ein Haus entwerfen. Genau wie ein Haus eine solide Grundlage und Struktur braucht, brauchen unsere Formulare eine gut durchdachte Auslegung. Bootstrap stellt uns die Werkzeuge zur Verfügung, um diese Auslegungen effizient und schön zu erstellen.

Der Container: Die Grundlage Ihres Formulars

Jedes großartige Formular beginnt mit einem Container. In Bootstrap verwenden wir die container-Klasse, um einen responsive festen Breitencontainer zu erstellen. Hier ist ein einfaches Beispiel:

<div class="container">
<form>
<!-- Formularelemente kommen hier hin -->
</form>
</div>

Dieser Container ist wie das Grundstück für unser Haus. Er gibt unserem Formular einen definierten Raum und hilft bei der Responsivität über verschiedene Bildschirmgrößen hinweg.

Utilities: Das Schweizer Army Knife des Formular Designs

Bootstrap-Utilities sind wie die Multitools des Webdesigns. Sie sind kleine, leistungsstarke Klassen, die schnell häufige Layoutprobleme lösen können. Sehen wir uns einige wichtige Utilities für die Formularauslegung an:

Abstand Utilities

Abstand-Utilities helfen uns, Margen und Polsterungen zu unseren Formularelementen hinzuzufügen. Hier ist eine schnelle Referenztabelle:

Utility-Klasse	Zweck
m-*	Fügt Abstand hinzu
p-*	Fügt Polsterung hinzu
mt-*, mb-*, ms-*, me-*	Fügt Abstand zur Oberkante, Unterkante, Linkerkante und Rechtenkante hinzu
pt-*, pb-*, ps-*, pe-*	Fügt Polsterung zur Oberkante, Unterkante, Linkerkante und Rechtenkante hinzu

Sehen wir uns diese in Aktion an:

<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="email">
</div>
</form>

In diesem Beispiel fügt mb-3 Abstand zur Unterkante jedes Formularfeldes hinzu, sodass unsere Elemente etwas Platz zum Atmen haben.

FormularRaster: Den Aufbau erstellen

Nun, da wir unsere Grundlage und Werkzeuge haben, lassen uns den Aufbau unseres Formulars mit Bootstrap's Rastersystem erstellen. Das Rastersystem basiert auf einem 12-Spalten-Layout, das wir verwenden können, um responsives Design zu erstellen.

Grundlegendes Rasterlayout

Hier ist ein Beispiel für ein einfaches zwei-spaltiges Formularlayout:

<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

In diesem Beispiel verwenden wir row, um eine horizontale Gruppe von Spalten zu erstellen, und col-md-6, um anzugeben, dass jede Spalte auf mittelgroßen Bildschirmen und größer die Hälfte der Breite einnehmen soll.

Randleiste: Ihrem Formular etwas Freiraum geben

Randleisten sind die Räume zwischen den Spalten in unserem Rastersystem. Standardmäßig fügt Bootstrap negative Margen zu Zeilen und Polsterungen zu Spalten hinzu, um diese Randleisten zu erstellen. Allerdings können wir sie mit Randleistenklassen anpassen.

Hier ist ein Beispiel mit benutzerdefinierten Randleisten:

<form>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

Die g-3-Klasse fügt eine Randleistengröße von 3 (1rem) zwischen unseren Spalten hinzu, was dem Formular etwas mehr Platz zum Atmen gibt.

Horizontales Formular: Eine andere Perspektive

Manchmal möchten wir, dass unsere Beschriftungen nebeneinander mit unseren Eingaben stehen. Hier kommt das horizontale Formular ins Spiel. Lassen wir uns eines erstellen:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Passwort</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
</form>

In diesem Beispiel verwenden wir col-sm-2 für die Beschriftungen und col-sm-10 für die Eingaben, um ein schönes horizontales Layout auf kleinen Bildschirmen und größer zu erstellen.

Horizontale Beschriftungsgrößen: Die richtige Passform finden

Manchmal müssen wir die Größe unserer Beschriftungen in horizontalen Formularen anpassen. Bootstrap macht das mit seinen Größenklassen einfach. Hier ist, wie wir ein Formular mit verschiedenen Beschriftungsgrößen erstellen:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label col-form-label-sm">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="email">
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-2 col-form-label col-form-label-lg">Nachricht</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="message">
</div>
</div>
</form>

Hier verwenden wir col-form-label-sm, col-form-label, und col-form-label-lg, um kleine, standardmäßige und große Beschriftungsgrößen respectively zu erstellen.

Spaltengröße: Ihr Formular anpassen

Bootstrap's Rastersystem ermöglicht es uns, genaue Spaltenbreiten anzugeben. Das ist besonders nützlich, wenn wir präzise Kontrolle über unser Formularlayout benötigen. Hier ist ein Beispiel:

<form>
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder="Stadt">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder="Bundesland">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder="PLZ">
</div>
</div>
</form>

In diesem Beispiel verwenden wir col-2, col-3, und col-7, um Formularfelder zu erstellen, die spezifische Anteile der verfügbaren Breite einnehmen.

Automatische Größenanpassung: Lassen Sie Bootstrap die Mathematik erledigen

Manchmal möchten wir, dass unsere Formularfelder automatisch basierend auf ihrem Inhalt skaliert werden. Bootstrap's automatische Größenanpassung macht das möglich. Hier ist, wie es funktioniert:

<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Präferenz</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Wybierz...</option>
<option value="1"> Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Erinnere mich
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Einreichen</button>
</div>
</form>

In diesem Beispiel ermöglicht die col-auto-Klasse es jeder Spalte, sich basierend auf ihrem Inhalt zu skalieren. Die gy-2 und gx-3-Klassen fügen vertikale und horizontale Randleisten hinzu, während align-items-center den Inhalt in jeder Spalte vertikal zentriert.

Ein vollständiges Beispiel: Alles zusammenfügen

Nun, da wir all diese Konzepte behandelt haben, lassen uns sie in einem komplexeren Formular zusammenführen:

<div class="container">
<form class="mt-4">
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<label for="email" class="form-label">E-Mail</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="phone" class="form-label">Telefon</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address">
</div>
<div class="col-md-3">
<label for="city" class="form-label">Stadt</label>
<input type="text" class="form-control" id="city">
</div>
<div class="col-md-3">
<label for="zip" class="form-label">PLZ</label>
<input type="text" class="form-control" id="zip">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label for="message" class="form-label">Nachricht</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">Einreichen</button>
</div>
</div>
</form>
</div>

Dieses Beispiel kombiniert viele der Konzepte, die wir besprochen haben: Container, Rasterlayout, Randleisten und responsives Design. Es erstellt ein Formular, das auf beiden Desktop- und Mobilgeräten gut aussieht.

Inline-Formulare: Kompakt und effizient

Für einfachere Formulare oder wenn Platz begrenzt ist, können Inline-Formulare eine großartige Lösung sein. Hier ist, wie man eines erstellt:

<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Benutzername</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Benutzername">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Präferenz</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Wybierz...</option>
<option value="1"> Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Erinnere mich
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Einreichen</button>
</div>
</form>

Dieses Inline-Formular verwendet row-cols-lg-auto, um die Spalten auf großen Bildschirmen automatisch zu skalieren, was ein kompaktes, horizontales Layout erstellt.

Und dort haben Sie es, Leute! Wir haben die Welt der Bootstrap-Formularauslegungen durchquert, von den Grundlagen bis zu den fortgeschrittenen Techniken. Denken Sie daran, Übung macht den Meister, also experimentieren Sie mit diesen Layouts und machen Sie sie zu Ihren eigenen. Viel Spaß beim Coden und möge Ihre Formulare stets responsiv und benutzerfreundlich sein!

Credits: Image by storyset