Bootstrap - Form Select

Hallo da, zukünftige Web-Entwickler! Heute tauchen wir in die wundervolle Welt der Bootstrap Form Select-Elemente ein. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, Sie auf dieser Reise zu führen. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben - wir fangen ganz von vorne an und arbeiten uns hoch. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und los geht's!

Was ist Bootstrap Form Select?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Bootstrap Form Select überhaupt ist. Stellen Sie sich vor, Sie sind in einem Eiscreme-Laden und haben eine Karte, aus der Sie auswählen können. Diese Karte ist wie ein Select-Element im Webdesign. Es ermöglicht Benutzern, eine Option aus einer Liste vieler auszuwählen. Bootstrap, unser treuer Sidekick in der Web-Entwicklung, macht diese Select-Elemente toll aussehen und reibungslos auf verschiedenen Geräten und Browsern funktionieren.

Standard Bootstrap Select

Lassen Sie uns mit der einfachsten Form eines Bootstrap Select beginnen. So sieht es aus:

<select class="form-select" aria-label="Standardauswahlfeld Beispiel">
<option selected>Dieses Auswahlfeld öffnen</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>

Lassen Sie uns das einmal auseinandernehmen:

1. Wir beginnen mit dem <select>-Tag, der dem Browser mitteilt, dass wir ein Dropdown-Menü erstellen.
2. Die class="form-select" ist Bootstrap-Zauber, der unser Select nett gestaltet.
3. aria-label ist für die Barrierefreiheit, hilft Screen-Readern, den Zweck dieses Elements zu verstehen.
4. Innerhalb des <select> haben wir <option>-Tags. Diese sind die Auswahlmöglichkeiten in unserem Dropdown.
5. Das selected-Attribut auf der ersten Option macht sie zur Standardauswahl.

Wenn Sie diesen Code verwenden, sehen Sie ein schickes Dropdown-Menü mit vier Optionen. Cool, oder?

Beispiel: Lieblingsprogrammiersprache

Machen wir das mit einem realen Beispiel interessanter. Stellen Sie sich vor, wir erstellen eine Umfrage über Lieblingsprogrammiersprachen:

<select class="form-select" aria-label="Wählen Sie Ihre Lieblingsprogrammiersprache">
<option selected>Wählen Sie Ihre Lieblingsprache</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>

Dies erstellt ein Dropdown, in dem Benutzer ihre Lieblingsprogrammiersprache auswählen können. Es ist wie das Fragen Ihrer Freunde nach ihrem bevorzugten Eiscreme-Geschmack, aber für Programmierer!

Größenanpassung: Dinge Größer (oder Kleiner) Machen

Manchmal möchten Sie möglicherweise Ihr Select größer oder kleiner machen. Bootstrap hat Sie abgedeckt! Hier sind drei Größenoptionen:

Beispiel: Großes Select

<select class="form-select form-select-lg mb-3" aria-label="Großes Auswahlfeld Beispiel">
<option selected>Dieses Auswahlfeld öffnen</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>

Die form-select-lg-Klasse macht dieses Select größer als das Standardformat.

Beispiel: Standard Select

<select class="form-select mb-3" aria-label="Standardauswahlfeld Beispiel">
<option selected>Dieses Auswahlfeld öffnen</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>

Dies ist unsere Standardgröße, genau wie wir sie earlier gesehen haben.

Beispiel: Kleines Select

<select class="form-select form-select-sm" aria-label="Kleines Auswahlfeld Beispiel">
<option selected>Dieses Auswahlfeld öffnen</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>

Die form-select-sm-Klasse erstellt ein kleineres Select-Element.

Denken Sie daran diese wie kleine, mittlere und große Getränke in einem Fast-Food-Restaurant. Wählen Sie die Größe, die am besten zu Ihrem Design passt!

Deaktiviert: Wenn Optionen nicht auf der Karte sind

Manchmal möchten Sie möglicherweise verhindern, dass Benutzer mit einem Select-Element interagieren. Vielleicht ist es für sie nicht anwendbar, oder vielleicht hängt es von einer anderen Wahl ab, die sie noch nicht getroffen haben. Hier kommt das disabled-Attribut ins Spiel.

Beispiel: Deaktiviertes Select

<select class="form-select" aria-label="Deaktiviertes Auswahlfeld Beispiel" disabled>
<option selected>Dieses Auswahlfeld öffnen (aber Sie können nicht!</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>

Das Hinzufügen von disabled zum <select>-Tag schattiert das gesamte Dropdown und verhindert jegliche Interaktion. Es ist wie ein "Geschlossen"-Schild an dem Eiscreme-Laden, das wir earlier erwähnt haben.

Alles Zusammenfügen

Nun, da wir die Grundlagen geklärt haben, lassen Sie uns eine komplexere Formular mit verschiedenen Arten von Selects erstellen:

<form>
<div class="mb-3">
<label for="programmingLanguage" class="form-label">Lieblingsprogrammiersprache</label>
<select class="form-select form-select-lg" id="programmingLanguage">
<option selected>Wählen Sie Ihre Lieblingsprache</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>
</div>

<div class="mb-3">
<label for="experience" class="form-label">Jahre der Erfahrung</label>
<select class="form-select" id="experience">
<option selected>Wählen Sie Ihre Erfahrung</option>
<option value="1">Weniger als 1 Jahr</option>
<option value="2">1-3 Jahre</option>
<option value="3">3-5 Jahre</option>
<option value="4">5+ Jahre</option>
</select>
</div>

<div class="mb-3">
<label for="futureLanguage" class="form-label">Nächste Sprache, die Sie lernen möchten</label>
<select class="form-select form-select-sm" id="futureLanguage" disabled>
<option selected>Erst Ihre Lieblingsprache auswählen</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="kotlin">Kotlin</option>
<option value="swift">Swift</option>
</select>
</div>
</form>

Dieses Formular kombiniert alles, was wir gelernt haben:

• Ein großes Select für die Auswahl der Lieblingsprogrammiersprache
• Ein Standardgrößen-Select für die Jahre der Erfahrung
• Ein kleines, deaktiviertes Select für das Lernen der nächsten Sprache (stellen Sie sich vor, es wird aktiviert, sobald sie ihre Lieblingsprache ausgewählt haben)

Schlussfolgerung

Und da haben Sie es, Leute! Sie haben gerade gelernt, wie man Bootstrap Form Select-Elemente erstellt und anpasst. Von grundlegenden Dropdowns bis hin zu størrelseangepasste und deaktivierte Optionen, Sie haben nun die Werkzeuge, um benutzerfreundliche Formulare zu erstellen, die auf jedem Gerät toll aussehen.

Denken Sie daran, Übung macht den Meister. Versuchen Sie, Ihre eigenen Formulare zu erstellen, kombinieren Sie verschiedene Größen und experimentieren Sie mit deaktivierten Zuständen. Bevor Sie es wissen, werden Sie Formulare wie ein Profi gestalten!

Frohes Coden und möge Ihre Selects immer stilvoll und funktional sein!

Credits: Image by storyset