Einführung in die 8 neuen INPUT-Eingabetypen in HTML5_html5-Tutorial-Fähigkeiten

Vorhandene HTML-Codebeispiele für Eingabetypen:

Kopieren Sie den Code

Der Code lautet wie folgt:

Textfeld
Optionsfeld
Kontrollkästchen
Dropdown-Liste< ;select>
Passwortfeld
Senden-Schaltfläche
Anklickbare Schaltfläche
Bild-Schaltfläche
Ausgeblendetes Feld
Zurücksetzen-Schaltfläche
Dateifeld

In HTML5 wurden mehrere neue Formulareingabe-Eingabetypen hinzugefügt. Durch die Verwendung dieser neuen Elemente können Sie eine bessere Eingabekontrolle und -validierung ermöglichen.
1. E-Mail-Typ-Anwendung
Das E-Mail-Typ-Eingabeelement ist ein Texteingabefeld, das speziell zum Eingeben einer E-Mail-Adresse verwendet wird. Der E-Mail-Eingabewert wird automatisch überprüft der Box.

Code kopieren

Der Code lautet wie folgt:

2. Anwendung des URL-Typs
Das Eingabeelement des URL-Typs stellt ein Textfeld zur Eingabe von speziellem Text wie der URL-Adresse bereit.

Code kopieren

Der Code lautet wie folgt:

3. Anwendung des Zahlentyps
Das Eingabeelement für den Zahlentyp bietet ein Textfeld zur Eingabe numerischer Werte.

Code kopieren

Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Datum

Tag, Monat, Jahr auswählen
Monat < input type="month">
Monat und Jahr auswählen

Code kopieren

Der Code lautet wie folgt:

Woche

Woche und Jahr auswählen

Code kopieren

Der Code lautet wie folgt:

Zeit

Zeit auswählen ( Stunden und Minuten)

Code kopieren

Der Code lautet wie folgt:

DatumUhrzeit < ;input type="datetime">

Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen

Code kopieren

Code wie folgt:

datetime-local
Wählen Sie Uhrzeit, Tag, Monat, Jahr (lokal). Zeit)

6. Suchtypanwendungen

Das Suchtyp-Eingabeelement bietet ein Textfeld zur Eingabe von Suchbegriffen.

Code kopieren

Der Code lautet wie folgt:

input[type="search"]{
-webkit-appearance:textfield;
}

7. Tel-Typ-Anwendung
Das Tel-Typ-Eingabeelement bietet ein Textfeld speziell für die Eingabe von Telefonnummern.

Code kopieren

Der Code lautet wie folgt:

8. Farbtypanwendung
Das Farbtyp-Eingabeelement stellt ein Textfeld bereit, das speziell zum Festlegen der Farbe verwendet wird.

Code kopieren

Der Code lautet wie folgt: