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<input type="text">
Optionsfeld<input type="radio">
Kontrollkästchen<input type="checkbox">
Dropdown-Liste&lt ;select><option>
Passwortfeld<input type="password">
Senden-Schaltfläche<input type="submit">
Anklickbare Schaltfläche<input type="button">
Bild-Schaltfläche<input type="image">
Ausgeblendetes Feld<input type="hidden">
Zurücksetzen-Schaltfläche<input type="reset ">
Dateifeld<input type= "Datei">

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:

<input type=" email" name="user_email" />

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:

<input type=" url" name ="user_url" />

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

Code kopieren

Der Code lautet wie folgt:

<input type=" Zahl“ Name = „Zahl1“ min = „1“ max = „20“ Schritt = „4“ />

4. Anwendung des Bereichstyps
Das Eingabeelement des Bereichstyps stellt ein Textfeld zur Eingabe numerischer Werte innerhalb eines bestimmten Bereichs bereit, das als Bildlaufleiste auf der Webseite angezeigt wird .

Code kopieren

Der Code lautet wie folgt:

<input type=" Bereich“ Name = „Bereich1“ min = „1“ max = „30“ />

5. Datums-Checkout-Typ-Anwendung
Eingabetyp HTML-Code Funktionsbeschreibung

Code kopieren

Der Code lautet wie folgt:

Datum <input type="date">

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

Code kopieren

Der Code lautet wie folgt:

Woche <input type="week">

Woche und Jahr auswählen

Code kopieren

Der Code lautet wie folgt:

Zeit <input type="time">

Zeit auswählen ( Stunden und Minuten)

Code kopieren

Der Code lautet wie folgt:

DatumUhrzeit &lt ;input type="datetime">

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

Code kopieren

Code wie folgt:

datetime-local
<input type="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" name="search1" />
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:

<input type=" tel" name ="tel" />

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

Code kopieren

Der Code lautet wie folgt:

<input type=" color" name ="color" />