Alphabetisch sortierte Übersicht aller HTML-Formularelemente.

Jedes Element erfüllt eine spezifische Funktion und trägt dazu bei, Benutzerinteraktionen und Dateneingaben vielseitig und benutzerfreundlich zu gestalten. Mit dieser Liste kannst du schnell das passende Element für deine Anforderungen finden:

<button>

Ein <button> ist eine interaktive Schaltfläche für Benutzeraktionen. Es kann Text, Symbole oder beides enthalten.

Button-Typen:

1. type="button": Erstellt eine Schaltfläche ohne Standardaktion und dient in Kombination mit JavaScript für benutzerdefinierte Aktionen.
2. type="reset": Erstellt eine Schaltfläche, die alle Formulareingaben zurücksetzt.
3. type="submit": Erstellt eine Schaltfläche, die ein Formular absendet. Dies ist der Standardtyp und muss nicht explizit angegeben werden.

<datalist>

Das <datalist>-Element bietet eine Liste von vordefinierten Werten für ein <input>-Feld. Die Nutzer können daraus wählen oder einen eigenen Wert eingeben.

<fieldset>

Mit <fieldset> können Eingabefelder logisch gruppiert werden. Es wird oft zusammen mit <legend> verwendet, um der Gruppe einen beschreibenden Titel zu geben.

<form>

Das <form>-Element ist der Container, der Formulareingaben sammelt und an einen Webserver sendet. Es enthält in der Regel alle Eingabefelder, Schaltflächen und andere Formularsteuerelemente.

<input>

Das <input>-Element wird für Benutzereingaben verwendet und bietet viele Typen, die verschiedene Datenarten erfassen.

Wichtige input-Typen:

• type="button": Erzeugt eine Schaltfläche ohne Standardaktion.
• type="checkbox": Ermöglicht die Auswahl mehrerer Optionen, die einzeln angeklickt werden können.
• type="color": Erstellt ein Farbauswahlelement mit einer Farbpalette.
• type="date": Erstellt ein Eingabefeld für ein Datum mit einer Kalenderauswahl.
• type="datetime-local": Kombiniert Datum- und Zeiteingabe in einem Feld.
• type="email": Erstellt ein Eingabefeld zur Eingabe von E-Mail-Adressen und prüft das Format.
• type="file": Erstellt einen Dialog zum Hochladen von Dateien.
• type="hidden": Erstellt ein unsichtbares Eingabefeld zur Übermittlung von Daten.
• type=“image“: Erstellt ein anklickbares Bild.
• type="number": Für die Eingabe von Zahlen; oft mit Pfeiltasten zur Erhöhung/Verringerung.
• type="password": Erstellt ein Eingabefeld für Passwörter, in dem die Eingaben maskiert werden.
• type="radio": Erlaubt die Auswahl einer einzigen Option aus mehreren (Gruppierung nötig).
• type="range": Erstellt einen Schieberegler zur Auswahl eines Wertes innerhalb eines Bereichs.
• type="reset": Erstellt einen Button, der die Formulardaten zurücksetzt.
• type="search": Erstellt ein speziell für die Suche vorgesehenes Eingabefeld.
• type="submit": Erstellt eine Schaltfläche, die ein Formular absendet.
• type="tel": Speziell für Telefonnummern; setzt keine Formatprüfung voraus.
• type="text": Ein allgemeines Eingabefeld für einzeiligen Text.
• type="time": Erstellt ein Eingabefeld für die Uhrzeit.
• type="url": Erstellt ein Eingabefeld für Webadressen mit Formatprüfung.
• type="week": Für die Eingabe einer Kalenderwoche.

<label>

Das <label>-Element dient zur Beschriftung von Eingabefeldern wie <input>, <textarea> oder <select>. Das Element ist mit einem Eingabefeld verknüpft, sodass es bei einem Klick auf das Label aktiv wird.

<legend>

Das <legend> beschreibt eine Gruppe von Formularfeldern, die mit einem <fieldset> erstellt wurde. Es dient als Titel für die Gruppe.

<meter>

Das <meter>-Element visualisiert einen numerischen Messwert in einem bestimmten Bereich. Es wird z. B. für Bewertungen oder Fortschrittsanzeigen genutzt.

<optgroup>

Mit <optgroup> lassen sich Dropdown-Optionen in Gruppen organisieren. Jede Gruppe kann eine Beschriftung haben.

<option>

Das <option>-Tag definiert die möglichen Auswahloptionen in einer Dropdown-Liste (<select>).

<output>

Das <output>-Element zeigt das Ergebnis einer Berechnung an, z. B. Werte, die durch Benutzeraktionen oder Skripte berechnet wurden.

<progress>

Das <progress>-Element zeigt den Fortschritt eines Prozesses an, z. B. einen Ladevorgang. Die Fortschrittsanzeige ist visuell und basiert auf Zahlenwerten.

<select>

Das <select>-Element erstellt eine Dropdown-Liste, aus der der Benutzer eine Option auswählt. Es wird in Kombination mit <option> verwendet.

<textarea>

Das <textarea>-Element dient zur Eingabe von mehrzeiligem Text. Es kann in Höhe und Breite angepasst und beliebig formatiert werden.