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 Eingabefeldtypsubmit
.
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 keinlabel
-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.