HTML Formular-Elemente und ihre Attribute

In dieser Übersicht sind alle möglichen HTML-Formularelemente mit einer kurzen Beschreibung sowie deren Attribute mit einer Erläuterung aufgeführt.

🔹 Allgemeine Formularelemente (<input>, <textarea>, <select>, <button>)

📌 Beschreibung

Diese Elemente gehören zu den zentralen Bausteinen eines HTML-Formulars und ermöglichen die Benutzereingabe.

🔸 Attribute

• id – Eindeutige Kennung für das Element.
• class – CSS-Klasse(n) für die Gestaltung.
• name – Name zur Identifikation des Elements im Formular.
• value – Vorgabewert des Elements.
• disabled – Deaktiviert das Element.
• readonly – Macht das Element nur lesbar.
• required – Markiert das Element als Pflichtfeld.
• autofocus – Setzt den Fokus beim Laden der Seite.
• form – Verknüpft das Element mit einem bestimmten Formular.
• tabindex – Legt die Fokus-Reihenfolge fest.
• title – Tooltip-Text.
• aria-* – Barrierefreiheits-Attribute.
• style – Inline-CSS-Stile.
• autocomplete – Legt die Autovervollständigung fest.
• dir – Gibt die Textausrichtung an.
• lang – Bestimmt die Sprache des Inhalts.

🔹 Eingabefeld (<input>)

📌 Beschreibung

Das <input>-Element ermöglicht verschiedene Arten der Dateneingabe.

🔸 Attribute

• type – Bestimmt den Eingabetyp (z. B. text, password, email).
• placeholder – Zeigt einen Hinweistext an.
• size – Definiert die sichtbare Zeichenlänge.
• maxlength – Begrenzt die maximale Zeichenanzahl.
• minlength – Setzt die minimale Zeichenanzahl.
• pattern – Legt ein reguläres Ausdrucksmuster fest.
• spellcheck – Aktiviert die Rechtschreibprüfung.
• list – Verknüpft eine <datalist> für Vorschläge.
• multiple – Erlaubt die Auswahl mehrerer Werte.

🔸 Spezifische Attribute nach Typ

📍 Numerische Eingaben (number, range)

• min – Definiert den minimalen Wert.
• max – Legt den maximalen Wert fest.
• step – Bestimmt die Schrittweite.

📍 Dateien (file)

• accept – Gibt erlaubte Dateitypen an.
• capture – Aktiviert Kamera/Mikrofon für Eingabe.

📍 Checkbox und Radio (checkbox, radio)

• checked – Markiert das Feld standardmäßig als ausgewählt.

📍 Farbauswahl (color)

• value – Vorgabefarbe als Hexadezimalwert (#ff0000).

📍 Datum/Zeit (date, datetime-local, month, week, time)

• min, max – Begrenzen den wählbaren Zeitraum.
• step – Definiert die erlaubte Zeiteinheit.
• value – Setzt den voreingestellten Wert.

📍 Passwort (password)

• maxlength, minlength, pattern – Begrenzen die Eingabe.
• autocomplete="new-password" – Verhindert das automatische Speichern.

📍 Suchfeld (search)

• enterkeyhint – Gibt die gewünschte Enter-Taste-Aktion an.
• results – Steuert die Anzahl gespeicherter Suchergebnisse.

🔹 Textfeld (<textarea>)

📌 Beschreibung

Das <textarea>-Element ermöglicht mehrzeilige Texteingaben.

🔸 Attribute

• cols – Anzahl der sichtbaren Zeichen pro Zeile.
• rows – Definiert die sichtbare Zeilenanzahl.
• wrap – Bestimmt das Verhalten bei Zeilenumbrüchen.
• maxlength, minlength – Begrenzen die Eingabelänge.
• spellcheck – Aktiviert die Rechtschreibprüfung.
• placeholder – Zeigt einen Hinweistext an.
• readonly – Setzt das Feld auf nur lesbar.

🔹 Dropdown (<select>)

📌 Beschreibung

Das <select>-Element stellt eine Dropdown-Auswahlliste bereit.

🔸 Attribute

• multiple – Erlaubt die Auswahl mehrerer Optionen.
• size – Anzahl der gleichzeitig sichtbaren Optionen.

🔹 Optionen (<option>) innerhalb von <select>

📌 Beschreibung

Das <option>-Element definiert eine Auswahlmöglichkeit innerhalb eines <select>.

🔸 Attribute

• value – Wert der Option.
• selected – Markiert die Option als vorausgewählt.
• disabled – Deaktiviert die Option.

🔹 Button (<button>, <input type="submit">, <input type="reset">, <input type="button">)

📌 Beschreibung

Diese Elemente ermöglichen interaktive Schaltflächen für das Formular.

🔸 Attribute

• type – Legt die Funktion des Buttons fest (button, submit, reset).
• disabled – Deaktiviert den Button.
• autofocus – Setzt den Fokus auf den Button beim Laden der Seite.

🔹 Formular (<form>)

📌 Beschreibung

Das <form>-Element umschließt Formularelemente und steuert die Übermittlung der Daten.

🔸 Attribute

• action – Ziel-URL für die Datenübermittlung.
• method – Übertragungsmethode (GET, POST).
• enctype – Kodierungsart für die Datenübertragung (application/x-www-form-urlencoded, multipart/form-data).
• novalidate – Deaktiviert die Formularvalidierung.
• target – Bestimmt, wo das Ergebnis geöffnet wird (_self, _blank).
• autocomplete – Steuert die Autovervollständigung.
• rel – Beziehung zur Zielressource.
• accept-charset – Zeichensatz des Formulars.
• name – Identifiziert das Formular.

Das war die komplette Liste aller möglichen HTML-Formularelemente und ihrer Attribute! 😊