Liste wichtiger HTML-input-Tags für Benutzer-Eingaben in HTML-Formularen

Worum geht´s?

Im Tutorial über HTML-Formulare ging es hauptsächlich um die grundsätzlichen Aufbau eines HTML-Formulars. In diesem Tutorial geht es um die Vielzahl an Möglichkeiten, mit Hilfe von HTML-input-Tags und anderen Möglichkeiten Daten des Webseiten-Besuchers aufzunehmen. Am Anfang werden wir uns die am häufigsten verwendeten HTML-input-Tags ansehen, um uns am Ende noch einige nette Neuerungen in HTML5 bzw. seltener verwendete HTML-input-Elemente anzusehen.

1. Wo HTML-input-Tags im Quellcode vorkommen

HTML-input-Tags sind sehr vielseitig und können in verschiedenen Situationen verwendet werden. Hier eine kurze Auflistung der häufigsten:

1.1 HTML-input-Tags innerhalb eines HTML-Formulars

Klassischerweise kommen HTML-input-Tags innerhalb eines <form>-Tags vor. Gemeinsam mit dem Submit-Button und dem HTML-Formular werden die über die input-Tags gewonnenen Daten dann an die Unterseite (meist eine .php-Datei) weitergegeben, die sie dann verarbeitet. In diesem Fall wirst du deine HTML-input-Tags innerhalb des öffnenden und schließenden <form>-Tags platzieren:

<form method="post" action="auswerten.php">
    <p><input type="text" placeholder="Hier Text einfügen" name="userInput"></p>
    <p><input type="submit" value="Jetzt einloggen"></p>
</form>

1.2 Daten von HTML-input-Tags mit JavaScript oder AJAX verarbeiten

Mit Hilfe von JavaScript (und/oder AJAX) ist es auch möglich, die durch die HTML-input-Tags gewonnenen Daten ohne ein HTML-Formular weiterzuverarbeiten.

Wie das geht, lernst du in den Tutorials zu JavaScript.

1.3 HTML-input-Tags für den Checkbox-Hack verwenden

Außerdem werden gewisse HTML-input-Tags mit vor allem das checkbox-Tag und das radio-Tag auch für den sogenannten „Checkbox-Hack“ verwendet, um auch ohne JavaScript per Klick zwischen zwei oder mehr Ansichten umschalten zu können. Auch bei dieser Methode können HTML-input-Tags außerhalb von <form>-Tags vorkommen.

Wie das genau funktioniert, lernst du in den Tutorials zu CSS.

Für den Anfang werden deine HTML-input-Tags jedoch wahrscheinlich meist innerhalb des <form>-Tags vorkommen. Falls du das entsprechende Tutorial noch nicht durchgearbeitet hast, könnte das an dieser Stelle gut für dich sein.

2. Die wichtigsten HTML-input-Tags für den alltäglichen Gebrauch

Es gibt schon länger einige „Klassiker“ der HTML-input-Tags wie ein einfaches HTML-Textfeld oder auch ein Passwort-Feld. Andere HTML-input-Tags kamen erst mit der Zeit oder mit HTML5 dazu.

Hier eine (unvollständige und subjektive) Liste der wichtigsten:

2.1 Einfaches HTML-Textfeld einfügen

Das einfachste HTML-input-Tag ist wahrscheinlich das klassische HTML-Textfeld. Es ist einfach ein leeres Textfeld, in das man ohne Einschränkungen Text reinschreiben kann:

<input type="text" placeholder="Hier Text einfügen" name="userInput">

Das placeholder-Attribut (=Platzhalter) ist hierbei nicht verpflichtend, aber üblich. So weiß der Webseiten-Besucher, was von ihm erwartet wird. Sobald er selbst zu schreiben beginnt, verschwindet der Placeholder-Text.

Das placeholder-Attribut kannst du bei vielen HTML-input-Tags verwenden.

2.2 Ein HTML-Passwort-Feld einfügen

Ein Passwort-Feld unterscheidet sich vom einfachen HTML-Textfeld dadurch, dass der eingegebene Text „verdeckt“ angezeigt wird – üblicherweise durch schwarze Punkte statt Buchstaben:

<input type="password" placeholder="Dein PW" name="userInput" autocomplete="on">

Das placeholder-Attribut kennen wir ja schon. Es funktioniert auch beim Password-Feld.

