HTML-Eingabeattribute: Alles, was Sie wissen müssen

Arten von Eingabeattributen

Als Webentwickler/-in verwendest du Eingabeattribute, um die Interaktion mit deinen Benutzern/-innen zu steuern und den Datenfluss in deinen Formularen zu verwalten. Es stehen dir zahlreiche Attributtypen zur Verfügung, jeder mit seinen einzigartigen Funktionen und Zwecken.

Typen von Eingabekontrollen

Eines der wichtigsten Eingabeattribute ist das type-Attribut. Es definiert die Art des Eingabekontrollfelds, das angezeigt werden soll. Zu den gängigsten Typen gehören:

• text: Ein einzeiliges Textfeld für Freitextantworten.
• password: Ein einzeiliges Textfeld, das Passwörter mit maskierten Zeichen anzeigt.
• email: Ein Feld, das eine E-Mail-Adresse erwartet und die Eingabe mithilfe von E-Mail-Validierungsregeln überprüft.
• number: Ein Feld, das eine numerische Eingabe erwartet und die Eingabe auf numerische Zeichen beschränkt.
• radio: Eine Gruppe von Optionsfeldern, von denen nur eines ausgewählt werden kann.
• checkbox: Ein Feld zum Aktivieren oder Deaktivieren einer Option.

Jedes dieser Feldtypen hat sein eigenes Verhalten und seine eigenen Attribute, mit denen du das Aussehen, die Funktionalität und die Validierung konfigurieren kannst.

Attribute für Größe und mehrzeiligen Text

Die Attribute size und rows ermöglichen es dir, die Größe von Eingabekontrollfeldern anzupassen.

• size: Legt die Breite eines Textfeldes in Zeichen fest.
• rows: Legt die Anzahl der Zeilen in einem mehrzeiligen Textfeld fest.

Diese Attribute können nützlich sein, um die Lesbarkeit und Benutzerfreundlichkeit deiner Formulare zu verbessern.

Sonstige Attribute

Neben den oben genannten Attributen gibt es noch eine Vielzahl weiterer Attribute, die für verschiedene Zwecke verwendet werden können. Dazu gehören:

• placeholder: Legt einen Platzhaltertext fest, der in einem Feld erscheint, bevor der Benutzer/-in eine Eingabe vornimmt.
• required: Gibt an, dass ein Feld ausgefüllt werden muss, bevor das Formular übermittelt werden kann.
• autocomplete: Steuert, ob ein Browser die automatische Vervollständigung für ein Feld aktivieren soll.

Bedeutung von Typattributen

Das type-Attribut ist ein entscheidender Aspekt von HTML-Eingabefeldern, da es den Typ der Daten definiert, die das Feld akzeptieren soll. Indem du verschiedene Typen auswählst, kannst du die Eingaben einschränken und eine valide Dateneingabe sicherstellen.

Auswählen des richtigen Eingabetypen

Der richtige Eingabetyp hängt von der Art der Daten ab, die du sammeln möchtest. Hier sind einige gängige Optionen:

• text: Für allgemeine Texteingaben, wie z. B. Namen, Adressen oder Notizen.
• password: Für sensible Informationen, wie z. B. Passwörter oder Kreditkartennummern, die maskiert werden sollen.
• email: Für E-Mail-Adressen, die automatisch auf Gültigkeit überprüft werden.
• number: Für numerische Eingaben, die nur Zahlen akzeptieren.
• date: Für Datumsauswahl, die einen Kalender öffnet.
• color: Für Farbauswahl, die eine Farbpalette anzeigt.

Verwendung von semantischen Eingabetypen

Die Auswahl semantischer Eingabetypen ist für die Barrierefreiheit von entscheidender Bedeutung. Semantische Typen geben Screenreadern und anderen assistierenden Technologien Hinweise auf die Art der Eingaben, was die Zugänglichkeit für Menschen mit Behinderungen verbessert.

Vorteile der Verwendung des Typattributs

Die Verwendung des type-Attributs bietet zahlreiche Vorteile:

• Validierung: Es hilft bei der Validierung von Eingaben, indem es sicherstellt, dass nur die erwarteten Datentypen eingegeben werden.
• Benutzerfreundlichkeit: Es verbessert die Benutzerfreundlichkeit, indem es die Art der akzeptierten Eingaben klar macht.
• Zugänglichkeit: Es trägt zur Zugänglichkeit von Formularen bei, insbesondere für Benutzer mit assistierenden Technologien.
• Konsistenz: Es sorgt für Konsistenz über verschiedene Browser hinweg und stellt sicher, dass Formulare auf allen Geräten korrekt angezeigt werden.

Festlegen von Platzhaltertext

Was ist Platzhaltertext?

Platzhaltertext ist ein Beispieltext, der in einem Eingabefeld angezeigt wird, bevor du etwas eingibst. Er dient als Hinweis darauf, welche Art von Informationen in das Feld eingegeben werden sollen. Beispielsweise könnte ein Eingabefeld für den Vornamen den Platzhaltertext "Geben Sie hier Ihren Vornamen ein".

Verwendung des Attributs placeholder

Um Platzhaltertext in einem Eingabefeld festzulegen, verwende das Attribut placeholder. Der Wert des Attributs sollte die Zeichenfolge sein, die als Platzhaltertext angezeigt werden soll.

Beispiel:

<input type="text" placeholder="Geben Sie hier Ihren Vornamen ein">

Vorteile von Platzhaltertext

Platzhaltertext bietet mehrere Vorteile:

• Er hilft Benutzern zu verstehen, welche Art von Informationen in ein Feld eingegeben werden sollen.
• Er erleichtert das Ausfüllen von Formularen, indem er Hinweise gibt.
• Er verbessert die Benutzerfreundlichkeit und macht dein Formular zugänglicher.

Best Practices für Platzhaltertext

• Verwende prägnanten und aussagekräftigen Platzhaltertext.
• Vermeide es, den Platzhaltertext als Label zu verwenden. Verwende stattdessen einen separaten <label>-Tag.
• Stelle sicher, dass der Platzhaltertext für die Zielgruppe relevant ist.
• Verwende Kontrastfarben, um sicherzustellen, dass der Platzhaltertext leicht lesbar ist.

Weitere Überlegungen

• Einige Browser unterstützen das Attribut placeholder nicht. In diesem Fall kannst du JavaScript verwenden, um einen Polyfill zu erstellen.
• Das Attribut placeholder funktioniert nicht mit allen Eingabefeldtypen. Es funktioniert beispielsweise nicht mit dem Eingabefeldtyp submit.

Aktivierung/Deaktivierung von Eingabefeldern

Eingabefelder können deaktiviert oder aktiviert werden, um die Benutzerinteraktion mit dem Formular zu steuern. Dies kann aus verschiedenen Gründen erforderlich sein, etwa zur Validierung von Eingaben, zur Verhinderung von Änderungen oder zur Barrierefreiheit.

Deaktivieren von Eingabefeldern

Um ein Eingabefeld zu deaktivieren, verwende das Attribut disabled. Dieses Attribut hat keinen Wert und funktioniert wie ein Boolescher Schalter. Wenn es vorhanden ist, ist das Eingabefeld deaktiviert.

Beispiel:

<input type="text" name="name" disabled>

Aktivieren von Eingabefeldern

Um ein deaktiviertes Eingabefeld zu aktivieren, entferne einfach das Attribut disabled.

Beispiel:

<input type="text" name="name">

Verwendungszweck

Die Deaktivierung von Eingabefeldern ist in folgenden Szenarien hilfreich:

• Validierung: Deaktiviere Eingabefelder, nachdem die Eingaben validiert wurden, um weitere Änderungen zu verhindern.
• Benutzererfahrung: Deaktiviere Eingabefelder, die für bestimmte Benutzer nicht relevant sind oder die nicht bearbeitet werden sollen.
• Barrierefreiheit: Deaktiviere Eingabefelder, die für Benutzer mit Behinderungen nicht zugänglich sind.

Validierung von Eingaben

Eingaben zu validieren ist entscheidend, um sicherzustellen, dass Nutzerinnen korrekte Daten in Formulare eingeben. HTML bietet verschiedene Attribute, die du nutzen kannst, um die Eingaben deiner Nutzerinnen zu validieren.

