HTML - Formularelemente

Eingabefelder

Eingabefelder sind die häufigste Art von Formular-Steuerelementen. Sie ermöglichen Benutzern die Eingabe verschiedener Datentypen wie Text, Zahlen und Daten. Hier sind einige häufig verwendete Eingabefelder:

Kontrollkästchen und Optionsfelder

Kontrollkästchen und Optionsfelder werden verwendet, wenn Benutzer eine oder mehrere Optionen aus einer Gruppe von Auswahlmöglichkeiten auswählen müssen.

Dropdown-Listen und Auswahlfelder

Dropdown-Listen und Auswahlfelder bieten Benutzern die Möglichkeit, eine oder mehrere Optionen aus einer vordefinierten Liste auszuwählen.

Schaltflächen

Schaltflächen werden verwendet, um Aktionen auszulösen oder Formulare abzusenden.

Textbereiche

Textbereiche werden für die Eingabe von mehrzeiligem Text verwendet.

Die Attribute rows und cols können verwendet werden, um die anfänglichen Abmessungen des Textbereichs festzulegen. Das Attribut rows legt die Anzahl der sichtbaren Textzeilen fest, während das Attribut cols die durchschnittliche Zeichenbreite festlegt. Textbereiche sind standardmäßig in der Größe veränderbar, sodass Benutzer die Größe des Eingabebereichs anpassen können. Das Größenänderungsverhalten kann mit CSS-Eigenschaften wie resize gesteuert werden.

Label-Elemente

Das <label>-Element wird verwendet, um eine Beschriftung für ein Formular-Steuerelement zu erstellen. Es bietet eine Textbeschreibung, die einem bestimmten Formular-Steuerelement wie einem Eingabefeld, einer Checkbox oder einem Radiobutton zugeordnet ist. Der Beschriftungstext hilft Ihnen, den Zweck des Formular-Steuerelements zu verstehen und welche Informationen Sie eingeben oder auswählen sollten.

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

Verknüpfung von Beschriftungen mit Formular-Steuerelementen

Um eine Beschriftung mit einem Formular-Steuerelement zu verknüpfen, können Sie das for-Attribut des <label>-Elements verwenden. Der Wert des for-Attributs sollte mit dem id-Attribut des entsprechenden Formular-Steuerelements übereinstimmen. Dies schafft eine logische Verbindung zwischen der Beschriftung und dem Formular-Steuerelement, sodass Sie auf die Beschriftung klicken können, um den Fokus auf das zugehörige Steuerelement zu setzen.

<input type="checkbox" id="terms" name="terms">
<label for="terms">Ich stimme den Geschäftsbedingungen zu</label>

Bedeutung der Beschriftung für die Barrierefreiheit

Die Beschriftung von Formular-Steuerelementen ist wichtig für die Barrierefreiheit. Sie hilft Ihnen, den Zweck und Kontext jedes Formular-Steuerelements zu verstehen, wenn Sie unterstützende Technologien wie Screenreader verwenden. Wenn eine Beschriftung richtig mit einem Formular-Steuerelement verknüpft ist, können unterstützende Technologien den Beschriftungstext an Sie übermitteln, was die Navigation und Interaktion mit dem Formular erleichtert.

Zusätzlich zum for-Attribut können Sie das Formular-Steuerelement auch in das <label>-Element einbetten. Dies verknüpft die Beschriftung implizit mit dem eingebetteten Steuerelement, auch ohne Verwendung des for-Attributs. Die Verwendung des for-Attributs gilt jedoch weiterhin als bewährte Praxis für eine explizite Verknüpfung.

<label>
  <input type="radio" name="gender" value="male"> Männlich
</label>
<label>
  <input type="radio" name="gender" value="female"> Weiblich
</label>

Durch die richtige Beschriftung von Formular-Steuerelementen machen Sie Ihre Formulare für alle Benutzer, einschließlich derer, die auf unterstützende Technologien angewiesen sind, barrierefreier und benutzerfreundlicher.

Fieldset-Elemente

Das <fieldset>-Element gruppiert zusammengehörige Formular-Steuerelemente innerhalb eines Formulars. Es erzeugt eine visuelle und logische Gruppierung von Steuerelementen, wodurch das Formular strukturierter und verständlicher wird. Das <fieldset>-Element enthält die gruppierten Steuerelemente und kann auch eine Überschrift oder Beschriftung für die Gruppe mithilfe des <legend>-Elements einschließen.

<form>
  <fieldset>
    <legend>Kontaktinformationen</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email"><br>
    <label for="phone">Telefon:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Legend-Elemente

Das <legend>-Element bietet eine Überschrift oder Beschriftung für ein <fieldset>. Es erscheint als Überschrift innerhalb des Fieldsets und beschreibt die gruppierten Formular-Steuerelemente. Das <legend>-Element sollte das erste untergeordnete Element des <fieldset>-Elements sein.

<fieldset>
  <legend>Lieferadresse</legend>
  <label for="address">Adresse:</label>
  <input type="text" id="address" name="address"><br>
  <label for="city">Stadt:</label>
  <input type="text" id="city" name="city"><br>
  <label for="zip">Postleitzahl:</label>
  <input type="text" id="zip" name="zip">
</fieldset>

Gruppierung verwandter Formular-Steuerelemente

Bei der Gruppierung von Formular-Steuerelementen mit <fieldset> sollten Sie die logische Beziehung zwischen den Steuerelementen berücksichtigen. Gruppieren Sie Steuerelemente, die eng miteinander verbunden sind oder zur gleichen Kategorie gehören. Dies hilft, das Formular zu organisieren und erleichtert Benutzern das Verständnis und Ausfüllen.

