HTML - Eingabeattribute

type

Das type-Attribut legt den Typ des Eingabeelements fest, wie Text, Passwort, Checkbox, Radio und mehr. Es bestimmt das Aussehen und Verhalten des Eingabefelds. Die Einstellung

<input type="password">

verdeckt die vom Benutzer eingegebenen Zeichen, während

<input type="checkbox">

eine Checkbox erstellt, die an- oder abgewählt werden kann.

name

Das name-Attribut gibt dem Eingabeelement einen Namen. Es wird verwendet, um das Element beim Senden der Formulardaten an den Server zu identifizieren. Das Name-Attribut ist wichtig für die serverseitige Verarbeitung und Datenhandhabung. Es ermöglicht den Zugriff auf den Wert des Eingabefelds unter Verwendung des Namens als Referenz.

value

Das value-Attribut legt den Anfangswert des Eingabeelements fest. Es kann mit einem Standardwert vorausgefüllt oder leer gelassen werden, damit der Benutzer einen Wert eingeben kann.

<input type="text" value="Max Mustermann">

würde das Texteingabefeld mit dem Wert "Max Mustermann" vorausfüllen. Das Value-Attribut wird auch verwendet, um den Wert von Radiobuttons und Checkboxen festzulegen.

placeholder

Das placeholder-Attribut bietet einen Hinweis oder Beispieltext im Eingabefeld. Es wird angezeigt, wenn das Eingabefeld leer ist, und verschwindet, sobald der Benutzer mit der Eingabe beginnt. Platzhalter helfen Benutzern zu verstehen, welche Art von Information im Eingabefeld erwartet wird.

<input type="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein">

würde "Geben Sie Ihre E-Mail-Adresse ein" als Platzhaltertext anzeigen.

required

Das required-Attribut gibt an, dass das Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet werden kann. Wenn der Benutzer versucht, das Formular zu senden, ohne einen Wert in ein Pflichtfeld einzugeben, zeigt der Browser eine Fehlermeldung an und verhindert das Absenden des Formulars. Dieses Attribut hilft bei der Überprüfung der Benutzereingabe und stellt sicher, dass erforderliche Informationen bereitgestellt werden.

readonly

Das readonly-Attribut macht das Eingabefeld schreibgeschützt und verhindert, dass der Benutzer seinen Wert ändert. Der Wert kann jedoch weiterhin ausgewählt und kopiert werden. Schreibgeschützte Felder sind nützlich, um vorausgefüllte oder berechnete Werte anzuzeigen, die vom Benutzer nicht geändert werden sollen. Die Formulardaten von schreibgeschützten Feldern werden beim Absenden des Formulars trotzdem mitgesendet.

disabled

Das disabled-Attribut deaktiviert das Eingabeelement, sodass es nicht angeklickt oder bearbeitet werden kann. Deaktivierte Felder werden grau dargestellt und reagieren nicht auf Benutzerinteraktionen. Sie werden nicht als Teil der Formulardaten gesendet. Deaktivierte Felder werden häufig verwendet, wenn bestimmte Eingabefelder nicht zutreffend sind oder basierend auf anderen Bedingungen nicht geändert werden sollen.

min und max

Die Attribute min und max legen die minimal und maximal erlaubten Werte für numerische Eingabefelder fest, wie z.B. number, range und date. Diese Attribute helfen zu überprüfen, ob der vom Benutzer eingegebene Wert innerhalb eines festgelegten Bereichs liegt.

<input type="number" min="0" max="100">

minlength und maxlength

Die Attribute minlength und maxlength legen die minimal und maximal erlaubte Länge für Text-Eingabefelder fest, wie z.B. text, email und password. Diese Attribute begrenzen die Anzahl der Zeichen, die in das Eingabefeld eingegeben werden können.

<input type="password" minlength="8" maxlength="20">

pattern

Das Attribut pattern legt ein reguläres Ausdrucksmuster fest, dem der Eingabewert entsprechen muss. Es wird verwendet, um das Format der eingegebenen Daten zu überprüfen, wie z.B. E-Mail-Adressen, Telefonnummern oder bestimmte Muster. Das Muster wird mit der Syntax regulärer Ausdrücke festgelegt.

