Werner-Zenk.de - Zur Startseite

FormulareButtons ❘ Eingabefelder ❘ TextberreicheAuswahllisten

Einzeilige Eingabefelder sind vordefinierte Felder, in denen einige kurze Worte oder Zahlen durch den Benutzer der HTML-Seite eingegeben werden können. Mit <input> wird ein einzeiliges Eingabefeld definiert.

Damit klar ist, in welches Feld etwas geschrieben wird, muß dem Eingabefeld ein eindeutiger Name mit dem Attribut name="" zugeordnet werden. Der Name darf nur einmal im Formular definiert werden, sollte nicht zu lang sein und darf keine Leerzeichen oder deutschen Umlaute (wie ä, ü oder ö) enthalten.

Auf dieser Seite finden Sie Eingabefelder vom Typ: Text, Password, Hidden und File

Eingabefeld-Typ: Text

<input type="text">

Attribute

size - Anzeigelänge in Zeichen.

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

Hinweis: Mit CSS können Sie die Breite des Eingabefeldes genauer anpassen.

maxlength - Angabe der Zeichen die maximal eingegeben werden können.

<input type="text" maxlength="5">

name - Bezeichnername.

<input type="text" name="wohnort">
Mit diesem Attribut lässt sich über JavaScript und PHP auf die eingetragenen Angaben zugreifen.
Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten.

value - Textvorbelegung.

<input type="text" value="Wohnort">


Sie können ein einzeiliges Eingabefeld mit einem Inhalt vorbelegen.

id - Ein dateiweit eindeutiger Bezeichnername für ein Element.

<input type="text" id="abc">
Mit diesem Attribut lässt sich über JavaScript auf die eingetragenen Angaben zugreifen. Außerdem kann über CSS das Eingabefeld formatiert werden und mit dem <label>-Tag kann eine Verbindung zum Eingabefeld hergestellt werden.

Beispiel:
<label for="name"> Name </label>
 <input type="text" id="name">

class - Ein Bezeichnername für ein Stylesheet-Klassen-Element.

<input type="text" class="xyz">
Mit diesem Attribut kann über CSS das Eingabefeld formatiert werden.

readonly - Eingabefelder auf "nur lesen" setzen.

<input type="text" readonly="readonly" value="Hallo Welt">

disabled - Eingabefelder nicht kopierbar und nicht änderbar.

<input type="text" disabled="disabled" value="Hallo Welt">

onclick, onblur - JavaScript-Event-Handler ("Ereignis-Behandler")
Liste der Event-Handler (unvollständig): onclick, ondblclick, onkeydown, onkeyup, onmouseover,
onmouseout, onfocus, onblur, oninput, onselect, onchange,

Mit diesen Attributen wird eine JavaScript-Funktion (Befehl) ausgeführt.
Beispielsweise wenn der Benutzer auf das Eingabefeld klickt (onclick):

<input type="text" value="Hallo Welt!" onclick="alert(this.value);">

placeholder - Platzhalter für den einzugebenden Text (Hinweise, etc.) - HTML 5 Attribut.
Das placeholder-Attribut definiert eine kurze Eingabeaufforderung oder einen Beispieltext, der in einem Eingabefeld angezeigt werden soll.

<input type="text" placeholder="Ich bin ein Platzhalter">

Verwenden Sie das Platzhalter-Attribut placeholder nicht statt eines <label>-Elements. Ihre Zwecke sind unterschiedlich: das <label>-Element beschreibt die Rolle des Form-Elements; Das heißt, es gibt an, welche Art von Informationen erwartet wird, das Platzhalter-Attribut ist ein Hinweis wie das Format des Inhalts sein sollte.

list - Liste von Vorschlägen anzeigen - HTML 5 Attribut.
Je nach verwendeten Browser, wird die Liste angezeigt wenn das Eingabefeld den Fokus erhält oder nach nochmaligen klicken des Benutzers mit dem Mauszeiger (Mozilla Firefox).
Datenliste » <datalist> (Beschreibung).

<input type="text" list="Liste1">

<datalist id="Liste1">
 <option>Apfel</option>
 <option>Banane</option>
 <option>Zitrone</option>
</datalist>


Demobild (Mozilla Firefox)

required - Pflichtfeld - HTML 5 Attribut.

<input type="text" required="required">
Wenn dieses Eingabefeld leer bleibt und der Benutzer drückt den Absenden-Button (Submit), so wird dies durch den Browser verhindert. Demobilder wie es in den diversen Browsern dargestellt wird:

