Formulare erstellen

Formulare sind ueberall im Web — Login-Seiten, Suchfelder, Kontaktformulare, Online-Shops. In diesem Kapitel lernst du, wie du moderne, barrierefreie Formulare in HTML erstellst.

Das Form-Element

Jedes Formular startet mit dem <form>-Tag:

<form action="/senden" method="POST">
    <!-- Formularfelder hier -->
    <button type="submit">Absenden</button>
</form>

Attribut	Bedeutung
action	URL, an die die Daten gesendet werden
method	GET (Daten in URL) oder POST (Daten im Body)

Wann GET, wann POST?

• GET: Suchformulare, Filter — Daten sichtbar in der URL
• POST: Login, Registrierung, Kontakt — sensible Daten geschuetzt

Eingabefelder: <input>

Das <input>-Tag ist das vielseitigste Formularelement. Der type bestimmt, was angezeigt wird:

Texteingaben

<!-- Einzeiliger Text -->
<input type="text" name="vorname" placeholder="Dein Vorname">

<!-- E-Mail (mit Validierung!) -->
<input type="email" name="email" placeholder="deine@email.de">

<!-- Passwort (verdeckt) -->
<input type="password" name="passwort" placeholder="Passwort">

<!-- URL -->
<input type="url" name="webseite" placeholder="https://...">

<!-- Telefon -->
<input type="tel" name="telefon" placeholder="+49 123 456 7890">

<!-- Suche (mit Loeschen-Button) -->
<input type="search" name="suche" placeholder="Suche...">

Zahlen und Bereiche

<!-- Zahl -->
<input type="number" name="alter" min="0" max="120" step="1">

<!-- Schieberegler -->
<input type="range" name="lautstaerke" min="0" max="100" value="50">

Datum und Zeit

<!-- Datum -->
<input type="date" name="geburtsdatum">

<!-- Datum und Zeit -->
<input type="datetime-local" name="termin">

<!-- Monat -->
<input type="month" name="monat">

<!-- Zeit -->
<input type="time" name="uhrzeit">

Auswahl und Sonstiges

<!-- Farbe -->
<input type="color" name="farbe" value="#e44d26">

<!-- Datei-Upload -->
<input type="file" name="dokument" accept=".pdf,.jpg,.png">

<!-- Verstecktes Feld -->
<input type="hidden" name="formular-id" value="kontakt-v2">

Labels: Felder beschriften

Jedes Eingabefeld braucht ein Label! Das ist essentiell fuer Barrierefreiheit:

<!-- Methode 1: Label mit for-Attribut (empfohlen) -->
<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">

<!-- Methode 2: Input im Label verschachtelt -->
<label>
    Vorname:
    <input type="text" name="vorname">
</label>

Das for-Attribut im <label> muss mit der id des <input> uebereinstimmen.

Warum sind Labels wichtig?

• Screenreader lesen das Label vor
• Klick auf das Label fokussiert das Eingabefeld
• Groessere Klickflaeche auf Mobilgeraeten

Textarea: Mehrzeiliger Text

<label for="nachricht">Deine Nachricht:</label>
<textarea id="nachricht" name="nachricht"
          rows="5" cols="40"
          placeholder="Schreibe hier deine Nachricht..."></textarea>

Select: Dropdown-Menue

<label for="land">Land:</label>
<select id="land" name="land">
    <option value="">-- Bitte waehlen --</option>
    <option value="de">Deutschland</option>
    <option value="at">Oesterreich</option>
    <option value="ch">Schweiz</option>
</select>

Optionen gruppieren

<select name="sprache">
    <optgroup label="Frontend">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
    </optgroup>
    <optgroup label="Backend">
        <option value="python">Python</option>
        <option value="node">Node.js</option>
        <option value="go">Go</option>
    </optgroup>
</select>

Checkboxen und Radio-Buttons

Checkboxen (Mehrfachauswahl)

<fieldset>
    <legend>Deine Interessen:</legend>

    <label>
        <input type="checkbox" name="interesse" value="html"> HTML
    </label>
    <label>
        <input type="checkbox" name="interesse" value="css"> CSS
    </label>
    <label>
        <input type="checkbox" name="interesse" value="js" checked> JavaScript
    </label>
</fieldset>

Radio-Buttons (Einfachauswahl)

<fieldset>
    <legend>Erfahrungslevel:</legend>

    <label>
        <input type="radio" name="level" value="anfaenger" checked>
        Anfaenger
    </label>
    <label>
        <input type="radio" name="level" value="fortgeschritten">
        Fortgeschritten
    </label>
    <label>
        <input type="radio" name="level" value="profi">
        Profi
    </label>
</fieldset>

Wichtig: Radio-Buttons mit demselben name bilden eine Gruppe — nur einer kann ausgewaehlt werden.

Fieldset und Legend

Gruppiere zusammengehoerige Felder:

<form>
    <fieldset>
        <legend>Persoenliche Daten</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

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

    <fieldset>
        <legend>Adresse</legend>
        <label for="strasse">Strasse:</label>
        <input type="text" id="strasse" name="strasse">

        <label for="stadt">Stadt:</label>
        <input type="text" id="stadt" name="stadt">
    </fieldset>
