Webformulare (kurz Formulare genannt) ermöglichen es Benutzern zwischen Optionen zu wählen oder Daten wie Adressen, Termine und Texte einzugeben und diese zur Weiterverarbeitung abzusenden. Formulare (eng. forms) werden mit dem form-Element erzeugt.

Beispiel

Links ist der Code zu sehen, rechts das passende Rendering.

<form>
    <label for="benutzername">Benutzername:</label>
    <input type="text" id="benutzername" name="benutzername" required>
    <br>
    <label for="passwort">Passwort:</label>
    <input type="password" id="passwort" name="passwort" required>
    <br>
    <br>
    <button>Anmelden</button>
</form>

Das form-Element wird paarweise verwendet und gibt den "Rahmen" für ein Formular vor. Alle Formularelemente (input, select, button etc.) werden innerhalb dieses Elements notiert.

Code

<form>
    <!-- Formularelemente -->
</form>

Die Eingabe der Daten kann über input-Elemente erfolgen. Das Attribut type spezifiziert, welches Verhalten das Element zeigen soll.

• type="text": ganz normale Textbox
• type="password": Eingabe wird durch Platzhalter (Sternchen, Punkte etc) verschleiert (das Passwort wird dabei nicht verschlüsselt!)
• type="email": erlaubt nur gültige E-Mail-Adressen (es wird nicht geprüft ob die E-Mail-Adresse auch wirklich existiert).
• type="number": es sind nur Zahlen als Eingabe erlaubt.

Es gibt noch zahlreiche weitere Typen (zur Übersicht). Möchte man den Benutzer zu einer Eingabe zwingen, dann kann man das Attribut required="required" (oder kurz required) verwenden. Jedes input-Element sollte ein id-Attribut besitzen. Der Attributwert muss innerhalb des Formulars eindeutig sein. Es kann dazu verwendet werden, um die Beschriftung (label-Element) mit dem input-Element zu verknüpfen. Verpflichtend ist die Angabe eines name-Attribut. Der Name wird verwendet, um die Eingabedaten nach dem Absenden des Formulars übermitteln zu können. Der eingegebene Wert wird mit dem Namen verknüpft. Auch der Name muss innerhalb des Formulars eindeutig sein.

<input type="text" id="benutzername" name="bname" required>
<input id="fach" name="fach" required>
<input id="passwort" name="pw" required>
<input type="number" min="0" max="120" step="1" id="alter" name="alter" required>
                    

Für das Attribut type ist der Standardwert text. Je nach Inputtyp sind weitere Attribute verfügbar (zum Beispiel min für type="number").

Ein label-Element dient zur Beschriftung von input-Elementen. Mit dem for-Attribut wird das input-Element referenziert. Der Attributwert muss identisch zu einem id-Attributwert sein.

<label for="benutzername">Benutzername:</label>

Ein select-Element kann in einem Formular zur Auswahl von festen Einträgen eingesetzt werden (auch Auswahlliste oder Dropdown-Liste genannt). Auch das select-Element benötigt einen Namen, eine ID und kann als verpflichtende Angabe deklariert werden. Die Auswahleinträge werden innerhalb von option-Elementen notiert. Jeder Eintrag benötigt ein option-Element. Jedes option-Element besitzt ein Attribut value. Darin wird definiert, welcher Wert beim Absenden des Formulars übertragen wird. Innerhalb des option-Elements wird die visuelle Anzeige definiert. Dieser Inhalt wird nicht übertragen.

<label for="pet-select">Haustier:</label>
<select name="pets" id="pet-select">
    <option value="dog">Hund</option>
    <option value="cat">Katze</option>
    <option value="mouse">Maus</option>
</select>
            

Das Absenden des Formulars wird mit einem Klick auf den "Submit"-Button ausgelöst. Ein Button kann mit dem button-Element eingefügt werden. Die Beschriftung des Buttons wird als Inhalt definiert. Das Attribut type kann den Wert submit (Standard) oder reset besitzen.
Mit <button type="submit">Absenden</button> erhält man einen "Submit"-Button der das Formular abschickt und die Datenübertragung initiiert.

<button type="submit">Los</button>
<button>Abschicken</button>
<button type="reset">Löschen</button>