<input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}">

step

Das Attribut step legt die Schrittweite für numerische Eingabefelder fest, wenn Pfeiltasten oder Spinner verwendet werden. Es bestimmt die Granularität der erlaubten Werte.

<input type="number" step="0.1">

Diese Validierungsattribute bieten eine Möglichkeit, Benutzereingaben clientseitig zu überprüfen und zu begrenzen, bevor das Formular abgesendet wird. Sie helfen, die Datenintegrität zu wahren, die serverseitige Validierung zu reduzieren und dem Benutzer sofortiges Feedback zu geben. Durch die Verwendung dieser Attribute können Sie robustere und benutzerfreundlichere Formulare erstellen, die Benutzer zur Eingabe gültiger und erwarteter Daten anleiten.

autocomplete

Das autocomplete-Attribut legt fest, ob der Browser das Eingabefeld basierend auf früheren Werten des Benutzers ausfüllen soll. Es hilft Benutzern, Formulare schneller und genauer auszufüllen, insbesondere bei häufigen Informationen wie Namen, E-Mail-Adressen und Lieferadressen.

<input type="email" autocomplete="on">

Durch die Einstellung autocomplete="on" wird die Autovervollständigungsfunktion des Browsers für das Eingabefeld aktiviert. Der Browser schlägt frühere Werte vor, die zum Eingabetyp und Namen passen. Benutzer können aus den Vorschlägen auswählen, was Zeit spart und Tippfehler reduziert.

autofocus

Das autofocus-Attribut setzt den Fokus auf das Eingabefeld, wenn die Seite geladen wird. Es lenkt die Aufmerksamkeit des Benutzers auf ein bestimmtes Feld und macht es bereit für die Eingabe. Nur ein Formularelement pro Seite kann das autofocus-Attribut haben.

<input type="text" autofocus>

Wenn die Seite geladen wird, wird der Cursor in das Eingabefeld mit dem autofocus-Attribut gesetzt. Dies ist nützlich für Formulare, bei denen das Haupteingabefeld im Voraus bekannt ist, wie zum Beispiel bei Suchleisten oder Anmeldeformularen.

aria-label und aria-labelledby

Die Attribute aria-label und aria-labelledby bieten barrierefreie Beschriftungen für Eingabeelemente. Sie verbessern die Zugänglichkeit für Benutzer mit Hilfstechnologien wie Screenreadern.

Das aria-label-Attribut ermöglicht es, eine Textbeschriftung für das Eingabefeld anzugeben, die von Hilfstechnologien vorgelesen wird. Es ist nützlich, wenn die visuelle Beschriftung nicht ausreicht oder wenn es keine sichtbare Beschriftung für das Eingabefeld gibt.

<input type="text" aria-label="Suche">

In diesem Beispiel lesen Hilfstechnologien "Suche" als Beschriftung für das Eingabefeld vor, auch wenn auf der Seite keine sichtbare Beschriftung vorhanden ist.

Das aria-labelledby-Attribut hingegen ermöglicht es, das Eingabefeld mit einem vorhandenen Element auf der Seite zu verknüpfen, das als Beschriftung dient. Der Wert von aria-labelledby sollte die ID des beschriftenden Elements sein.

<label id="name-label">Name:</label>
<input type="text" aria-labelledby="name-label">

In diesem Fall verwenden Hilfstechnologien den Textinhalt des Elements mit der ID "name-label" als Beschriftung für das Eingabefeld.

Durch die Verwendung dieser Barrierefreiheit-Attribute können Sie Ihre Formulare inklusiver und benutzerfreundlicher für Menschen mit Behinderungen gestalten. Sie bieten zusätzlichen Kontext und Informationen für Hilfstechnologien und helfen Benutzern, den Zweck und die erwartete Eingabe jedes Formularfelds zu verstehen.

size