</form>

Formulare validieren (ohne JavaScript!)

HTML5 bietet leistungsstarke eingebaute Validierung:

<form>
    <!-- Pflichtfeld -->
    <input type="text" name="name" required>

    <!-- Mindest- und Maximallänge -->
    <input type="text" name="benutzername"
           minlength="3" maxlength="20" required>

    <!-- E-Mail wird automatisch validiert -->
    <input type="email" name="email" required>

    <!-- Zahlenbereich -->
    <input type="number" name="alter" min="18" max="99" required>

    <!-- Regulaerer Ausdruck -->
    <input type="text" name="plz"
           pattern="[0-9]{5}"
           title="Bitte gib eine 5-stellige Postleitzahl ein"
           required>

    <button type="submit">Absenden</button>
</form>

Validierungs-Attribute im Ueberblick

Attribut	Funktion	Beispiel
required	Pflichtfeld	<input required>
minlength	Minimale Zeichenlaenge	minlength="3"
maxlength	Maximale Zeichenlaenge	maxlength="100"
min / max	Zahlenbereich	min="0" max="100"
pattern	Regex-Muster	pattern="[0-9]{5}"
type="email"	E-Mail-Validierung	Automatisch
type="url"	URL-Validierung	Automatisch

Datalist: Autocomplete

<label for="browser">Dein Browser:</label>
<input type="text" id="browser" name="browser" list="browser-liste">

<datalist id="browser-liste">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Brave">
</datalist>

Der Nutzer sieht Vorschlaege, kann aber auch eigene Werte eingeben.

Buttons

<!-- Submit-Button (sendet das Formular) -->
<button type="submit">Absenden</button>

<!-- Reset-Button (setzt alle Felder zurueck) -->
<button type="reset">Zuruecksetzen</button>

<!-- Normaler Button (fuer JavaScript) -->
<button type="button">Klick mich</button>

Tipp: Verwende immer <button> statt <input type="submit"> — Buttons koennen HTML-Inhalte enthalten.

Ein vollstaendiges Kontaktformular

<form action="/kontakt" method="POST">
    <fieldset>
        <legend>Kontaktformular</legend>

        <div>
            <label for="k-name">Name:</label>
            <input type="text" id="k-name" name="name"
                   required minlength="2" autocomplete="name">
        </div>

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

        <div>
            <label for="k-betreff">Betreff:</label>
            <select id="k-betreff" name="betreff" required>
                <option value="">-- Bitte waehlen --</option>
                <option value="frage">Allgemeine Frage</option>
                <option value="feedback">Feedback</option>
                <option value="bug">Fehlermeldung</option>
            </select>
        </div>

        <div>
            <label for="k-nachricht">Nachricht:</label>
            <textarea id="k-nachricht" name="nachricht"
                      rows="6" required minlength="10"
                      placeholder="Deine Nachricht..."></textarea>
        </div>

        <div>
            <label>
                <input type="checkbox" name="datenschutz" required>
                Ich akzeptiere die Datenschutzerklaerung
            </label>
        </div>

        <button type="submit">Nachricht senden</button>
    </fieldset>
</form>

Formulare stylen

form {
    max-width: 500px;
    margin: 0 auto;
}

fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
}

legend {
    font-weight: 600;
    padding: 0 0.5rem;
}

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #e44d26;
    box-shadow: 0 0 0 3px rgba(228, 77, 38, 0.2);
}

button[type="submit"] {
    background: #e44d26;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: #c0392b;
}

Uebungen

Uebung 1: Registrierungsformular

Erstelle ein Registrierungsformular mit:

• Vorname, Nachname, E-Mail
• Passwort (mindestens 8 Zeichen)
• Geburtsdatum
• Geschlecht (Radio-Buttons)
• AGB-Checkbox (Pflichtfeld)

Uebung 2: Umfrage

Erstelle ein Umfrageformular mit mindestens 5 verschiedenen Eingabetypen (Text, Dropdown, Checkboxen, Range-Slider, etc.).

Uebung 3: Styling

Style das Kontaktformular aus diesem Kapitel mit eigenem CSS. Achte auf:

• Fokus-Styles fuer alle Felder
• Hover-Effekt auf dem Button
• Responsive Darstellung

Was kommt als Naechstes?

Im naechsten Kapitel wechseln wir zu CSS! Du lernst:

• Was CSS ist und wie es funktioniert
• Wie du CSS in deine HTML-Seite einbindest
• Die drei Methoden: Inline, Internal, External

Zusammenfassung

• Formulare starten mit <form> und enthalten Eingabefelder
• <input> ist extrem vielseitig — der type bestimmt die Funktion
• Jedes Feld braucht ein <label> fuer Barrierefreiheit
• <fieldset> und <legend> gruppieren zusammengehoerige Felder
• HTML5 bietet eingebaute Validierung mit required, pattern, min, max
• <datalist> ermoeglicht Autocomplete-Vorschlaege
• Verwende GET fuer Suchen, POST fuer sensible Daten

---