HTML5 Formulare: 4.2 Einzeilige Eingabefelder
Einzeilige Formularfelder bieten Ihnen die Möglichkeit mit dem User zu kommunizieren. Achten Sie dabei stets auf einen sinnvollen Einsatz von Formularen und nutzen Sie die passenden Elemente und Attribute!4.2.1 Anwendung
Mit einzeiligen Eingabefeldern können krurze Informationen, in Form von Freitexten, vom Nutzer abgefragt werden.
Die Möglichkeit von Fehleinträgen, sowie die mißbräuchliche Verwendung durch die Eingabe von HTML und JavaScript - Code ist zu bedenken!
4.2.2 Syntax
Einzeilige Formularfelder werden mit dem Standalone-Tag <input>
realisiert. Da wir uns bereits im Vorfeld mit
dem Aufbau von Formularen beschäftigt haben, beginnen wir gleich mit einem etwas komplexeren Beispiel. Die einzelnen Elemente und
Attribute werden anschließend besprochen.
Sehen Sie sich das folgende Listing etwas genauer an. Versuchen Sie die genutzten Attribute zu verstehen und achten Sie auf
den unterschiedlichen Gebrauch des label
Attributs und auf die Auswirkungen des value
bzw.
des placeholder
Attributs.
Schicken Sie dazu doch einfach einmal das Formular ab und interpretieren die vom Server empfangenden Daten.
4.2.3 Attribute
Die folgenden Attribute können angewendet werden ...
Mögliche Werte | Beschreibung |
---|---|
name: | Angabe vom Bezeichnernamen |
type: | Bestimmt den Feldtypen |
size: | Länge des Eingabefeldes |
maxlegth: | Maximale Anzahl der eintragbaren Zeichen |
value: | Vorbelegung für ein Eingabefeld |
placeholder: | Hinweis im Eingabefeld |
checked: | Vorbelegung für bestimmte Eingabefelder |
required: | Angabe von Pflichtfeldern |
pattern: | Stellt eine Anforderung an die eingegebenen Daten |
title: | Für zusätzliche Informationen an den Nutzer |
autofocus: | Fokus beim Laden der Seite setzen |
spellcheck: | Rechtschreibprüfung ein- / ausschalten |
autocapitalize: | Für iOS |
autocorrectur: | Für iOS |
Beschreibung der Attribute und deren Werte ...
- <name>
-
Bezeichnername, zusammen mit dem Wert des
value
Attributs, bzw. mit der Texteingabe im Formularfeld kann so ein Name-Wert-Paar an den Server übermittelt werden. - <type>
-
Dient der Defenition des Feldtyps.
Mögliche Feldtypen
text
Dient der Eingabe von Text. Stellt ein einzeiliges Formularfeld zur Verfügung.
number
Zur Eingabe von nummerischen Werten. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur.
tel
Zur Eingabe einer Telefonnummer. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur.
url
Zur Eingabe einer Internetadresse. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur.
date
Zur Eingabe eines Datums. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur.
time
Zur Eingabe einer Zeitangabe. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur.
email
Zur Eingabe einer E-Mail Adresse. Sorgt bei der Verwendung von mobilen Geräten zur Bereitstellung einer angepassten Tastatur. Praktisch ist auch das die Autovervollständigung angepasst wird!
password
Stellt eine verdeckte Eingabe zur Verfügung. Die Übertragung erfolgt allerdings im Klartext!
range
Stellt einen Schieberegler bereit. Der Schieberegler kann vom Nutzer bedient und zur Auswahl einer Zahl genutzt werden.
submit
Stellt einen Button zur Verfügung. Durch Aktivierung werden die Formularinhalte, an die im
action
Attribut des<form>
Elements angegebene Datei gesendet.Der folgende
submit
Button wurde mit demdisabled
Attribut deaktiviert!reset
Stellt einen Butten zur Verfügung. Durch Aktivierung werden die Eingabefelder in den Ausgangszustand versetzt.
Der folgende
reset
Button wurde mit demdisabled
Attribut deaktiviert!color
Zur Auswahl einer Farbe. Durch den Browser wird ein Auswahlfeld bereitgestellt.
Weitere
<input>
Feldtypen werden später beschrieben (Siehe auch: Checkboxen und Radiobutton)! - <size>
-
Bestimmt die Länge des Formularfelds. Die nummerische Angabe des Wertes ist dabei die Anzahl der Breite in Textzeichen.
- <maxlength>
-
Bestimmt die maximale Länge der eintragbaren Zeichen. Ist die Angabe größer als die Angabe im size Attribut wird automatisch gescrollt.
- <value>
-
Vorbelegung für ein Formularfeld. Wenn der Nutzer Nichts Neues in das Eingabefeld einträgt, wird diese Angabe als Wert dem
name
> Attribut zugeordnet und beim Absenden des Formulars an den Server übertragen. - <placeholder>
-
Zeigt einen Hinweis auf dem Eingabefeld an. Sobald ein Zeichen in diesem Feld eingegeben wird, verschwindet der Hinweis. Bei einem -durch den Nutzer- unausgefüllten Feld wird dieser Wert nicht an den Server übertragen.
- <checked>
-
Vorbelegung für bestimmte Eingabefelder. Nährere Informiation finden Sie ...
- <required>
-
Besitzt ein Eingabefeld dieses Attribut, so handelt es sich um ein sog. Pflichtfeld. Dieses Feld muss vor der Übertragung an den Server ausgefüllt werden. Der Browser reagiert entsprechend beim Versuch das Formular unausgefüllt zu versenden.
Einfache Syntax
Zusätzlich zum
required
Attribut kann zur Validierung daspattern
und dastitle
Attribut genutzt werden, um eine bestimmte Eingabeform zu erzwingen.Sehen Sie sich das folgende Listing etwas genauer an. Testen Sie die Auswirkungen der Attribute (
required
,pattern
,title
) in dem Sie die folgenden Formulare mit diversen Daten füllen und absenden! Beobachten Sie das Zusammenspiel der Attribute!
Erweitertes Beispiel
Solange das Pflichtfeld nicht ausgefüllt ist, wird das Formular nicht übertragen!
- <pattern>
-
Mit Hilfe des
pattern
Attributs kann eine bestimmte Anforderung an die eingegebenen Daten gestellt werden. Solange die Anforderung nicht erfüllt ist, wird das Formular nicht abgesendet!
Beachte: Mögliche Typen für einen Vergleich mit dem
pattern
Attribut sind:- type="text"
- type="search"
- type="url"
- type="tel"
- type="email"
- type="password"
Solange die Anforderung nicht erfüllt ist, wird das Formular nicht abgesendet! Durch
pattern="[0-9]{6}"
werden 6 Ziffern zwischen 0 und 9 erwartet!Erwartete Eigabe Code Zahlen pattern="[0-9]{6}"
Text (8 Zeichen) nur Großbuchstaben pattern="[A-Z]{8}"
Text (min. 8 Zeichen) mit Groß- oder Kleinbuchstaben pattern="[A-z]{8,}"
Sonderzeichen (8 Zeichen) pattern="[\W]{8}"
Text (min. 8 Zeichen) mit Groß-, Kleinbuchstaben und Sonderzeichen pattern="(?=.{8,}$)(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).*"
Wie Sie an dieser kurzen Übersicht bereits erkennen, gibt es eine Vielzahl an Kombinationsmöglichkeiten. Vor dem Einsatz sollten Sie sich genaustens über die richtige Verwendung informieren. Anschließend müssen Sie die Funktion überprüfen. Wenn eine Anforderung nicht zu erfüllen ist, ist es für den Nutzer schlichtweg unmöglich das Formular auszufüllen!
Wenn Sie im
type
Attribut den entsprechenden Feldtypen (z.B.email
) nutzen, dann benötigen Sie daspattern
Attribut nicht. - <title>
-
Mit dem
title
Attribut kann ein zusätzlicher Informationstext zum Ausfüllen des Feldes notiert werden. - <autofocus>
-
Beim Laden der Seite wird der Fokus automatisch auf dieses Feld gesetzt. (Ist in diesem Beispiel nicht umgesetz!)
- <spellcheck>
-
Unterdrückt die Autokorrektur bei der Eingabe. Nützlich zum Beispiel bei der Eingabe von Namen.
- <autocapitalize>
-
Unterdrückt auf iOS Geräten die Umschalttaste.
- <autocorrectur>
-
Wieder für iOS Geräte, unterdrückt hier die Autokorrektur.