HTML Text Input Generator
Mit diesem Generator erzeugst du ein einzeiliges Texteingabefeld (<input type="text">) – inklusive aller HTML5-Attribute wie placeholder, maxlength, pattern oder required.
Anwendung & Beispiele
Das Text-Input ist das Standard-Eingabefeld für einzeilige Texte. Mit maxlength und minlength begrenzt du die Eingabe, mit pattern kannst du z.B. eine bestimmte Zeichenfolge per Regex erzwingen. required markiert das Feld als Pflichtfeld; das Formular lässt sich dann ohne Eingabe nicht absenden.
FAQ
Wie unterscheiden sich type="text" und type="search"?
Funktional fast identisch, semantisch verschieden. type="search" zeigt im Browser oft einen X-Button zum Leeren und auf Mobilgeräten eine "Suchen"-Tastatur. Verwende search nur für Such-Eingabefelder, sonst text.
Warum sollte ich das autocomplete-Attribut setzen?
Browser bieten Auto-Vervollständigung basierend auf vorherigen Eingaben. Mit Werten wie autocomplete="name" oder autocomplete="email" teilst du dem Browser die semantische Bedeutung mit. autocomplete="off" deaktiviert die Vervollständigung — sinnvoll bei sensiblen oder einmaligen Eingaben.
Was passiert, wenn minlength und maxlength beide gesetzt sind?
Die Eingabe muss zwischen den beiden Werten liegen, sonst zeigt der Browser eine Fehlermeldung beim Submit. Rein clientseitige Prüfung — auf dem Server immer nochmal validieren.
Was ist der Unterschied zwischen placeholder und value?
value setzt einen tatsächlichen Vorgabewert, der vom Nutzer überschrieben werden muss. placeholder ist nur ein grauer Hinweistext, der verschwindet, sobald getippt wird.
Wozu dient das pattern-Attribut?
Mit pattern hinterlegst du einen regulären Ausdruck, gegen den der eingegebene Wert geprüft wird. Beispiel: pattern="[A-Za-z]{3,}" verlangt mindestens drei Buchstaben.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.