Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

HTML Befehl: <input type="text" - Einzeiliges Eingabefeld

Um in einem Formular Daten zu erfassen, benötigen wir die entsprechenden HTML-Befehle. Das am meisten genutzte Formularfeld ist das einzeilige Eingabefeld. Egal ob man nun an die Abfrage von einem Vornamen oder einer E-Mail-Adresse denkt, wir benötigen dazu ein einzeiliges Eingabefeld.

Dieses hat einen sehr einfachen Aufbau:

<input type="text">

Bisher erhalten wir auf dem Bildschirm ein Kästchen ohne Beschriftung, in dem wir Text erfassen können. ABER …

Aber wir benötigen zum Auswerten neben einer Programmiersprache wie PHP auch noch eine Verbindung zu dem Eingabefeld – sprich eine Benennung. Dies geschieht über das Attribut „name“. Dieses ist also notwendig, sonst ergibt dieser HTML-Befehl wenig Sinn. Wir fügen unser Attribut ein:

<input type="text" name="familienname">

Das Aussehen ist immer noch nicht besonders spektakulär:

Wir möchten eine Beschriftung für das Feld – dazu wird der HTML-TAG <label> genutzt:

<label for="nameFamilie">Ihr Familienname</label>
<input type="text" id="nameFamilie" name="familienname">

Mehr Informationen zu HTML-Befehl <label> gibt es im folgenden Kapitel. Nun haben wir schon ein sinnvolles Erscheinungsbild:

Das Besondere bei dem Befehl label ist, dass wir nun auf die Beschriftung „Ihr Familienname“ klicken können und der Cursor dann im Eingabefeld platziert wird.

Attribute zum einzeiligen Eingabefeld

Es gibt weitere Attribute für das einzeilige Eingabefeld

Attribut Beschreibung
size= die dargestellte Länge des Feldes (es können mehr Zeichen eingegeben werden als diese Länge!)
maxlength= Maximale Eingabelänge (weitere Zeichen werden von dem Formularelement nicht angenommen).
value= Es kann das Feld bereits dem Nutzer aufgefüllt angezeigt werden. Dieses Attribut ist in Kombination mit Programmiersprachen sinnvoll.
readonly Das Eingabefeld verdient seinen Namen nicht mehr. Der Nutzer kann nichts mehr eingeben – es werden nur die gesetzten Werte angezeigt (siehe Attribut value)
disable Das Feld wird ausgeschaltet – eventuelle Werte werden auch durch das Absenden des Formulars nicht mitgesendet.
accesskey= Das Feld wird über Tastenkombination anspringbar (abhängig vom Browser, ob zusätzlich ALT bzw. ALT + SHIFT und der vergebene Buchstabe gedrückt werden müssen
tabindex= Durch das Drücken der TAB-Taste wird von einem Eingabefeld zum nächsten gesprungen. Durch das Festlegen des Tabindex kann die Reihenfolge beeinflusst werden.

Alle Attribute mit Gleichheitszeichen benötigen weitere Angaben – z.B. bei der Verwendung von size muss noch die Länge in Form einer Zahl mitgegeben werden. Hier als Beispiel:

<input type="text" id="nameFamilie" name="familienname" size="20">

HTML5-Attribute

Weitere Attribute kamen mit HTML5 hinzu

Attribut Beschreibung
autofocus Beim Anzeigen der Seite ist sofort der Cursor in diesem Eingabefeld
placeholder= Ein Beispieltext, der nach Eingaben automatisch verschwindet
required Eingabefeld darf nicht leer bleiben
title= Tooltip, der Angezeigt wird, wenn der Mauszeiger über dem Eingabefeld sich befindet ODER wenn das Attribut pattern verwendet wird als Rückmeldung, wenn Fehleingaben vorliegen:
pattern= Hier können über reguläre Ausdrücke festgelegt werden, was als Eingabe möglich ist – Beispielsweise nur 2 Großbuchstaben von A bis F über pattern="[A-F]{2}"

Textvorgaben für Input-Feld

Über HTML5 können nun auch Eingabevorschläge mitgegeben werden. Es wird zwischen dem Eingabefeld eine Verbindung anhand des Attributs list und einem eindeutigen Namen (id) und einer <datalist erstellt. Über folgendes Beispiel wird es klar, wie es umgesetzt wird:

<input type="text" name="programmiersprache" list="sprachen">

<datalist id="sprachen">
    <option>PHP</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Python</option>
</datalist>

Startet der Nutzer nun mit einem P, werden ihm als Vorschlag „PHP“ und „Python“ angezeigt. Hier kann er entweder mit der Maus einen Vorschlag auswählen oder über die Tastatur (klappt über Pfeiltaste unten und TAB-Taste bzw. Return-Taste).

Einfach einmal testen (am besten mit "Ja" – Vorschläge sind: PHP, Java, JavaScript und Python:

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe