Formulare in HTML

Formulare sind die wichtigsten Interaktionselemente im Web. Sie ermöglichen die Datenerfassung von Benutzern und bilden die Grundlage für fast alle interaktiven Webanwendungen.

Grundlegende Formularstruktur

Jedes HTML-Formular beginnt mit dem <form>-Element, das zwei wichtige Attribute enthält:

• action: Die URL, an die die Formulardaten gesendet werden
• method: Die HTTP-Methode für die Übermittlung, meist “get” oder “post”

<form action="/submit-formular" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" required />

  <input type="submit" value="Absenden" />
</form>

Das <label>-Element verknüpft eine Beschriftung mit einem Formularfeld, was die Benutzerfreundlichkeit und Barrierefreiheit verbessert. Die Verknüpfung erfolgt über die Attribute for und id.

Verschiedene Input-Typen

HTML5 hat viele spezialisierte Input-Typen eingeführt, die die Benutzereingabe vereinfachen und automatische Validierung ermöglichen:

<!-- Textfeld: Für einzeilige Texteingaben -->
<input type="text" name="name" placeholder="Ihr Name" />
<!-- Der placeholder-Text wird angezeigt, wenn das Feld leer ist -->

<!-- Passwortfeld: Zeigt Sternchen oder Punkte anstelle des eingegebenen Textes -->
<input type="password" name="passwort" />

<!-- E-Mail: Validiert automatisch E-Mail-Adressen -->
<input type="email" name="email" />

<!-- Zahlenfeld: Erlaubt nur numerische Eingaben -->
<input type="number" name="alter" min="18" max="100" />
<!-- min und max begrenzen den gültigen Wertebereich -->

<!-- Telefonnummer: Optimiert für Mobilgeräte die Tastatur -->
<input type="tel" name="telefon" pattern="[0-9]{3,15}" />
<!-- pattern definiert ein reguläres Ausdrucksmuster zur Validierung -->

<!-- URL: Validiert automatisch Web-Adressen -->
<input type="url" name="website" />

<!-- Datumsauswahl: Zeigt einen Kalender zur Datumsauswahl -->
<input type="date" name="geburtsdatum" />

<!-- Zeitauswahl: Erleichtert die Eingabe von Uhrzeiten -->
<input type="time" name="uhrzeit" />

<!-- Datei-Upload: Ermöglicht das Hochladen von Dateien -->
<input type="file" name="dokument" />
<!-- Für Mehrfachauswahl kann das Attribut multiple hinzugefügt werden -->

<!-- Farbauswahl: Zeigt einen Farbwähler -->
<input type="color" name="farbwahl" />

<!-- Range-Slider: Für visuelle Auswahl von Werten in einem Bereich -->
<input type="range" name="bewertung" min="1" max="10" />

<!-- Verstecktes Feld: Nicht sichtbar, aber Teil der Formulardaten -->
<input type="hidden" name="benutzer_id" value="123" />
<!-- Nützlich für technische Informationen wie IDs oder Tokens -->

Auswahlfelder

Für Auswahlen zwischen Optionen bietet HTML verschiedene Formularelemente:

<!-- Checkbox: Für Ja/Nein-Auswahlen oder Mehrfachauswahlen -->
<input type="checkbox" id="zustimmung" name="zustimmung" />
<label for="zustimmung">Ich stimme den AGB zu</label>
<!-- Die Checkbox sendet ihren Wert nur, wenn sie angekreuzt ist -->

<!-- Radio-Buttons: Für Einzelauswahl aus mehreren Optionen -->
<input type="radio" id="mann" name="geschlecht" value="männlich" />
<label for="mann">Männlich</label>

<input type="radio" id="frau" name="geschlecht" value="weiblich" />
<label for="frau">Weiblich</label>

<input type="radio" id="divers" name="geschlecht" value="divers" />
<label for="divers">Divers</label>
<!-- Radio-Buttons mit gleichem name-Attribut bilden eine Auswahlgruppe -->

<!-- Dropdown-Menü: Platzsparende Einzelauswahl aus vielen Optionen -->
<label for="land">Land auswählen:</label>
<select id="land" name="land">
  <option value="">Bitte wählen...</option>
  <option value="DE">Deutschland</option>
  <option value="AT">Österreich</option>
  <option value="CH">Schweiz</option>
</select>
<!-- Das value-Attribut bestimmt den Wert, der übermittelt wird -->

<!-- Mehrzeilige Textfelder: Für längere Texteingaben -->
<label for="nachricht">Ihre Nachricht:</label>
<textarea id="nachricht" name="nachricht" rows="5" cols="40"></textarea>
<!-- rows und cols bestimmen die anfängliche Grösse des Textfeldes -->

Formularattribute

HTML bietet verschiedene Attribute, um Formularfelder zu konfigurieren und zu validieren:

<!-- Erforderliche Felder: Verhindert das Absenden ohne Eingabe -->
<input type="text" name="name" required />

<!-- Automatischer Fokus: Setzt den Cursor bei Seitenladung in dieses Feld -->
<input type="text" name="suchbegriff" autofocus />

<!-- Vorausgefüllte Werte: Zeigt einen Standardwert an -->
<input type="text" name="land" value="Deutschland" />

<!-- Deaktivierte Felder: Können nicht bearbeitet werden und werden nicht übermittelt -->
<input type="text" name="id" value="12345" disabled />

<!-- Schreibgeschützte Felder: Können nicht bearbeitet werden, werden aber übermittelt -->
<input type="text" name="benutzername" value="max_muster" readonly />

<!-- Minimale und maximale Werte: Begrenzt numerische Eingaben -->
<input type="number" name="alter" min="18" max="99" />

<!-- Eingabemuster: Validiert Eingaben gegen reguläre Ausdrücke -->
<input type="text" name="plz" pattern="[0-9]{5}" />
<!-- Dieses Beispiel akzeptiert nur genau 5 Ziffern (z.B. für deutsche PLZ) -->

<!-- Schrittweite für Zahlen: Definiert Inkrement/Dekrement-Schritte -->
<input type="number" name="menge" min="0" max="100" step="5" />
<!-- Erlaubt nur Werte in 5er-Schritten: 0, 5, 10, 15, usw. -->

Formularbereiche gruppieren

Für bessere Struktur und Übersicht können Formularelemente thematisch gruppiert werden:

<form>
  <fieldset>
    <legend>Persönliche Daten</legend>
    <!-- legend definiert die Überschrift der Gruppe -->
    <label for="vorname">Vorname:</label>
    <input type="text" id="vorname" name="vorname" />

    <label for="nachname">Nachname:</label>
    <input type="text" id="nachname" name="nachname" />
  </fieldset>

  <fieldset>
    <legend>Kontaktinformationen</legend>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" />

    <label for="telefon">Telefon:</label>
    <input type="tel" id="telefon" name="telefon" />
  </fieldset>

  <input type="submit" value="Absenden" />
</form>

Das <fieldset>-Element erzeugt einen sichtbaren Rahmen um zusammengehörige Formularelemente und verbessert die visuelle Gruppierung und Barrierefreiheit. Das <legend>-Element bietet eine Beschriftung für das Fieldset.

Formularbuttons

Buttons sind wichtig, um Aktionen in Formularen auszulösen:

<!-- Submit-Button: Sendet das Formular ab -->
<input type="submit" value="Formular absenden" />

<!-- Alternative Syntax für den Submit-Button -->
<button type="submit">Formular absenden</button>

<!-- Reset-Button: Setzt alle Formularfelder auf ihre Standardwerte zurück -->
<input type="reset" value="Zurücksetzen" />

