Bootstrap-Formulare: Ein umfassender Leitfaden für Anfänger

Hallo dort, angehende Web-Entwickler! Als Informatiklehrer mit jahrelanger Erfahrung freue ich mich, euch durch die wundervolle Welt der Bootstrap-Formulare zu führen. Keine Sorge, wenn ihr neu im Programmieren seid – wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials werdet ihr Formulare wie ein Profi erstellen können!

Einführung in Bootstrap-Formulare

Bevor wir eintauchen, lassen Sie uns darüber sprechen, warum Formulare so wichtig sind. Stellt euch vor, ihr seid in einer Cafébar und der Barista fragt nach eurer Bestellung. Das ist im Wesentlichen, was ein Formular auf einer Website macht – es sammelt Informationen von Benutzern. Bootstrap, unser freundlicher Nachbar-CSS-Framework, macht das Erstellen dieser Formulare zum Kinderspiel!

Grundlegendes Formular

Lassen Sie uns mit einem einfachen Formular beginnen. Hier ist ein grundlegendes Beispiel:

<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">E-Mail-Adresse</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Wir geben Ihre E-Mail-Adresse niemals an jemand anderen weiter.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Passwort</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Überprüfe mich</label>
</div>
<button type="submit" class="btn btn-primary">Einreichen</button>
</form>

Lassen Sie uns das auseinandernehmen:

1. Der <form>-Tag umgibt unser gesamtes Formular.
2. Jedes Formularelement ist in ein <div> mit der Klasse mb-3 für den Abstand unten gepackt.
3. Wir verwenden <label>-Tags, um jedes Eingabefeld zu beschreiben.
4. Die <input>-Elemente haben die Klasse form-control, die ihnen das Bootstrap-Design verleiht.
5. Wir haben ein Kontrollkästchen und einen Einreichungsbutton hinzugefügt.

Denkt daran, dass es im Web-Entwurf um Übung geht. Versucht, dies selbst einzutippen und seht, wie es im Browser aussieht!

Formularsteuerelemente

Bootstrap bietet verschiedene Formularsteuerelemente. Hier ist eine Tabelle mit einigen häufigen:

Steuerelement	HTML-Tag	Bootstrap-Klasse
Texteingabe	<input type="text">	form-control
Passwort	<input type="password">	form-control
E-Mail	<input type="email">	form-control
Textbereich	<textarea>	form-control
Kontrollkästchen	<input type="checkbox">	form-check-input
Optionsfeld	<input type="radio">	form-check-input
Auswahlliste	<select>	form-select

Deaktivierte Formulare

Manchmal möchtet ihr bestimmte Formularelemente deaktivieren. Bootstrap macht das einfach:

<form>
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Deaktivierte Eingabe</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Deaktivierte Eingabe">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Deaktivierte Auswahlliste</label>
<select id="disabledSelect" class="form-select">
<option>Deaktivierte Auswahlliste</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Kann nicht ankreuzen
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Einreichen</button>
</fieldset>
</form>

In diesem Beispiel haben wir unsere Formularelemente in einen <fieldset>-Tag mit dem disabled-Attribut gepackt. Dies deaktiviert alle Formularelemente darin. Ihr könnt auch individuelle Elemente deaktivieren, indem ihr das disabled-Attribut hinzufügt.

Barrierefreiheit

Barrierefreiheit ist entscheidend im Web-Entwurf. Sie stellt sicher, dass jeder, einschließlich Menschen mit Behinderungen, eure Website nutzen kann. Hier sind einige Tipps, um eure Formulare barrierefreier zu gestalten:

1. Verwendet richtige Beschriftungen: Verwendet immer <label>-Tags und verbindet sie mit Eingaben über das for-Attribut.

<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">

2. Gebt klare Anweisungen: Verwendet aria-describedby, um Eingaben mit ihren Beschreibungen zu verknüpfen.

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

3. Verwendet fieldset und legend zur Gruppierung verwandter Eingaben:

<fieldset>
<legend>Wählt euer Lieblingsmonster</legend>
<div>
<input type="radio" id="kraken" name="monster">
<label for="kraken">Kraken</label>
</div>
<div>
<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">Sasquatch</label>
</div>
</fieldset>

Denkt daran, Barrierefreiheit ist nicht nur ein nettes Feature – sie ist unerlässlich für die Erstellung inklusiver Websites, die jeder nutzen kann.

Schlussfolgerung

Und das war's, Leute! Wir haben die Grundlagen der Bootstrap-Formulare abgedeckt, von der Erstellung einfacher Eingaben bis hin zur Sicherstellung der Barrierefreiheit. Denkt daran, der Schlüssel zum Beherrschen des Web-Entwurfs ist die Übung. Also experimentiert mit diesen Beispielen und erstellt eure eigenen erstaunlichen Formulare!

Wie ich meinen Schülern immer sage, Coding ist wie Kochen – am Anfang könnt ihr vielleicht einen Haufen Durcheinander machen, aber mit Übung werdet ihr in der Lage sein, Gourmet-Websites zaubern. Viel Spaß beim Coden und vergesst nicht, auf dem Weg Spaß zu haben!

Credits: Image by storyset