### required Attribut

Das required Attribut weist den Browser an, dass ein Feld vor dem Absenden des Formulars ausgefüllt werden muss. Wenn das Feld leer bleibt, wird der Nutzer oder die Nutzerin aufgefordert, einen Wert einzugeben.

### pattern Attribut

Das pattern Attribut ermöglicht es dir, ein reguläres Ausdruck zu definieren, der die zulässigen Eingaben für ein Feld bestimmt. Dies ist nützlich zur Validierung von Feldern wie E-Mail-Adressen, Telefonnummern oder Postleitzahlen.

### minlength und maxlength Attribute

Die Attribute minlength und maxlength begrenzen die Anzahl der Zeichen, die in ein Feld eingegeben werden können. Dies kann genutzt werden, um zu verhindern, dass Nutzer*innen zu lange oder zu kurze Eingaben machen.

### min und max Attribute

Die Attribute min und max ermöglichen es dir, den zulässigen Wertebereich für numerische Eingaben festzulegen. Dies ist nützlich, um zu verhindern, dass Nutzer*innen unrealistische oder ungültige Werte eingeben.

### step Attribut

Das step Attribut definiert den Schrittwert für numerische Eingaben. Dies ist nützlich, um Eingaben auf bestimmte Intervalle zu beschränken, wie z. B. auf 1er-Schritte oder 0,1er-Schritte.

### list Attribut

Das list Attribut verknüpft ein Eingabefeld mit einer datalist, die eine Liste möglicher Optionen enthält. Dies bietet den Nutzer*innen eine automatische Vervollständigung und hilft, Tippfehler zu reduzieren.

Automatisierte Formatierung

Die automatisierte Formatierung in HTML-Eingabefeldern erleichtert dir die standardmäßige Formatierung von Eingabedaten, wodurch die Genauigkeit und Konsistenz deiner Daten verbessert wird. Hier sind einige wichtige Attribute:

pattern-Attribut

Mit dem pattern-Attribut kannst du ein reguläres Ausdrucksmuster angeben, das die eingegebenen Daten validieren soll. Dies ist nützlich, um sicherzustellen, dass Eingaben einem bestimmten Format entsprechen, wie z. B. einer E-Mail-Adresse oder einer Telefonnummer.

placeholder-Attribut

Das placeholder-Attribut fügt einen Platzhaltertext in das Eingabefeld ein, der einen Hinweis darauf gibt, welche Art von Daten eingegeben werden sollen. Dieser Text wird angezeigt, wenn das Feld leer ist, und verschwindet, sobald du mit der Eingabe beginnst.

autocomplete-Attribut

Das autocomplete-Attribut steuert, ob der Browser automatisch Daten in das Eingabefeld ausfüllen soll. Du kannst spezifische Werte angeben, wie z. B. "name" oder "email", um anzugeben, welche Daten ausgefüllt werden sollen, oder "off", um die automatische Vervollständigung zu deaktivieren.

Technologien zur automatisierten Formatierung

Es gibt verschiedene Technologien und Tools, die erweiterte Funktionen zur automatisierten Formatierung bieten:

• jQuery Mask Plugin: Bietet eine benutzerdefinierte Formatierung mit Masken für verschiedene Datentypen wie Telefonnummern, Kreditkartennummern und Währungen.

• Inputmask.js: Eine weitere beliebte Bibliothek zur Maskierung und Validierung von Eingaben mit Unterstützung für verschiedene Formate.

• Formatter.js: Eine Bibliothek zur Formatierung von Eingaben, einschließlich Datum, Uhrzeit, Zahlen und Währungen, mit Unterstützung für verschiedene Lokalisierungen.

Barrierefreiheitserwägungen

Bei der Verwendung von Eingabeattributen ist es wichtig, Barrierefreiheitserwägungen zu berücksichtigen, um sicherzustellen, dass deine Formulare für alle Benutzer zugänglich sind. Dies umfasst Personen mit Behinderungen wie Sehbehinderungen oder motorischen Einschränkungen.

Verwendung von ARIA-Attributen

ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, die Entwicklern dabei helfen, die Zugänglichkeit von Webinhalten für assistive Technologien wie Bildschirmlesegeräte zu verbessern. Bei Eingabefeldern sind die folgenden ARIA-Attribute besonders relevant:

