Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Formulare | Grundkonzepte
Bootstrap-Grundlagen für Moderne Websites

book
Formulare

Bootstrap erleichtert das Erstellen von ansprechenden und anpassungsfähigen Formularen, indem es eine Sammlung von Formularsteuerungsklassen und -komponenten anbietet. Diese Formularsteuerungsklassen können verwendet werden, um Eingabefelder, Kontrollkästchen, Optionsfelder, Auswahlfelder, Dropdowns und Textbereiche konsistent auf der gesamten Website zu gestalten.

Allgemeine Formularsteuerungsklassen

form-control Klasse

Diese Klasse wird verwendet, um verschiedene Formularelemente zu stylen, einschließlich Eingabefelder, Textbereiche und Auswahl-Dropdowns. Bei Anwendung sorgt sie dafür, dass Formularelemente reaktionsfähig und visuell konsistent über verschiedene Geräte und Bildschirmgrößen hinweg sind.

Hauptmerkmale der form-control Klasse

  • Responsive Design: Formularelemente, die mit form-control gestylt sind, passen ihre Breite automatisch an, um den verfügbaren Platz innerhalb ihres Containers auszufüllen;

  • Einheitliches Styling: Durch die Anwendung von form-control erhalten Formularelemente ein konsistentes Styling, einschließlich Ränder, Abstände und Schriftarteigenschaften;

  • Fokus- und Hover-Zustände: form-control bietet visuelles Feedback für Benutzer, indem es das Erscheinungsbild von Formularelementen ändert, wenn sie überfahren oder fokussiert werden.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<form action="return false">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">
Email address
</label>
<input
type="email"
class="form-control"
id="exampleFormControlInput1"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea" class="form-label">
Example textarea
</label>
<textarea class="form-control" id="exampleFormControlTextarea" rows="3">
</textarea>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

form-check Klassen

  • form-check: Diese Klasse stylt Checkbox- und Radiobutton-Eingaben, um sie inline anzuzeigen und ein konsistentes Styling anzuwenden;

  • form-check-input: Wird auf Checkbox- und Radiobutton-Eingabeelemente innerhalb eines form-check Containers angewendet. Diese Klasse sorgt für ein konsistentes Styling der Eingabeelemente;

  • form-check-label: Wird verwendet, um das Label zu stylen, das mit Checkbox- und Radiobutton-Eingaben verbunden ist. Es sorgt für ein konsistentes Styling der Labels und hilft, die Ausrichtung mit den entsprechenden Eingabeelementen beizubehalten.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms Example 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>

<div class="form-check">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
/>
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>

Rastersystem für Formularlayout

Das Rastersystem von Bootstrap bietet ein leistungsstarkes Werkzeug zur Organisation von Formularelementen in mehrspaltige Layouts. Durch die Nutzung von Rasterklassen wie col-md-6, col-lg-4 und anderen können Entwickler Formularelemente in responsive, flexible Layouts anordnen, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen.

Hauptmerkmale:

  • Responsive Spalten: Rasterklassen ermöglichen es Entwicklern, die Breite von Formularelementen innerhalb verschiedener Breakpoints zu definieren. Zum Beispiel gibt col-md-6 an, dass die Spalte die Hälfte der Breite ihres Containers auf mittelgroßen Bildschirmen und größer einnehmen soll. Ebenso gibt col-lg-4 eine Spaltenbreite von einem Drittel auf großen Bildschirmen an;

  • Flexibilität: Wir können Rasterklassen mischen und kombinieren, um komplexe Formularlayouts zu erstellen;

  • Für Mobilgeräte optimiert: Das Rastersystem von Bootstrap ist von Natur aus mobilfreundlich und stellt sicher, dass Formularlayouts standardmäßig auf kleineren Bildschirmen gut aussehen.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms Example 3</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" />
</div>
</div>
<div class="row">
<div class="col-lg-4">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" />
</div>
<div class="col-lg-4">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" />
</div>
<div class="col-lg-4">
<label for="dob" class="form-label">Date of Birth</label>
<input type="date" class="form-control" id="dob" />

Ergebnis des Verhaltens des responsiven Formularrasters

Formularvalidierungsstile

Formularvalidierungsstile bieten visuelles Feedback für Benutzer über die Gültigkeit ihrer Eingaben. Diese Stile umfassen Indikatoren für Erfolgs-, Fehler- und Warnzustände, die es den Benutzern erleichtern zu verstehen, ob ihre Eingaben die erforderlichen Kriterien erfüllen.

html

index.html

js

index.js

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms Example 4</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationInput" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="validationInput"
placeholder="name@example.com"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script src="index.js"></script>
</div>
</body>
</html>

Im bereitgestellten Beispiel:

  • Die Klasse needs-validation wird hinzugefügt, um die Validierungsstile von Bootstrap zu aktivieren;

  • Das Attribut novalidate wird verwendet, um die browsernative Formularvalidierung zu deaktivieren;

  • Das Eingabefeld für die E-Mail-Adresse hat das Attribut required, was es obligatorisch macht;

  • Die Klassen valid-feedback und invalid-feedback werden verwendet, um Rückmeldungen für gültige und ungültige Eingaben bereitzustellen;

  • Zusätzlich wird JavaScript verwendet, um die Formularübermittlung zu verhindern, wenn ungültige Felder vorhanden sind, und um die Klasse was-validated auf das Formular anzuwenden.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

some-alt