Was hier neu ist, ist das autocomplete-Attribut. Ist es auf „on“ gesetzt, fügt der Browser gespeicherte Passwörter von dieser Seite automatisch ein, um ein erneutes Einloggen zu erleichtern. Statt „on“ kannst du für das autocomplete-Attribut setzen:

• „on“: der Browser versucht, das gespeicherte Passwort einzusetzen, und darf ein neues vorschlagen, falls noch keines gespeichert wurde
• „off“: der Browser darf gespeicherte Passwörter hier nicht einsetzen (wird von manchen Browsern ignoriert)
• „current-password“: Der Browser darf gespeicherte Passwörter einsetzen, aber kein neues vorschlagen
• „new-password“: Der Browser darf ein neues vorschlagen, aber kein neues einsetzen

2.3 Emails eingeben lassen mit dem HTML-Email-Feld

Das Email-Feld funktioniert ähnlich wie das Text-Feld. Wenn das Formular abgeschickt wird, wird jedoch überprüft, ob der eingegebene Text theoretisch eine Email-Adresse sein könnte (hauptsächlich, ob ein @-Zeichen im Text vorkommt):

<input type="email" placeholder="niklas@relativemeister.com" name="userEmail">

Anmerkung: Diese Überprüfung ist nicht wirklich 100% sicher. Wer will, kann sie mit etwas Vorwissen leicht umgehen. Aber bei 90% der Webseiten-Besucher hilft sie, Fehler beim Eingeben von Daten zu vermeiden.

2.4 Das HTML-Nummern-Feld

Das HTML-Nummern-Feld funktioniert ähnlich wie das HTML-Textfeld, nur ist es für Zahlen gedacht. Es hat zwei kleine Pfeil-Buttons, mit denen man die Zahl erhöhen oder verringern kann:

<input type="number" min="0" max="10" step="2" name="userInput">

Beim HTML-Nummern-Feld gibt es drei Attribute, die verwendet werden können, um die Zahl, die man eingeben kann, genauer zu definieren:

• max: die Obergrenze der Nummer
• min: die Untergrenze der Nummer
• step: Um wie viel sich die Zahl verändert, wenn man einen der Pfeile klickt

In ein HTML-Nummern-Feld kann man grundsätzlich auch Buchstaben und Text schreiben – dies wird nicht automatisch verhindert.

Wenn man ein Formular mit einem HTML-Nummern-Feld abschicken will, wird jedoch überprüft, ob es wirklich eine Nummer ist, und auch die min-, max- und step-Einschränkungen erfüllt sind.

Wenn nicht, kann das Formular nicht abgeschickt werden, und der Benutzer erhält eine entsprechende Meldung.

2.5 Ja oder Nein: Das HTML-Checkbox-Feld

Eine HTML-Checkbox ist ein kleines Quadrat, in das man durch Anklicken ein Häkchen setzen kann:

<input type="checkbox" name="cb" value="jaIchWillSocken" checked>

Für unsere HTML-Checkbox sind nun folgende zwei Attribute relevant:

• checked: wenn es dazugeschrieben wird hat die Checkbox standardmäßig ein Häkchen beim Laden der Seite
• value: Was im Formular mitgeschickt werden soll, wenn die Checkbox angeklickt worden ist – in dem Fall will jemand wirklich gerne Socken

Das HTML-Checkbox-Feld brauchst du – wie der Name vermuten lässt – üblicherweise für den Checkbox-Hack.

2.6 Eines von mehreren auswählen: Das HTML-Radiobutton-Feld

Ein HTML-Radiobutton-Feld sieht aus wie ein kleiner weißer Kreis und kommt im Normalfall in einer Gruppe von mindestens drei Radiobuttons vor:

<input type="radio" name="radioGroup" value="option1" checked>
<input type="radio" name="radioGroup" value="option2">
<input type="radio" name="radioGroup" value="option3">

Die Gruppe ist deswegen wichtig, weil HTML-Radiobuttons die Funktion haben, eine Auswahl aus mehreren Optionen zu treffen. Wenn in unserem Beispiel-Code oben der zweite Radiobutton angeklickt wird, verliert der erste seinen „checked“-Status, weil dieser sich auf den zweiten Radiobutton verschiebt.

Für unsere HTML-Radiobuttons sollten wir auf drei Attribute achten:

