HTML-Kurs / Eingabetypen für E-Mail, Zahlen, Datum und Auswahl wählen
Der type eines input gibt dem Browser an, welchen Werttyp oder welche Auswahl das Feld darstellt. E-Mail-Adressen, Mengenangaben, Datumswerte, Kontrollkästchen und Optionsfelder haben unterschiedliche Verhaltensweisen. Wählen Sie den Typ basierend auf den Daten und den Entscheidungen, die die Benutzer treffen müssen, und nicht nur nach dem visuellen Erscheinungsbild.
Ordnen Sie den Typ dem Wert zu
<form method="get">
<p><label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email"></p>
<p><label for="quantity">Menge</label>
<input id="quantity" name="quantity" type="number" min="1"></p>
<p><label for="visit-date">Besuchsdatum</label>
<input id="visit-date" name="date" type="date"></p>
<button type="submit">Überprüfen</button>
</form>Speichern Sie das Beispiel in einer HTML-Datei und testen Sie jedes Feld. email kann eine grundlegende Validierung des Adressformats und eine geeignete Eingabeschnittstelle auf einigen Geräten bereitstellen. number kann mit min einen Mindestwert vorgeben; die sichtbare Steuerung für date hängt vom Browser und Betriebssystem ab. Der Server muss immer überprüfen, ob ein eingereichtes Datum für den Zweck der Anwendung gültig ist.
Eine Menge ist eine Zahl, mit der Sie rechnen können, aber eine Postleitzahl kann führende Nullen haben und eine Telefonnummer kann eine Länderkennung oder Interpunktion enthalten. Verwenden Sie text oder tel für solche Werte anstelle von number. Fragen Sie, ob der Wert eine numerische Menge ist und nicht nur, ob er Ziffern enthält.
Kontrollkästchen oder Optionsfelder?
Wählen Sie ein Kontrollkästchen für eine unabhängige Ja/Nein-Entscheidung oder mehrere unabhängige Auswahlen. Wählen Sie Optionsfelder mit demselben name, wenn nur eine Option aus einer Gruppe ausgewählt werden kann. Vergleichen Sie die Benennung der Gruppen mit dem Beispiel zu fieldset und legend im Beitrag Formulare mit fieldset, legend und autocomplete verständlich gestalten .
<fieldset>
<legend>Aktualisierungen</legend>
<label><input type="checkbox" name="news" value="yes"> Neuigkeiten erhalten</label>
</fieldset>
<fieldset>
<legend>Bevorzugtes Kontaktmittel</legend>
<label><input type="radio" name="contact" value="email"> E-Mail-Adresse</label>
<label><input type="radio" name="contact" value="phone"> Telefon</label>
</fieldset>Die Radio-Eingaben teilen sich name="contact", daher löscht die Auswahl einer die andere. value ist der übermittelte Wert, der nicht mit dem sichtbaren Label übereinstimmen muss. Setzen Sie diese Gruppen in ein form mit einem Absende-Button, um sie zu testen: Eine nicht angekreuzte news-Checkbox trägt zu keiner Eingabe bei, während die Auswahl von E-Mail-Adresse contact=email sendet. Wenn Ihre Anwendung zwischen einem expliziten „Nein“ und keiner Antwort unterscheiden muss, gestalten Sie diese Auswahl und deren Verarbeitung serverseitig bewusst.
Vergleichen Sie die Schnittstelle mit den übermittelten Werten
| Typ | Zweck | Vorsicht |
|---|---|---|
email |
Eine E-Mail-formatierte Zeichenkette | Überprüft nicht die Existenz eines Postfachs |
number |
Eine numerische Menge | Der Bereich, der Schritt und die Möglichkeit, leer zu sein, sind getrennt |
date |
Ein Datum | Die Schnittstelle variiert je nach Gebietsschema; der Wert verwendet jjjj-mm-tt |
checkbox |
Eine unabhängige Auswahl | Ein nicht angekreuztes Kontrollkästchen trägt zu keinem Eintrag bei |
| radio | Eine Auswahl aus einer Gruppe mit demselben Namen | Ein gemeinsames fieldset ersetzt keinen gemeinsamen name-Wert |
Speichern Sie das vollständige Beispiel unter visit.html und verwenden Sie die Testadresse name@example.com. Wenn die erforderliche Radiogruppe ohne Antwort gelassen wird, wird die Übermittlung blockiert, während die optionale Auswahl Neuigkeiten die Datenliste verändert.
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Übung zu Feldtypen</title>
</head>
<body>
<h1>Mit einer Besuchsanfrage üben</h1>
<form id="visit-form" method="get">
<p><label for="visit-email">E-Mail-Adresse</label>
<input id="visit-email" name="email" type="email" required></p>
<p><label for="visit-day">Besuchsdatum</label>
<input id="visit-day" name="date" type="date" required></p>
<p><label for="visit-quantity">Menge</label>
<input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
<fieldset>
<legend>Kontaktmittel</legend>
<label><input type="radio" name="contact" value="email" required> E-Mail-Adresse</label>
<label><input type="radio" name="contact" value="phone"> Telefon</label>
</fieldset>
<p><label><input type="checkbox" name="news" value="yes"> Neuigkeiten</label></p>
<button type="submit">Eingegebene Werte überprüfen</button>
</form>
</body>
</html>Wählen Sie ein Datum und überprüfen Sie document.getElementById("visit-day").value in der Konsole. Die Auswahl des 20. Mai 2030 ergibt einen Wert in der Form 2030-05-20, unabhängig von der Anzeige des lokalisierten Kalenders. Aktivieren und deaktivieren Sie dann Neuigkeiten und vergleichen Sie die Liste der Einträge mit dem Befehl unten.
Array.from(new FormData(document.getElementById("visit-form")).entries())Format des Wertes eines Datumsfeldes auf MDN
Überprüfen Sie mehr als nur den Typ
Jedes Feld benötigt immer ein verständliches Label und, wenn sein Wert übermittelt werden soll, ein name. Ein type="email"-Feld kann leer gelassen werden, außer wenn Sie auch einen Wert verlangen; Format und Pflicht sind getrennte Regeln. Sie können required einer Gruppe von Radiobuttons hinzufügen, wenn die Auswahl einer Antwort wirklich erforderlich ist. Testen Sie, was der Browser übermittelt, und validieren Sie die wichtigen Werte auf dem Server. Die Referenz für das Input-Element auf MDN listet die unterstützten Typen und Einschränkungen auf. Typ und Pflicht, Länge und Bereich sind getrennt; testen Sie deren Grenzwerte in Formularvalidierung mit Pflicht, Längen- und Bereichsgrenzen.
