Was sind die neuen Formularelementtypen in HTML5?-Front-End-Fragen und Antworten-php.cn

Was sind die neuen Formularelementtypen in HTML5?

青灯夜游

Freigeben： 2021-12-17 16:18:00

Original

9649 Leute haben es durchsucht

Die neuen Formularelementtypen in HTML5 sind: 1. E-Mail-Typ; 3. Nummerntyp; 5. Datumsauswahltyp (Datum, Monat, Woche, Uhrzeit usw.); , Suchtyp; 7. Farbtyp; 8. Telefontyp.

Was sind die neuen Formularelementtypen in HTML5?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML-Formulare werden zum Sammeln verschiedener Arten von Benutzereingaben verwendet. In HTML-Formularen ist das Element das wichtigste Formularelement. Elemente haben viele Formen. Entsprechend unterschiedlicher Typattribute umfassen die Typtypen im ursprünglichen HTML-Formular Text, Passwort, Radio, Senden usw. Im neuen HTML5 gibt es mehrere neue Formulareingabetypen. Diese neuen Funktionen sorgen für eine bessere Eingabekontrolle und -validierung.

In diesem Artikel werden die folgenden neuen Eingabetypen für Formularelemente vorgestellt:

E-Mail
URL
Nummer
Bereich
Datumsauswahl (Datum, Monat, Woche, Uhrzeit, Datum/Uhrzeit, Datum/Uhrzeit-lokal)
Suche
Farbe
tel

E-Mail-Typ

Wenn das Typattribut auf E-Mail eingestellt ist, wird beim Absenden des Formulars automatisch überprüft, ob der Wert des E-Mail-Felds dem Standardformat von E-Mail entspricht, und Sie nicht mehr Sie müssen selbst reguläre Ausdrücke verwenden. Ich habe das Format der E-Mail überprüft.

Beispiel

Email：<input type="email" name="useremail" />

Nach dem Login kopieren

URL-Typ

Wenn das Typattribut auf URL festgelegt ist, wird beim Absenden des Formulars automatisch überprüft, ob der Wert des URL-Felds dem Standardformat der URL entspricht.

Beispiel

Linkpage:<input type="url" name="link_url" />

Nach dem Login kopieren

Zahlentyp

Wenn das Typattribut auf Zahl gesetzt ist, wird automatisch geprüft, ob der Eingabeinhalt vom numerischen Typ ist. Sie können auch die Begrenzung der Zahl des Eingabefelds festlegen.

Beispiel

Number：<input type="number" name="user_num" min="1" max="10" />

Nach dem Login kopieren

Für numerisch qualifizierte Eigenschaften:

Gibt an, dass das Eingabefeld deaktiviert ist.Gibt die maximale Zeichenlänge des Eingabefelds an dass der Wert des Eingabefelds nicht geändert werden kann. Der Bereichstyp wird für Eingabefelder verwendet, die numerische Werte innerhalb eines bestimmten Bereichs enthalten sollen. Bereichstypen werden als Schieberegler angezeigt. Sie können auch Grenzwerte für die akzeptierten Nummern festlegen. BeispielDie zur Qualifizierung von Zahlen verwendeten Attribute sind dieselben wie die ersten vier des Zahlentyps. Datumsauswahl Typ „Datumsauswahl“ wird zum Auswählen von Datum und Uhrzeit verwendet. BeispielEingabetyp zur Auswahl von Datum und Uhrzeit: Woche Woche und Jahr auswählen datetime-local Wählen Sie Uhrzeit, Tag, Monat, Jahr (Ortszeit) Suchtyp wird für Suchfelder wie die Site-Suche verwendet oder Google-Suche (das Suchfeld verhält sich wie ein normales Textfeld). Beispiel

Eigenschaft	Beschreibung
max	Gibt den Maximalwert an. zulässig
min	Gibt an, was zulässig ist. Der Mindestwert von
Schritt	Gibt das gesetzliche Zahlenintervall an (wenn Schritt = „3“ sind die gesetzlichen Zahlen -3,0,3,6 usw.) deaktiviert
	maxlength
	erforderlich
<input type="range" name="user_range" min="1" max="10" /> Nach dem Login kopieren
	Date：<input type="date" name="user_date" /> Nach dem Login kopieren
Datum Tag, Monat, Jahr auswählen	Monat Monat, Jahr auswählen
Zeit Uhrzeit auswählen (Stunden und Minuten)	datetime Wählen Sie Uhrzeit, Tag, Monat, Jahr (UTC-Zeit, Zeitzone)

Search Google:<input type="search" name="googlesearch">

Nach dem Login kopieren

Farbtyp

Wenn das Typattribut auf Farbe eingestellt ist, wird automatisch überprüft, ob der Eingabeinhalt im Farbformat vorliegt.

Beispiel

Select your favorite color:<input type="color" name="favcolor">

Nach dem Login kopieren

Telefontyp

Wenn das Typattribut auf Telefon eingestellt ist, wird automatisch überprüft, ob der Eingabeinhalt im Telefonnummernformat vorliegt.

Beispiel

Telephone:<input type="tel" name="usrtel">

Nach dem Login kopieren

Verwandte Empfehlungen: „

HTML-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas sind die neuen Formularelementtypen in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!