• aria-label: Beschreibt den Zweck eines Eingabefelds für Bildschirmlesegeräte.
• aria-labelledby: Verknüpft ein Eingabefeld mit einem sichtbaren Bezeichnungstext, wenn kein label-Element verwendet wird.
• aria-required: Gibt an, ob ein Eingabefeld ein Pflichtfeld ist.

Bereitstellung visueller Hinweise

Stelle sicher, dass deine Eingabefelder visuell unterscheidbar sind, auch wenn sie keinen Fokus haben. Dies kann durch die Verwendung von Farbe, Rahmen oder anderen visuellen Elementen erreicht werden.

Umgang mit Fokussierbarkeit

Vergewissere dich, dass alle Eingabefelder mit der Tastatur fokussierbar sind. Dies ermöglicht Benutzern mit motorischen Einschränkungen, das Formular zu navigieren. Vermeide es, Eingabefelder zu deaktivieren, es sei denn, es ist unbedingt erforderlich.

Alternative Textformate

Denke daran, alternative Textformate für Benutzer bereitzustellen, die Schwierigkeiten haben, Text auf dem Bildschirm zu lesen. Dies kann durch die Verwendung von Audiobeschreibungen oder Brailleschrift erreicht werden.

Unterstützung assistierter Eingabegeräte

Stelle sicher, dass deine Formulare mit assistierten Eingabegeräten wie Sprach- oder Kopfsteuerung kompatibel sind. Dadurch wird Benutzern mit Mobilitätseinschränkungen die Interaktion mit dem Formular erleichtert.

Testen und Evaluierung

Es ist wichtig, die Barrierefreiheit deiner Formulare regelmäßig zu testen und zu bewerten. Dies kann durch die Verwendung von Tools wie Web Accessibility Evaluators oder durch manuelle Tests mit assistierenden Technologien erfolgen.

Erweitertes Attribut: readonly

Das Attribut readonly ist ein erweitertes Attribut, das Eingaben in bestimmten Feldern verhindert. Es wird verwendet, um bestimmte Felder zu schützen, die nicht verändert werden sollen, oder um dem Benutzer den aktuellen Stand anzuzeigen.

Wann solltest du das readonly-Attribut verwenden?

• Schutz wichtiger Daten: Verwende readonly, um Felder zu schützen, die kritische Informationen enthalten, wie z. B. Personalausweisnummern oder Kontostände.
• Anzeige von Bestandsdaten: Wenn du Daten aus einer Datenbank anzeigst, wie z. B. Kundendaten oder Bestelldetails, solltest du readonly verwenden, damit der Benutzer die Daten nicht bearbeiten kann.
• Reduzierung von Fehlern: Indem du bestimmte Felder als schreibgeschützt festlegst, kannst du Eingabefehler reduzieren.

Auswirkungen des readonly-Attributs

Wenn du das Attribut readonly auf ein Eingabefeld anwendest, hat dies folgende Auswirkungen:

• Deaktivierung der Eingabe: Benutzer können keine Daten in das Feld eingeben.
• Graue Hintergrundfarbe: Das Feld erscheint in der Regel grau hinterlegt, um anzuzeigen, dass es schreibgeschützt ist.
• Keine Auswahl aus Dropdown-Menüs: Dropdown-Menüs werden im schreibgeschützten Modus deaktiviert.

Beispiele für die Verwendung des readonly-Attributs

Hier sind einige Beispiele für die Verwendung des readonly-Attributs:

• Schutz von Kreditkartennummern: <input type="text" name="card_number" readonly>
• Anzeige von Bestelldaten: <input type="text" name="order_details" readonly>
• Verhinderung von Änderungen in Statusfeldern: <input type="text" name="status" value="Ausstehend" readonly>

Barrierefreiheitserwägungen

Denke daran, dass das readonly-Attribut für Benutzer mit Screenreadern nicht immer zugänglich ist. Stelle sicher, dass du zusätzliche Maßnahmen ergreifst, um sicherzustellen, dass diese Benutzer die Informationen auch ohne die Möglichkeit zur Eingabe erhalten können.