Mozilla Firefox (18) Internet Explorer (10) Google Chrome / Opera (15)

spellcheck - Rechtschreibprüfung (true/false) - HTML 5 Attribut.

<input type="text" spellcheck="true" value="rechtschreibprüfung">
Fehlerhafte Texteingaben werden mit einer roten "schlängelnden" Linie markiert (Browser abhängig).

Mozilla Firefox Internet Explorer (10) Opera (12)

pattern - Benutzereingaben mit regulären Ausdrücken überprüfen - HTML 5 Attribut.
Mit dem Attribut Pattern kann dem Eingabefeld detailliert vorgeschrieben werden, welche Werte angenommen werden dürfen und welche nicht. Dieses Attribut ist für Eingabefelder verfügbar, deren Type-Attribut auf text, search, url, tel, email oder password festgelegt ist.

<input type="text" pattern="[A-Za-z]+\d+">

(Mehrere Buchstaben, gefolgt von mind. einer Zahl)

Eingabefehler werden bei einer fehlerhaften Eingabe rot markiert, mit CSS kann das angepasst werden:
<style>
input:invalid {
  color: #EE0000;
}
</style>

autofocus - Das Formularfeld erhält den Autofokus - HTML 5 Attribut.
Mit dem autofocus-Attribut können Sie Benutzer zu einem bestimmten Feld führen, indem Sie den Fokus nach dem Laden einer Webseite auf ein bestimmtes Feld oder Steuerelement lenken.

<input type="text" autofocus="autofocus">
Das autofocus-Attribut kann nur für ein Steuerelement in einem Dokument angegeben sein. Wenn mehrere Elemente dieses Attribut aufweisen, erhält beim öffnen der Seite nur das erste dieser Elemente auf der Seite den Fokus.

autocomplete - Automatische Textvorschläge ein- oder ausschalten (on/off) - HTML 5 Attribut.
Mit diesem Attribut wird verhindert, das frühere Eingaben des Benutzers ins gleiche Eingabefeld als Option (Auswahlliste) angezeigt werden.

<input type="text" autocomplete="off">

Eingabefeld-Typ: Password

Für die Eingabe von Passwörtern gibt es ein spezielles Eingabefeld. Die eingegebenen Zeichen werden dabei durch Platzhalter dargestellt.
Dieser Eingabefeld-Typ bietet nur einen Sichtschutz, sodass Personen im Raum des Benutzers nicht zufällig das eingegebene Passwort mitlesen können. Passwörter werden trotz der verdeckten Eingabe im Klartext über das Internet übertragen.

<input type="password">

Eingabefeld-Typ: Hidden

Die versteckten Eingabefelder werden dem Benutzer nicht angezeigt. Beim Absenden des Formulars werden die Daten versteckter Eingabefelder mit übertragen.

<input type="hidden" name="ich" value="nicht sichtbar">

Eingabefeld-Typ: File

Feld für den Datei-Upload definieren.

<input type="file">

Das Vorgeben eines bestimmten Verzeichnisses oder vollständigen Pfades ist beim Eingabefeld-Typ: File unterbunden, sei es als Angabe value="path/to/file" oder per JavaScript. Auch das gestalten per CSS ist für diesen Eingabefeld-Typ nicht so einfach (erzeugt unzufriedene Ergebnisse).

Attribute

name - Bezeichnername.

<input type="file" name="datei">
Mit diesem Attribut lässt sich über PHP auf die eingetragenen Angaben zugreifen.
Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute, Sonderzeichen etc. enthalten.

size - Anzeigelänge in Zeichen.

<input type="file" size="45">

value - Textvorbelegung.
Dieses Attribut wird aus Sicherheitsgründen von keinem Browser unterstützt.

disabled - Eingabefeld nicht kopierbar und nicht änderbar.

<input type="file" disabled="disabled">

accept - Bestimmte Dateitypen zulassen.

<input type="file" accept="*.html,*.htm, *.txt">
Bei diesem Attribut gibt es keinen Browser der die Auswahl des Benutzers in irgendeiner Form kontrolliert.

multiple - Der Benutzer kann mehrere Dateien zum hochladen auswählen - HTML 5 Attribut.

<input type="file" multiple="multiple">

Tipp

Formular Generator - In nur 3 Schritten zum fertigen Formular
Das erstellte PHP-Formular ist universell einsetzbar, die Daten können zum Beispiel als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden. Der Formular Generator erzeugt nach Ihren Einstellungen ein individuelles und valides Formular.