• name: bestimmt, welche Radiobuttons zusammen eine Gruppe bilden (gleicher Name, gleiche Gruppe).
• checked: wenn es dazugeschrieben wird ist dieser Radiobutton standardmäßig beim Laden der Seite vorausgewählt
• value: Was im Formular mitgeschickt werden soll, wenn der Radiobutton angeklickt worden ist. Jeder HTML-Radiobutton einer Gruppe sollte sinnvollerweise hier etwas Unterschiedliches stehen haben

2.7 Einen größeren Textblock mit der HTML-Textarea

Wenn ein einzeiliges HTML-Textfeld nicht ausreicht, gibt es in HTML auch eine sogenannte Textarea. Wie der Name sagt, ist das ein mehrzeiliges Textfeld. Diese ist kein HTML-input-Tag im klassischen Sinne (kein <input>-Tag), aber auch fürs Gewinnen von Daten des Webseiten-Benutzers gedacht:

<textarea name="bigText" rows="20" cols="60" minlength="50" maxlength="200">

An sich gibt es bei der Textarea ziemlich viele mögliche Attribute. Hier einige der wichtigsten:

• rows: Die Größe der Textarea durch die Anzahl der Zeilen bestimmen
• columns: Die Größe der Textarea durch die Anzahl der Spalten (= Zeichen pro Zeile) bestimmen
• minlength: Die Anzahl der Zeichen, die mindestens in die HTML-Textarea eingegeben werden müssen
• maxlength: Die Anzahl der Zeichen, die maximal in die HTML-Textarea eingegeben werden dürfen

Um längere und komplexere Texte auf unkomplizierte Weise eingeben zu können, gibt es praktische Hilfsmittel wie den tinymce-Editor, mit dem dieses Tutorial beispielsweise gerade verfasst wird. Er ermöglicht es, mit nur wenigen Klicks Text-Teile fett zu schreiben, Überschriften auszuwählen usw.

Wie du ihn einbindest und verwendest, werden wir uns an anderer Stelle ansehen.

2.8 Eine Dropdown-Auswahl treffen mit HTML-Select und Option

Wenn du statt den HTML-Radiobuttons lieber eine Dropdown-Liste mit möglichen Optionen verwenden willst, gibt es auch die Möglichkeit, das Ganze mit HTML-Select-Tags und HTML-Option-Tags zu realisieren:

<select name="auswahl">
    <option value="o1">1. Wahl</option>
    <option value="o2" selected>2. Wahl</option>
</select>

Mit dem Formular weitergeschickt wird dabei nur der mit dem name-Attribut festgelegte Name und das value-Attribut des ausgewählten Option-Tags.

Wählt der User also im Drowdown-Select z.B. die 2. Wahl, so wird das Formular folgendes weiterschicken:

• „auswahl“: „02“

Das selected-Attribut funktioniert ähnlich wie das checked-Attribut bei den HTML-Checkboxen bzw. den HTML-Radiobuttons. Es trifft beim Laden der Seite standardmäßig diese Option als Vorauswahl.

Das waren nun die häufigsten HTML-input-Tags fürs erste. Nun werden wir uns noch einige ansehen, die weniger häufig verwendet werden oder erst durch HTML5 hinzugekommen sind.

2.9 Versteckt Daten mitsenden mit hidden-input-Tags

Was, wenn du Daten mit einem Formular mitschicken willst, ohne dass der Webseiten-Besucher das mitbekommt?

Dafür ist das hidden-input gedacht:

<input type="hidden" value="heimlicherWert" name="heimlich">

Der Wert im value-Attribut wird dabei über den Namen (in diesem Fall „heimlich“) mit dem Formular mitgeschickt, ohne dass er im Browser angezeigt wird.

Allerdings können Webseiten-Besucher über den Webseiten-Inspektor oder durch Betrachten des Quellcodes sehr wohl sehen, was in diesem HTML-input-Tag mitgeschickt wird. Bösartige Besucher können den HTML-Code auch im Browser verändern und so manipulierte Daten senden. Eine zusätzliche server-seitige Überprüfung der Daten ist daher sehr wichtig.

Sensible Daten wie Kreditkarten-Informationen sollten natürlich auch auf keinen Fall auf diese Art und Weise sichtbar gemacht werden.

3. Seltener verwendete oder erst durch HTML5 hinzugekommene HTML-input-Tags

Die folgende Auflistung ist keine vollständige. Sie soll nur einen groben Eindruck vermitteln, was vor allem seit HTML5 noch möglich ist.

3.1 Umgang mit Zeit und Datum in HTML5

3.1.1 Ein Datum in HTML-Formularen eingeben mit dem date-input