Einige gängige Beispiele für die Gruppierung verwandter Formular-Steuerelemente sind:

Durch die Gruppierung verwandter Formular-Steuerelemente mit <fieldset> und die Bereitstellung klarer Beschriftungen mit <legend> verbessern Sie die Benutzerfreundlichkeit und Lesbarkeit Ihrer Formulare. Es führt Benutzer durch das Formular und erleichtert das Verständnis der erforderlichen Informationen.

Denken Sie daran, für jedes Formular-Steuerelement innerhalb des Fieldsets geeignete Beschriftungen zu verwenden, um die Zugänglichkeit und Benutzerfreundlichkeit zu gewährleisten.

Required-Attribut

Das required-Attribut wird verwendet, um anzuzeigen, dass ein Formular-Steuerelement ausgefüllt werden muss, bevor das Formular abgesendet werden kann. Wenn ein Formular-Steuerelement das required-Attribut hat, verhindert der Browser das Absenden des Formulars, wenn das Steuerelement leer gelassen wird oder die angegebenen Validierungskriterien nicht erfüllt.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

Disabled-Attribut

Das disabled-Attribut wird verwendet, um ein Formular-Steuerelement zu deaktivieren, sodass es nicht interaktiv und nicht bearbeitbar ist. Deaktivierte Formular-Steuerelemente sind normalerweise ausgegraut und können nicht fokussiert, angeklickt oder von Ihnen geändert werden.

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

Deaktivierte Formular-Steuerelemente werden beim Absenden des Formulars nicht als Teil der Formulardaten übermittelt. Sie werden bei der Formularverarbeitung übersprungen.

Readonly-Attribut

Das readonly-Attribut wird verwendet, um ein Formular-Steuerelement schreibgeschützt zu machen, was bedeutet, dass Sie seinen Wert sehen, aber nicht ändern können. Schreibgeschützte Formular-Steuerelemente können weiterhin fokussiert werden und werden beim Absenden des Formulars einbezogen.

<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" value="benutzer@beispiel.de" readonly>

Schreibgeschützte Formular-Steuerelemente sind nützlich, wenn Sie vorausgefüllte oder berechnete Werte anzeigen möchten, die von Ihnen nicht geändert werden sollen.

Placeholder-Attribut

Das placeholder-Attribut wird verwendet, um einen Hinweis oder Beispieltext in einem Formular-Steuerelement anzuzeigen, wenn es leer ist. Der Platzhaltertext verschwindet, wenn Sie zu tippen beginnen oder das Formular-Steuerelement den Fokus erhält.

<label for="search">Suche:</label>
<input type="text" id="search" name="search" placeholder="Suchbegriff eingeben...">

Platzhalter sollten als ergänzender Hinweis verwendet werden und sollten nicht die ordnungsgemäße Beschriftung von Formular-Steuerelementen ersetzen. Sie sind hilfreich, um zusätzliche Anleitungen oder Beispiele zu geben, sollten aber nicht als einzige Möglichkeit zur Vermittlung des Zwecks eines Formular-Steuerelements verwendet werden.

Anwendung von CSS auf Formularsteuerelemente

Um CSS-Stile auf Formularsteuerelemente anzuwenden, können Sie CSS-Selektoren verwenden, um bestimmte Formularelemente anzusprechen. Sie können Formularsteuerelemente basierend auf ihrem Typ, ihrer Klasse, ID oder anderen Attributen auswählen. Hier sind einige Beispiele für CSS-Selektoren für Formularsteuerelemente:

/* Auswahl aller Input-Elemente */
input {
  /* CSS-Stile */
}

/* Auswahl eines bestimmten Input-Typs */
input[type="text"] {
  /* CSS-Stile */
}

/* Auswahl eines Formularsteuerelements mit einer bestimmten Klasse */
.form-control {
  /* CSS-Stile */
}

/* Auswahl eines Formularsteuerelements mit einer bestimmten ID */
#username {
  /* CSS-Stile */
}

Nachdem Sie die Formularsteuerelemente ausgewählt haben, können Sie verschiedene CSS-Eigenschaften anwenden, um sie zu gestalten. Einige gängige CSS-Eigenschaften für die Gestaltung von Formularsteuerelementen sind:

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

Pseudo-Klassen für Formularsteuerelementzustände

CSS bietet Pseudo-Klassen, mit denen Sie Formularsteuerelemente basierend auf ihren Zuständen gestalten können. Pseudo-Klassen sind Schlüsselwörter, die Selektoren hinzugefügt werden, um einen speziellen Zustand eines Elements anzugeben. Einige häufig verwendete Pseudo-Klassen für Formularsteuerelemente sind:

input[type="text"]:focus {
  outline: none;
  border-color: blue;
}

input[type="email"]:valid {
  border-color: green;
}

input[type="number"]:invalid {
  border-color: red;
}

input[type="text"]:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

Anpassung des Erscheinungsbildes von Formularsteuerelementen

CSS ermöglicht es Ihnen, das Aussehen von Formularsteuerelementen über die Standard-Browser-Stile hinaus zu ändern. Sie können CSS-Eigenschaften und -Techniken verwenden, um visuell ansprechende und einzigartige Formularsteuerelemente zu erstellen, die zum Design Ihrer Website passen.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: background-color 0.3s;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

select {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select:focus {
  outline: none;
  border-color: blue;
}