Das size-Attribut legt die sichtbare Breite des Eingabeelements in Zeichen fest. Es ändert die Größe des Eingabefelds, ohne die tatsächliche Länge des eingebbaren Werts zu ändern. Das size-Attribut wird verwendet, um die physische Größe des Eingabefelds festzulegen und es basierend auf der angegebenen Zeichenanzahl größer oder kleiner zu machen.

<input type="text" size="40">

Das Texteingabefeld wird mit einer Breite angezeigt, die etwa 40 Zeichen aufnehmen kann. Benutzer können jedoch mehr Zeichen als die angegebene Größe eingeben, und das Eingabefeld scrollt horizontal, um den zusätzlichen Inhalt anzuzeigen.

Das size-Attribut begrenzt nicht die Anzahl der Zeichen, die in das Eingabefeld eingegeben werden können. Es steuert nur die visuelle Breite des Feldes. Um die Länge des eingegebenen Werts zu begrenzen, sollten Sie stattdessen das maxlength-Attribut verwenden.

width und height

Mit den Attributen width und height können Sie die Breite und Höhe des Eingabeelements mithilfe von CSS-Einheiten festlegen. Diese Attribute geben Ihnen mehr Kontrolle über die Größe und das Layout der Eingabefelder in Ihrem Formular.

<input type="text" style="width: 200px; height: 30px;">

Das Texteingabefeld wird eine Breite von 200 Pixeln und eine Höhe von 30 Pixeln haben. Sie können verschiedene CSS-Einheiten wie Pixel (px), Prozent (%) oder ems (em) verwenden, um die gewünschten Größen festzulegen.

Mit den Attributen width und height können Sie Eingabefelder mit benutzerdefinierten Größen erstellen, die gut in Ihr Formular-Layout passen. Dies ist nützlich, wenn Sie spezielle Designanforderungen haben oder die Eingabefelder mit anderen Elementen auf der Seite ausrichten möchten.

Die Attribute width und height sollten mit dem style-Attribut oder einer externen CSS-Datei verwendet werden, um die gewünschten Größen anzuwenden. Das style-Attribut ermöglicht es Ihnen, Inline-CSS-Stile direkt auf das Eingabeelement anzuwenden.

style

Das style-Attribut ermöglicht es Ihnen, Inline-CSS-Stile auf das Eingabeelement anzuwenden. Es bietet Flexibilität bei der Anpassung des Aussehens von Eingabefeldern über die grundlegenden Attribute hinaus.

Mit dem style-Attribut können Sie verschiedene CSS-Eigenschaften festlegen, um die visuelle Gestaltung des Eingabefelds zu steuern. Dazu gehören Eigenschaften wie Farben, Schriftarten, Rahmen, Innenabstände und mehr.

<input type="text" style="border: 2px solid blue; padding: 5px; font-size: 16px; color: #333;">

Das Texteingabefeld wird einen 2 Pixel breiten blauen Rahmen, 5 Pixel Innenabstand, eine Schriftgröße von 16 Pixeln und eine Textfarbe von #333 (dunkelgrau) haben. Sie können mehrere CSS-Eigenschaften innerhalb des style-Attributs hinzufügen und sie durch Semikolons trennen.

Die Verwendung des style-Attributs gibt Ihnen große Kontrolle über die visuelle Darstellung Ihrer Eingabefelder. Sie können die Gestaltung der Eingabefelder an das Gesamtdesign Ihrer Webseite anpassen und so eine zusammenhängende und optisch ansprechende Benutzeroberfläche schaffen.

Es wird jedoch generell empfohlen, externe CSS-Dateien oder <style>-Tags im <head>-Bereich Ihres HTML-Dokuments zu verwenden, um Stile auf Ihre Eingabefelder anzuwenden. Dieser Ansatz trennt die Darstellung von der Struktur und macht Ihren Code einfacher zu warten und wiederzuverwenden.

Durch die Verwendung dieser Styling-Attribute können Sie das visuelle Erscheinungsbild Ihrer Eingabefelder verbessern und sie attraktiver und benutzerfreundlicher gestalten. Sie können die Größe, Abmessungen anpassen oder benutzerdefinierte Stile anwenden, um gut gestaltete Formulare zu erstellen.