Heim Web-Frontend Front-End-Fragen und Antworten Was sind die neuen Funktionen von HTML5-Formularen?

Was sind die neuen Funktionen von HTML5-Formularen?

Dec 17, 2021 pm 02:01 PM
html5

Die neuen Funktionen von HTML5-Formularen sind: 1. Neue Eingabetypwerte (E-Mail, URL, Nummer, Telefonnummer, Farbe, Datum usw.); 2. Neue Formularelementattribute (Platzhalter, Autofokus, Formular, Minute, max, Muster) warten).

Was sind die neuen Funktionen von HTML5-Formularen?

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

Die neuen Formularfunktionen von H5 können in zwei Hauptkategorien unterteilt werden.

1. Geben Sie Werte von 10 Eingaben ein

1. E-Mail: E-Mail-Eingabefeld, ermöglicht eine einfache Überprüfung des E-Mail-Formats beim Absenden des Formulars und öffnet ein Eingabeaufforderungsfenster.

2. URL: Adresseingabefeld, das eine einfache Überprüfung des URL-Adressformats ermöglicht und beim Absenden des Formulars ein Eingabeaufforderungsfenster öffnet.

3. Nummer: Nummerneingabefeld. (Min., Max., Schrittweite einstellbar)

4. Tel.: Telefonnummern-Eingabefeld, im mobilen Browser erscheint ein Nummern-Eingabefeld.

5. Suche: Sucheingabefeld, eine Suchschaltfläche erscheint in der unteren rechten Ecke des mobilen Browsers.

6. Bereich: Bereichsauswahlsteuerung.

7. Farbe: Farbauswahlsteuerung.

8. Datum/Monat/Woche: Zeitauswahlsteuerung.

2. 11 neue Attribute von Formularelementen

1. Automatische Vervollständigung, ob zuvor übermittelte Daten für den nächsten Eingabevorschlag automatisch erfasst werden sollen.

2. Platzhalter: Wird zur Anzeige von informativem Text im Eingabefeld verwendet und kann nicht übermittelt werden.

3. Autofokus: Eingabefokus automatisch erhalten.

4. Mehrere: Gibt an, ob mehrere Eingabewerte zulässig sind. Wenn dieses Attribut deklariert ist, können mehrere durch Kommas getrennte Werte in das Eingabefeld eingegeben werden.

5. Formular: Der Wert ist die ID eines Formulars. Wenn festgelegt, kann das Eingabefeld außerhalb des Formulars platziert werden.

6. Erforderlich: Beim Absenden des Formulars wird überprüft, ob eine Eingabe erfolgt. Andernfalls wird eine Eingabeaufforderung angezeigt.

7. maxlength: Begrenzen Sie die maximale Länge. Dies ist nur nützlich, wenn eine Eingabe erfolgt. Es wird nicht zwischen Chinesisch und Englisch unterschieden.

7.5, Minlength: Begrenzt die Mindestlänge, ist jedoch kein H5-Standardattribut und wird nur von einigen Browsern unterstützt.

8. min: Begrenzen Sie den Mindestwert der Eingabenummer.

9. max: Begrenzen Sie den Maximalwert der Eingabenummer.

10. Schritt: Begrenzen Sie die Schrittgröße der Eingabenummer, verwendet in Verbindung mit min.

11. Muster: Geben Sie einen regulären Ausdruck an, um die Eingabe zu überprüfen. (Für reguläre Ausdrücke fügen Sie standardmäßig ^$ am Anfang und am Ende hinzu.)

Verwandte Empfehlungen: „HTML-Video-Tutorial

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

HTML-Eingabeplatzhalter

See all articles