HTML-Formular

Geschätzte Lektüre: 14 Minuten 369 Ansichten

HTML-Formulare stellen das grundlegende Interface zwischen Website und Nutzer dar – sie sind das Tor zur Interaktivität im Web. Ohne Formulare wäre das Internet eine rein passive Erfahrung, bei der Nutzer lediglich Inhalte konsumieren könnten. Formulare ermöglichen es uns, Suchanfragen zu stellen, Kontaktformulare auszufüllen, Bestellungen aufzugeben und unzählige andere Interaktionen durchzuführen.

Das zentrale Element für alle Formulare ist der <form>-Tag. Dieser definiert einen Container für alle Formularsteuerelemente und legt fest, wie die Daten übertragen werden sollen:

<form action="/submit-form" method="POST">
  <!-- Formular-Elemente kommen hier hinein -->
</form>

Die beiden wesentlichen Attribute sind:
• action: Gibt die URL an, an die die Formulardaten gesendet werden
• method: Definiert die HTTP-Methode (meist GET oder POST)

Grundlegende Formular-Elemente

Text-Eingaben
Der <input>-Tag ist das vielseitigste Formular-Element, dessen Verhalten maßgeblich durch das type-Attribut bestimmt wird.

• Einfache Textfelder:

<input type="text" id="username" name="username" placeholder="Ihr Benutzername">

• type=“text“: Erzeugt ein einzeiliges Textfeld
• id und name: Identifizieren das Feld (name wird beim Absenden mitgesendet)
• placeholder: Zeigt einen Hinweistext, der verschwindet, wenn der Nutzer tippt

• Passwortfelder:

<input type="password" id="pwd" name="password">

Eingaben werden als Punkte oder Sterne dargestellt, um sie vor neugierigen Blicken zu schützen.

• Mehrzeilige Texteingaben:
Für längere Texte wie Kommentare oder Nachrichten verwendet man <textarea>:

<textarea id="message" name="message" rows="4" cols="50">
  Ihre Nachricht hier...
</textarea>

• rows und cols: Definieren die sichtbare Größe des Feldes

Auswahl-Elemente

• Checkboxen:
Erlauben die Auswahl mehrerer Optionen:

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Newsletter abonnieren</label>

value: Der Wert, der beim Absenden übermittelt wird, wenn die Checkbox aktiviert ist

• Radio-Buttons:
Ermöglichen die Auswahl einer einzelnen Option aus einer Gruppe:

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

<input type="radio" id="female" name="gender" value="female">
<label for="female">Weiblich</label>

Wichtig: Alle Radio-Buttons derselben Gruppe müssen denselben name-Wert haben.

• Dropdown-Menüs:

<select id="country" name="country">
  <option value="de">Deutschland</option>
  <option value="at">Österreich</option>
  <option value="ch">Schweiz</option>
</select>

• <select>: Definiert die Dropdown-Liste
• <option>: Jede Option in der Liste

Für Mehrfachauswahl kann multiple hinzugefügt werden:

<select id="interests" name="interests" multiple>
  <!-- Optionen -->
</select>

Schaltflächen

• Submit-Button:
Sendet das Formular ab:

<button type="submit">Absenden</button>
<!-- oder -->
<input type="submit" value="Absenden">

• Reset-Button:
Setzt alle Formularfelder auf ihre Standardwerte zurück:

<button type="reset">Zurücksetzen</button>

• Generische Buttons:
Für JavaScript-Interaktionen:

<button type="button">Klick mich</button>

Fortgeschrittene Formular-Elemente

HTML5-Input-Typen

Moderne Browser unterstützen spezialisierte Eingabefelder:

E-Mail:

<input type="email" id="email" name="email" required>

• Überprüft die Eingabe auf ein gültiges E-Mail-Format
• required: Macht das Feld obligatorisch

• Datum und Uhrzeit:

<input type="date" id="birthday" name="birthday">
<input type="time" id="appt" name="appt">
<input type="datetime-local" id="meeting" name="meeting">

• Zahlen:

<input type="number" id="quantity" name="quantity" min="1" max="10">

min/max: Definieren den zulässigen Wertebereich

• Range-Slider:

<input type="range" id="volume" name="volume" min="0" max="100">

• Farbe:

<input type="color" id="favcolor" name="favcolor">

• Datei-Upload

<input type="file" id="myfile" name="myfile" accept=".jpg,.png,.pdf">

accept: Beschränkt die zulässigen Dateitypen

Fortgeschrittene Steuerelemente

• Datalist:
Bietet Vorschläge für ein Textfeld:

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

• Progress und Meter:

<progress value="70" max="100">70%</progress>
<meter value="0.6" min="0" max="1">60%</meter>

Formular-Validierung

HTML5 bietet eingebaute Validierungsmechanismen:

• Erforderliche Felder:

<input type="text" id="username" name="username" required>

• Muster-Validierung:

<input type="text" id="zip" name="zip"
pattern="[0-9]{5}" title="Fünfstellige Postleitzahl">

Benutzerdefinierte Validierung:
JavaScript kann für komplexere Regeln verwendet werden:

document.querySelector('form').addEventListener('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault(); // Verhindert das Absenden
  }
});

Formular-Gruppierung und -Struktur

• Fieldset und Legend:
Gruppieren zusammengehörige Felder:

<fieldset>
  <legend>Kontaktinformationen</legend>
  <!-- Formularfelder hier -->
</fieldset>

• Labels:
Sollten immer verwendet werden, um die Zugänglichkeit zu verbessern:

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

Formular-Stil und -Layout

Mit CSS können Formulare ansprechend gestaltet werden:

input[type="text"], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Sicherheitsaspekte

• CSRF-Schutz:
Webanwendungen sollten CSRF-Tokens verwenden:

<input type="hidden" name="csrf_token" value="einzigartiger_token_wert">

Sensible Daten:
Passwörter sollten immer über HTTPS übertragen werden.

Praxisbeispiel: Komplettes Kontaktformular

<form action="/contact" method="POST">
  <fieldset>
    <legend>Kontaktformular</legend>
    
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div>
      <label for="email">E-Mail:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="subject">Betreff:</label>
      <select id="subject" name="subject">
        <option value="question">Frage</option>
        <option value="feedback">Feedback</option>
        <option value="support">Support</option>
      </select>
    </div>
    
    <div>
      <label for="message">Nachricht:</label>
      <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    
    <div>
      <label>
        <input type="checkbox" name="newsletter" checked>
        Newsletter abonnieren
      </label>
    </div>
    
    <div>
      <button type="submit">Senden</button>
      <button type="reset">Zurücksetzen</button>
    </div>
  </fieldset>
</form>

Zugänglichkeit (Accessibility)

• Verwenden Sie immer <label>-Elemente
• Fügen Sie aria-*-Attribute für komplexe Steuerelemente hinzu
• Stellen Sie sicher, dass das Formular mit der Tastatur bedienbar ist
• Verwenden Sie ausreichenden Kontrast für Texteingabefelder

Wichtiges Werkzeug

HTML-Formulare sind ein wichtiges Werkzeug zur Interaktion mit Nutzern. Durch die Kombination verschiedener Eingabeelemente, Validierungstechniken und moderner HTML5-Features können Sie benutzerfreundliche und funktionale Formulare erstellen. Die richtige Strukturierung und semantische Auszeichnung verbessert nicht nur die Nutzererfahrung, sondern auch die Zugänglichkeit und Suchmaschinenoptimierung Ihrer Webseiten.

Dieses Dokument teilen

HTML-Formular

Oder Link kopieren

INHALT

Abonnieren

×
Cancel