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

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

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: