HTML -Eingabetypen
In diesem Kapitel werden die verschiedenen Typen für das HTML-Element <input> beschrieben.
HTML-Eingabetypen
Hier sind die verschiedenen Eingabetypen, die Sie in HTML verwenden können:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Tipp: Der Standardwert des Attributs type ist "text".
Eingabetyp Text
<input type="text"> definiert ein einzeiliges Texteingabefeld:
Beispiel
<form>
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Vorname:
Nachname:
Eingabetyp Passwort
<input type="password"> definiert ein Passwortfeld:
Beispiel
<form>
<label for="username">Nutzername:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Passwort:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Nutzername:Passwort:
Die Zeichen in einem Passwortfeld werden maskiert (als Sternchen oder Kreise angezeigt).
Eingabetyp Senden
<input type="submit"> Definiert eine Schaltfläche zum Senden von Formulardaten an einen Formularhandler.
Der Formularhandler ist normalerweise eine Serverseite mit einem Skript zur Verarbeitung von Eingabedaten.
Der Formularhandler wird im Attribut action des Formulars angegeben:
Beispiel
<form action="/action_page.html">
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Wenn Sie das Wertattribut der übermittelten Schaltfläche weglassen, erhält die Schaltfläche einen Standardtext:
Beispiel
<form action="/action_page.html">
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Try it Yourself »
Eingangstyp zurücksetzen
<input type="reset"> definiert eine Reset-Schaltfläche, die alle Formularwerte auf ihre Standardwerte zurücksetzt:
Beispiel
<form action="/action_page.html">
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Wenn Sie die Eingabewerte ändern und dann auf die Schaltfläche „Zurücksetzen“ klicken, werden die Formulardaten auf die Standardwerte zurückgesetzt.
Eingangstyp Radio
<input type="radio"> definiert ein Radio-Button.
Mit Optionsschaltflächen kann ein Benutzer NUR EINE aus einer begrenzten Anzahl von Optionen auswählen:
Beispiel
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Kontrollkästchen „Eingabetyp“.
<input type="checkbox"> definiert ein Kontrollkästchen.
Mithilfe von Kontrollkästchen kann ein Benutzer NULL oder MEHR Optionen aus einer begrenzten Anzahl von Optionen auswählen.
Beispiel
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Schaltfläche „Eingabetyp“
<input type="button"> definiert eine Schaltfläche:
Beispiel
<input type="button" onclick="alert('Ehre sei der Ukraine!!')" value="Click Me!">
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Farbe des Eingabetyps
Der <input type="color"> wird für Eingabefelder verwendet, die eine Farbe enthalten sollen.
Abhängig von der Browserunterstützung kann im Eingabefeld ein Farbwähler angezeigt werden.
Beispiel
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Try it Yourself »
Eingabetyp Datum
Der <input type="date"> wird für Eingabefelder verwendet, die ein Datum enthalten sollen.
Abhängig von der Browserunterstützung kann im Eingabefeld eine Datumsauswahl angezeigt werden.
Beispiel
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Try it Yourself »
Sie können auch die Attribute min und max verwenden, um Einschränkungen für Datumsangaben hinzuzufügen:
Beispiel
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Try it Yourself »
Eingabetyp Datetime-local
Der <input type="datetime-local"> gibt ein Datums- und Uhrzeit-Eingabefeld ohne Zeitzone an.
Abhängig von der Browserunterstützung kann im Eingabefeld eine Datumsauswahl angezeigt werden.
Beispiel
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Try it Yourself »
Eingabetyp E-Mail
Der <input type="email"> wird für Eingabefelder verwendet, die eine E-Mail-Adresse enthalten sollen.
Abhängig von der Browserunterstützung kann die E-Mail-Adresse bei der Übermittlung automatisch validiert werden.
Einige Smartphones erkennen den E-Mail-Typ und fügen „.com“ zur Tastatur hinzu, um der E-Mail-Eingabe zu entsprechen.
Beispiel
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Try it Yourself »
Eingabetypdatei
Der <input type="file"> definiert ein Dateiauswahlfeld und eine Schaltfläche „Durchsuchen“ für Datei-Uploads.
Beispiel
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Try it Yourself »
Eingabetyp ausgeblendet
Der <input type="hidden"> definiert ein verstecktes Eingabefeld (für einen Benutzer nicht sichtbar).
Ein verstecktes Feld ermöglicht es Webentwicklern, Daten einzufügen, die von Benutzern beim Absenden eines Formulars nicht gesehen oder geändert werden können.
In einem versteckten Feld wird oft gespeichert, welcher Datenbankeintrag aktualisiert werden muss, wenn das Formular gesendet wird.
Hinweis: Der Wert wird dem Benutzer zwar nicht im Seiteninhalt angezeigt, ist aber mit den Entwicklertools eines beliebigen Browsers oder der Funktion „Quelle anzeigen“ sichtbar (und kann bearbeitet werden). Nutzen Sie versteckte Eingaben nicht als Sicherheitsmaßnahme!
Beispiel
<form>
<label for="fname">Vorname:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
Try it Yourself »
Eingabetyp Monat
Mit <input type="month"> kann der Benutzer einen Monat und ein Jahr auswählen.
Abhängig von der Browserunterstützung kann im Eingabefeld eine Datumsauswahl angezeigt werden.
Beispiel
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Try it Yourself »
Geben Sie die Typnummer ein
Der <input type="number"> definiert ein numerisches Eingabefeld.
Sie können auch Einschränkungen für die akzeptierten Nummern festlegen.
Das folgende Beispiel zeigt ein numerisches Eingabefeld, in das Sie einen Wert von 1 bis 5 eingeben können:
Beispiel
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Try it Yourself »
Eingabebeschränkungen
Hier ist eine Liste einiger häufiger Eingabebeschränkungen:
| Attribut | Beschreibung |
|---|---|
| checked | Geben Sie an, dass ein Eingabefeld beim Laden der Seite vorab ausgewählt werden soll (z. B type="checkbox" oder type="radio") |
| disabled | Geben Sie an, dass ein Eingabefeld deaktiviert werden soll |
| max | Geben Sie den Maximalwert für ein Eingabefeld an |
| maxlength | Geben Sie die maximale Zeichenanzahl für ein Eingabefeld an |
| min | Geben Sie den Mindestwert für ein Eingabefeld an |
| pattern | Geben Sie einen regulären Ausdruck an, mit dem der Eingabewert verglichen werden soll |
| readonly | Geben Sie an, dass ein Eingabefeld schreibgeschützt ist (kann nicht geändert werden) |
| required | Geben Sie an, dass ein Eingabefeld erforderlich ist (muss ausgefüllt werden) |
| size | Geben Sie die Breite (in Zeichen) eines Eingabefelds an |
| step | Geben Sie die zulässigen Zahlenintervalle für ein Eingabefeld an |
| value | Geben Sie den Standardwert für ein Eingabefeld an |
Mehr über Eingabebeschränkungen erfahren Sie im nächsten Kapitel.
Das folgende Beispiel zeigt ein numerisches Eingabefeld, in das Sie einen Wert von 0 bis 100 in 10er-Schritten eingeben können. Der Standardwert ist 30:
Beispiel
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
Try it Yourself »
Eingabetypbereich
Der <input type="range"> definiert ein Steuerelement zur Eingabe einer Zahl, deren genauer Wert nicht wichtig ist (wie ein Schieberegler). Der Standardbereich liegt zwischen 0 und 100. Sie können jedoch mit den Werten einschränken, welche Zahlen akzeptiert werden min, max und step Attribute:
Beispiel
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Try it Yourself »
Eingabetypsuche
Der <input type="search"> wird für Suchfelder verwendet (ein Suchfeld verhält sich wie ein normales Textfeld).
Beispiel
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Try it Yourself »
Eingabetyp Tel
Der <input type="tel"> wird für Eingabefelder verwendet, die eine Telefonnummer enthalten sollen.
Beispiel
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Try it Yourself »
Eingabetyp Zeit
Mit <input type="time"> kann der Benutzer eine Zeit auswählen (keine Zeitzone).
Abhängig von der Browserunterstützung kann im Eingabefeld eine Zeitauswahl angezeigt werden.
Beispiel
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Try it Yourself »
Eingabetyp-URL
Der <input type="url"> wird für Eingabefelder verwendet, die eine URL-Adresse enthalten sollen.
Abhängig von der Browserunterstützung kann das URL-Feld bei der Übermittlung automatisch validiert werden.
Einige Smartphones erkennen den URL-Typ und fügen „.com“ zur Tastatur hinzu, um mit der URL-Eingabe übereinzustimmen.
Beispiel
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Try it Yourself »
Eingabetyp Woche
Mit <input type="week"> kann der Benutzer eine Woche und ein Jahr auswählen.
Abhängig von der Browserunterstützung kann im Eingabefeld eine Datumsauswahl angezeigt werden.
Beispiel
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Try it Yourself »
HTML Übungen
HTML Eingabetypattribut
| Tag | Beschreibung |
|---|---|
| <input type=""> | Geben Sie den anzuzeigenden Eingabetyp an |
