Eingabearten für HTML-Formen
Es gibt viele Eingabearten in HTML5. Die Liste aller Werte von Eingabearten finden Sie hier. Diese Eingabetypen werden hauptsächlich zum Erstellen von HTML-Formen verwendet.
Wir werden einen kurzen Blick auf jeden von ihnen werfen und erklären, warum sie verwendet werden. Die Verwendung dieser Eingabearten spart Zeit und verbessert die Benutzerfreundlichkeit. Die zu diskutierenden Eingabetypen sind:
text | email | url | tel | number | range | radio | color | date | month | week | time | datetime-local | password | submit | reset
text
Das Element <input> erstellet mit dem Typ text grundlegende, einzeilige Eingaben. Verwenden Sie es, wenn die Benutzer einen einzeiligen Wert eingeben sollen. Fügen Sie das Attribut required hinzu, um sicherzustellen, dass die Benutzer dieses Feld ausfüllen.
<input type="text" required>Der Eingabetyp email wird verwendet, um dem Benutzer die Eingabe und Bearbeitung einer E-Mail-Adresse zu ermöglichen, oder, wenn das Attribut multiple definiert ist, mehr als eine E-Mail-Adresse anzugeben.
Der Eingabewert :valid, :invalid aufgrund von CSS-Pseudo-Klassen zeigt automatisch an, ob es sich um eine korrekt formatierte E-Mail-Adresse handelt oder nicht.
<input type="email" multiple>url
Diese Eingabeart ist für Webadressen. Es wird automatisch überprüft, um sicherzustellen, dass es entweder leer oder eine korrekt formatierte URL ist, bevor das Formular gesendet werden kann. Es ist möglich, mehr als eine URL mithilfe vom Attribut multiple zu verwenden.
<input type="url" multiple>tel
Der Eingangstyp tel wird zur Eingabe und Bearbeitung einer Telefonnummer verwendet. Dieser Eingabewert wird nicht automatisch validiert. Es ist funktional sehr nützlich bei mobilen Browsern, da Smartphones in der Regel den Eingabetyp erkennen und die Tastatur mit einer numerischen Tastatur ändern.
<input type="tel">number
Der Eingangstyp number wird zur Eingabe eines Zahlenwertes verwendet. Es validiert und lehnt nichtnumerische Eingaben ab. Durch die Attribute min, max und step können Sie den Standardwert steuern und Minimal-, Maximal- und Startwerte einstellen.
<input type="number" min="1" max="15" step="1" name=”number-of-colors">range
Mit diesem Eingabetyp kann der Benutzer einen numerischen Wert angeben, der Wert soll nicht kleiner als ein angegebener Wert und nicht größer als ein anderer angegebener Wert sein. Verwenden Sie es, wenn der genaue Wert des Controls nicht wichtig ist. Es verwendet typischerweise einen Schieberegler oder Drehregler, während der Eingabetyp number ein Texteingabefeld anzeigt.
Wenn der Browser des Benutzers range nicht unterstützt, fällt er zurück und zeigt ihn als eine Eingabe text an. Um eine Ebene anzuzeigen, verwenden Sie die Attribute min und max mit dem Eingabetyp range. Fügen Sie einen Startpunkt mithilfe des Attributes value.
<input type="range" min="0" max="20" value="0">radio
Der Eingabetyp radio wird verwendet, um Auswahlknöpfe zu erstellen. Die Auswahlknöpfe werden im Allgemeinen verwendet, um eine Gruppenposition anzugeben. Es kann nur ein Auswahlknopf in einer Gruppe gleichzeitig ausgewählt werden.
<input type="radio" name="gender" value="male"> Männlich<br>
<input type="radio" name="gender" value="female"> Weiblichcolor
Der Eingabetyp color stellt ein Benutzeroberflächenelement zur Verfügung, das es Benutzern ermöglicht, eine Farbe auszuwählen, und gibt den Hex-Wert für diese Farbe zurück. Das Attribut value wird im Allgemeinen mit dem Eingabetyp color verwendet, um festzulegen, welche Farbe zuerst eingestellt wird, damit der Benutzer mit der Auswahl beginnen kann. Wenn das Attribut value nicht angegeben wird, beträgt es automatisch "#000000".
<input type="color" name="color" value="#1c87c9"/>date
Die Datumspicker werden häufig verwendet, um den Benutzern eine schnelle und einfache Auswahl des gewünschten Datums zu ermöglichen. Verwenden Sie den Eingabetyp date, um Eingabefelder zu erstellen, in denen Benutzer ein Datum eingeben können. Der resultierende Wert beinhaltet Jahr, Monat und Tag, aber nicht die Zeit. Sie können die Attribute min und max verwenden, um sicherzustellen, dass der Benutzer nur aus einem bestimmten Datumsbereich wählen kann.
<input type="date" name="date" value="2018-01-01" min="2017-01-01" max="2019-01-01">month
Der Eingabetyp month erstellt Eingabefelder, in die der Benutzer Monat und Jahr eingeben kann. Der Wert ist eine Zeichenkette mit dem Format "YYYY-MM" wobei YYYYYY das vierstellige Jahr und MM der Monat ist. Verwenden Sie die Attribute min und max, um ein Limit für Benutzer festzulegen.
<input type="month" name="month" value="2018-01" min="2017-01" max="2019-12">week
Der Eingabetyp week erstellt Eingabefelder, die dem Benutzer ermöglichen, das Jahr plus die ISO 8601 Wochennummer in diesem Jahr, die von Woche 1 bis 52 oder 53 sein kann, einfach auszuwählen.
<input type="week" name="week" min="2018-W1" max="2018-W52">time
Der Eingabetyp time wird verwendet, um die Eingabefelder zu erstellen, die dem Benutzer ermöglichen, die Zeit einfach einzugeben (Stunden und Minuten, manchmal Sekunden). Der Wert des Eingabetyps time wird in der Regel im 24-Stunden-Format ("hh:mm") verwendet, wenn die Zeit Sekunden beinhaltet, sieht das Format immer so "hh:mm:ss" aus. Wenn Sie möchten, dass die Benutzer auch Sekunden erwähnen, können Sie es mithilfe des Attributs step machen.
<input type="time" name="time" value="22:00"/>datetime-local
Der Eingabetyp datetime-local wird verwendet, um Eingabesteuerungen zu erstellen, mit denen die Benutzer auf einfache Weise Datum und Uhrzeit (Jahr, Monat, Tag und Uhrzeit in Stunden und Minuten) eingeben können. Es zeigt die lokale Zeitzone des Benutzers an.
<input type="datetime-local" name="meeting"/>password
Dieser Eingabetyp wird verwendet, um dem Benutzer die Möglichkeit zu geben, ein Passwort sicher festzulegen. Es wird als ein einzeiliges Klartext-Editor-Control dargestellt, bei dem der Text verdeckt ist, so dass er nicht gelesen werden kann, in der Regel durch Ersetzen jedes Zeichen durch ein Symbol wie das Sternchen ("*") oder einen Punkt ("•"). Dieses Zeichen kann je nach Benutzeragent unterschiedlich sein.
Sie können eine Mindestlänge für das Passwort durch das Attribut minlength festlegen.
<input type="password" name="password" minlength="6" required placeholder="6 characters minimum"/>submit
Der Eingabetyp submit erstellt einen Button Absenden, der das Formular an den Server sendet. Wenn Sie keinen Wert angeben, hat die Schaltfläche ein Standardlabel, das vom Benutzeragenten ausgewählt wurde.
<input type="submit" value="Submit">reset
Der Eingabetyp reset wird verwendet, um eine Reset-Taste einzufügen, die dem Benutzer ermöglicht, alle Formularwerte auf ihre Anfangswerte zurückzusetzen.
<input type="reset" value=Reset>Nun, wenn Sie mit den Eingabetypen fertig sind, lassen Sie uns ein vollständiges Beispiel für ein Formular sehen, in dem alle diese Eingabetypen verwendet werden:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Füllen Sie das Formular aus, um am Großprojekt teilzunehmen.</h2>
<form action="/action_page.php">
<fieldset>
<legend>Personalbogen</legend>
<label for="name"> Vorname: </label> <input id="name" type="text" name="firstname" placeholder="First name" required>
<label for="last">Nachname:</label> <input id="last" type="text" name="lastname" placeholder="Last name" required><br><br>
<label for="age">Alter:</label> <input id="age" type="number" min="10" max="100" step="1" name="number-of-colors"> <label for="website">Webseite:</label> <input id="website" type="url" multiple>
<br><br>
<label for="address">E-Mail-Adresse:</label> <input id="address" type="email" name="email" placeholder="[email protected]" required>
<label for="tel">Tel.:</label><input id="tel" type="tel" placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br><br>
</fieldset>
<fieldset>
<legend>Wir möchten SIE kennenlernen</legend>
<label for="color">Lieblingsfarbe:</label> <input id="color" type="color" name="color" value="#1c87c9"/><br>
<p>Motivationsgrad:</p>
<input type="range" min="0" max="10" value="4"><br>
<p>Lieblingsjahrezeit:</p>
<input type="radio" name="season" value="winter"> Winter<br>
<input type="radio" name="season" value="autumn"> Herbst<br>
<input type="radio" name="season" value="summer"> Sommer<br>
<input type="radio" name="season" value="spring"> Frühling</p>
<p>Lieblingsmusik:</p>
<input type="radio" name="music" value="jazz"> Jazz<br>
<input type="radio" name="music" value="blues"> Blues<br>
<input type="radio" name="music" value="pop"> Pop<br>
<input type="radio" name="music" value="rock"> Rock</p>
</fieldset>
<fieldset>
<legend>Erreichbarkeit</legend>
<label for="project">Wann sind Sie bereit, das Projekt zu starten?</label> <input id="project" type="date" name="date" value="2018-01-01" min="2018-01-01" max="2018-04-01"><br>
<label for="hours">Nennen Sie Ihre bevorzugten Arbeitszeiten:</label>
<input id="hours" type="time" name="time" value="09:00"/>
<label for="time">bis </label> <input id="time" type="time" name="time" value="18:00"/><br>
<label for="password">Geben Sie Ihr Password ein:</label>
<input id="password" type="password" name="password" minlength="6" required placeholder="Minimum 6 Zeichen"/>
<br><br>
<input type="submit" value="Absenden">
<input type="reset" value=Reset>
</fieldset>
</form>
</body>
</html>Zugehörige Ressourcen
Wie kann man Mailto-Formen erstellen, wie kann man Kommentarfelder mit CSS gestalten.