<!-- Einfacher Button ohne vordefinierte Aktion (für JavaScript) -->
<button type="button" onclick="checkForm()">Formular prüfen</button>

Der <button>-Tag ist flexibler als der <input>-Tag, da er auch HTML-Elemente (wie Icons) enthalten kann.

Übung: Umfrage-Formular erstellen

Aufgabe: Interaktionsformulare für den Blog erstellen

Erstellen Sie eine Kontaktseite “kontakt.html” (oder erweitern Sie Ihre bestehende):

• Mit einem vollständigen Kontaktformular
• Strukturieren Sie das Formular mit Fieldsets und Legends
• Das Formular soll mindestens folgende Felder enthalten:
  • Name (als Pflichtfeld)
  • E-Mail (mit E-Mail-Validierung, Pflichtfeld)
  • Betreff (Dropdown mit verschiedenen Optionen: Frage, Feedback, Zusammenarbeit, Sonstiges)
  • Nachricht (Textarea, Pflichtfeld)
  • Datenschutz-Checkbox (Pflichtfeld)
  • Absenden-Button mit angepasstem Text

Um das Formular tatsächlich funktionsfähig zu machen, braucht es ein Backend. Damit das nicht selbst erstellt werden muss, Integrieren Sie dafür EmailJS:

1. Registrieren Sie sich kostenlos bei EmailJS

2. Erstellen Sie einen E-Mail-Service (z.B. mit Gmail oder einem anderen Provider)

3. Erstellen Sie eine E-Mail-Vorlage mit Platzhaltern für Ihre Formularfelder

4. Fügen Sie das EmailJS SDK in Ihren HTML-Code ein:

   <script
     type="text/javascript"
     src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
   ></script>
   <script type="text/javascript">
     (function () {
       emailjs.init("IHR_PUBLIC_KEY"); // Fügen Sie hier Ihren Public Key von EmailJS ein
     })();
   </script>

5. Fügen Sie ein JavaScript-Event zum Formular hinzu, um die E-Mail zu versenden:

   <script type="text/javascript">
     document
       .getElementById("kontaktformular")
       .addEventListener("submit", function (event) {
         event.preventDefault(); // Verhindert das normale Absenden des Formulars
   
         // Senden der E-Mail über EmailJS
         emailjs.sendForm("IHR_SERVICE_ID", "IHRE_TEMPLATE_ID", this).then(
           function () {
             alert("Vielen Dank! Ihre Nachricht wurde erfolgreich gesendet.");
             document.getElementById("kontaktformular").reset(); // Formular zurücksetzen
           },
           function (error) {
             alert("Leider ist ein Fehler aufgetreten: " + error.text);
           }
         );
       });
   </script>

6. Geben Sie Ihrem Formular eine ID, damit das JavaScript darauf zugreifen kann:

   <form id="kontaktformular">
     <!-- Formularfelder -->
   </form>

Mit dieser Integration wird das Formular vollständig funktionsfähig und die eingegebenen Daten werden als E-Mail an Ihre hinterlegte Adresse gesendet, ohne dass Sie einen eigenen Server betreiben müssen.

Bonus

Erstellen Sie ein “Quick Poll”-Widget für Ihre Startseite - eine kurze, einfache Umfrage mit nur einer Frage und wenigen Antwortoptionen (z.B. “Welches Thema soll ich als nächstes behandeln?”). Implementieren Sie dabei ein Formular mit Radio-Buttons und einem Submit-Button.

Hinweise

• Verwenden Sie für alle Eingabefelder entsprechende Labels
• Geben Sie sinnvolle Placeholder-Texte an
• Kennzeichnen Sie Pflichtfelder (required-Attribut)
• Verwenden Sie geeignete Validierungen (pattern, min/max, etc.)
• Beachten Sie die Barrierefreiheit, indem Sie Labels korrekt mit den Formularfeldern verknüpfen
• Gruppieren Sie zusammengehörige Felder sinnvoll mit Fieldsets