Du kannst nun in HTML5 ganz einfach ein Datum eingeben lassen:

<input type="date" name="meinKurs" value="2022-07-22" min="2022-01-01" max="2022-12-31">

Dabei sind die folgenden Attribute möglich, um dein Datums-Eingabefeld in HTML besser zu definieren:

• value: Das voreingestellte Datum
• min: Das früheste mögliche Datum
• max: Das späteste mögliche Datum

Das Format, in dem die Attribute gesetzt werden, ist dabei immer YYYY-MM-DD, wobei Y für Jahr steht, M für Monat und D für Tag, auch wenn das Datum je nach Browser und Ländereinstellung anders angezeigt wird.

3.1.2 Uhrzeiten in HTML-Formularen eingeben mit dem time-input

In HTML5 kannst du auch Uhrzeiten relativ einfach eingeben lassen:

<input type="time" name="meetMe" min="09:00" max="18:00" value="20:15">

Die drei Attribute sind dabei sehr ähnlich wie beim date-input:

• value: Die voreingestellte Zeit
• min: Die früheste mögliche Zeit
• max: Die späteste mögliche Zeit

3.1.3 Datum und Uhrzeit auf einmal in HTML-Formularen eingeben mit dem datetime-local-input

Hierbei handelt es sich um eine Kombi-Lösung aus Uhrzeit und Datum:

<input type="datetime-local" name="meeting-time" value="2022-06-12T19:30" min="2022-06-07T00:00" max="2022-06-14T00:00">

Die Attribute sind grundsätzlich wieder gleich wie bei den letzten beiden HTML-input-Tags aufgebaut:

• value: voreingestellte Zeit/Datum
• min: früheste mögliche Zeit/Datum
• max: späteste mögliche Zeit/Datum

Allerdings ändert sich das Format der jeweiligen Werte etwas. Zwischen dem Datum und der Zeit ist ein großes „T“ eingebaut.

3.2 Farben wählen lassen mit dem color-input

In HTML5 kann man eine Art Farbfeld anzeigen lassen, mit dem der Benutzer selbst Farben auswählen und im HTML-Formular mitschicken lassen kann:

<input type="color" name="farbe" value="#fdaaa2">

Das value-Attribut steht dabei für die voreingestellte Farbe als HTML-Farbcode.

3.3 Dateien mit HTML5 hochladen lassen mit dem file-input

Natürlich kann man in einem HTML-Formular auch ein HTML-input-Tag mit Datei-Auswahl einfügen. Dies geht so:

<input type="file" name="meinBild" accept="image/png, image/jpeg" capture>

Hier sind zwei Attribute wichtig:

• accept: Sagt dem Browser, welche Datei-Typen erlaubt sind.
• capture: Wenn es dazugefügt wird, können Webseiten-Besucher mit dem Handy auch ein Foto/Video aufnehmen (je nach erlaubten Datentypen)

Beim accept-Attribut können mit Beistrich mehrere Optionen erlaubt werden.

Diese Optionen können folgendermaßen eingefügt werden:

• Dateieindung, wie z.B. .jpg oder .pdf
• audio/*, video/* oder image/* (z.B. alle Bild-Dateien)
• MIME-String (siehe hier eine ausführliche Liste der MIME-Typen)

3.4 Von-bis Werte in HTML5 mit dem range-input

Das nächste HTML-input-Tag ist ziemlich stylisch, und funktioniert ähnlich wie das HTML-Nummern-Feld von weiter oben (auch die Attribute sind gleich).

Anstatt aber die Zahl mit Hilfe von einzelnen Klicks oder einer direkten Zahlen-Eingabe vorzunehmen, bekommen wir hier eine Art Schieber, ähnlich einem Lautstärke-Regler:

<input type="range" name="wieLaut" min="0" max="100" value="90" step="10">

Sehr exakt sind die eingegebenen Daten dabei nicht, aber mit Hilfe der drei Attribute kann man das Ganze besser steuern:

• max: die Obergrenze der Nummer
• min: die Untergrenze der Nummer
• step: Um wie viel sich die Zahl verändert, wenn man den Regler herumschiebt

3.5 Weitere HTML-input-Tags in HTML5

Es gibt noch mehr HTML-input-Tags in HTML5 zu entdecken. Aber um dieses Tutorial nicht noch länger werden zu lassen, belassen wir es fürs erste besser dabei 🙂

Diskussion zum Tutorial