Heim > Artikel > Web-Frontend > Was sind die neuen Elemente in HTML5-Formularen?

Was sind die neuen Elemente in HTML5-Formularen?

青灯夜游Original: 2022-01-23 17:44:494041Durchsuche

Die neuen Elemente von HTML5-Formularen sind: 1. „“-Tag-Element, das vordefinierte Optionen von Eingabesteuerelementen definieren kann 2. „“-Tag-Element, das Schlüsselpaargeneratorfelder definieren kann (verwendet). für Formular); 3. Das Tag-Element „“ kann Berechnungsergebnisse definieren.

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

HTML5 bildet neue Elemente

Tag	Beschreibung
	definiert die vordefinierten Optionen der Eingabesteuerung.
	Schlüsselpaargeneratorfelder definieren (für Formulare).
	Definieren Sie das Berechnungsergebnis.

1. -Tag

-Tag wird verwendet, um „Autovervollständigungsfunktionen“ für -Elemente bereitzustellen. Dem Benutzer wird eine Dropdown-Liste mit vordefinierten Optionen angezeigt, die als Eingabedaten des Benutzers dienen.

Bitte verwenden Sie das Listenattribut des -Elements, um das -Element zu binden.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
	
<form action="#" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

</body>
</html>

Was sind die neuen Elemente in HTML5-Formularen?

2. -Tag

-Tag gibt das für das Formular verwendete Schlüsselpaargeneratorfeld an.

Beim Absenden des Formulars wird der private Schlüssel lokal gespeichert und der öffentliche Schlüssel an den Server gesendet.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<form action="demo_keygen.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

</body>
</html>

Was sind die neuen Elemente in HTML5-Formularen?

3. Das Tag wird als Ausgabe des Berechnungsergebnisses angezeigt (z. B. die Ausgabe der Ausführung eines Skripts).

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Verwandte Empfehlungen: „ Was sind die neuen Elemente in HTML5-Formularen? HTML-Video-Tutorial

“

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

html5 html input

Stellungnahme：

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

Vorheriger Artikel：Was sind die beiden Speichermethoden von HTML5?Nächster Artikel：Was sind die beiden Speichermethoden von HTML5?

In Verbindung stehende Artikel

Mehr sehen