Testseite für native Formular-Felder
Gerade auf Tablets und Smartphones, also Geräten ohne externe Tastatur, verhalten sich Formularelemente etwas anders oder sie lösen eine andere Aktion aus, wenn sie fokussiert werden. So variiert die Tastatur je nach input type oder das select Feld öffnet sich anders... Hier können auf einer Seite alle Varianten ausprobiert werden.
<input type="text">
Einzeiliges Eingabefeld. Auf Touch-Geräten wird eine normale Tastatur angezeigt.
<input type="text">
Einzeiliges Eingabefeld mit vorbelegtem Inhalt.
<input type="text" disabled>
Einzeiliges Eingabefeld mit vorbelegtem Inhalt.
<input type="text" readonly>
Einzeiliges Eingabefeld mit vorbelegtem Inhalt.
<input type="password">
Einzeiliges Eingabefeld. Text wird nicht ausgegeben. Auf Touch-Geräten wird eine normale Tastatur angezeigt.
<input type="password">
Einzeiliges Eingabefeld mit vorbelegtem Inhalt.
<input type="submit">
Definiert einen Button, um damit ein Formular abzusenden.
<input type="submit">
Submit Button mit vorbelegtem Inhalt.
<input type="submit" disabled>
Submit Button mit vorbelegtem Inhalt.
<input type="submit" readonly>
Submit Button mit vorbelegtem Inhalt.
<input type="button">
Definiert einen Button.
<input type="button">
Button mit vorbelegtem Inhalt.
<button>
Button.
<input type="radio">
Definiert eine Auswahlmöglichkeit einer limitierten Menge. Es kann dabei immer nur ein Wert gewählt werden.
<input type="checkbox">
Definiert eine Auswahlmöglichkeit einer limitierten Menge. Es können dabei auch mehrere Werte gewählt werden.
<input type="search">
Einzeiliges Eingabefeld. Verändert wenn unterstützt den "Button" auf Touch-Tastaturen.
<input type="search">
Einzeiliges Eingabefeld für die Suche mit vorbelegtem Inhalt.
<input type="email">
Einzeiliges Eingabefeld. Auf Touch-Geräten wird eine Tastatur angezeigt, die zur Eingabe von Email Adressen ist (z.B. @-Zeichen direkt im Zugriff).
<input type="email">
E-Mail Feld mit vorbelegtem Inhalt.
<input type="url">
Einzeiliges Eingabefeld. Auf Touch-Geräten wird eine Tastatur angezeigt, die zur Eingabe von Internet Adressen ist.
<input type="tel">
Einzeiliges Eingabefeld. Auf Touch-Geräten wird eine Tastatur angezeigt, die optimiert für Telefonnummern ist (z.B. alle Zahlen und /-Zeichen direkt im Zugriff).
<input type="number">
Einzeiliges Eingabefeld. Auf Touch-Geräten wird eine Tastatur angezeigt, die alle Zahlen direkt anzeigt.
<input type="range">
Einzeiliges Eingabefeld aus dem bei Browser-Unterstützung direkt einen Range-Slider gemacht wird.
<input type="range">
Range Eingabe mit vorbelegtem Inhalt.
<input type="range" disabled>
Range Eingabe mit vorbelegtem Inhalt und Status disabled.
<input type="range" readonly>
Range Eingabe mit vorbelegtem Inhalt und Status readonly.
<input type="date">
Einzeiliges Eingabefeld aus dem bei Browser-Unterstützung direkt ein Datepicker gemacht wird.
<input type="date">
Datumseingabe mit vorbelegtem Inhalt.