Heim >Web-Frontend >HTML-Tutorial >Neue HTML5-Formularelemente

Neue HTML5-Formularelemente

不言
不言Original
2018-05-08 11:09:591353Durchsuche

Dieser Artikel stellt hauptsächlich die neuen Formularelemente von HTML5 vor, die einen gewissen Referenzwert haben. Jetzt können Freunde in Not darauf verweisen

HTML5 b0b4025f76f5388e3dbc491ff750ed84-Element gibt die Optionsliste des Eingabefelds an

Das fc86e7b705049fc9d4fccc89a2e80ee3 dass das Formular oder Eingabefeld über eine Funktion zur automatischen Vervollständigung verfügen sollte. Wenn der Benutzer mit der Eingabe in ein Autovervollständigungsfeld beginnt, sollte der Browser die ausgefüllten Optionen in diesem Feld anzeigen.

Verwenden Sie das Listenattribut des d5fd7aea971a85678ba271703566ebfd Elementbindung.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			<input list="browsers" name="browser">
			<datalist id="browsers">
				<option value="Internet Explorer"></option>
				<option value="Firefox"></option>
				<option value="Chrome"></option>
				<option value="Opera"></option>
				<option value="Safari"></option>
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意:</strong>Internet Explorer 9, Safari 不支持 datalist 标签。
		</p>
		
	</body>
</html>


HTML5 aa983b9eb8086376f1f6481364a02e5a Element

Der Zweck des aa983b9eb8086376f1f6481364a02e5a-Elements besteht darin, eine zuverlässige Möglichkeit zur Authentifizierung des Benutzers bereitzustellen.

Das aa983b9eb8086376f1f6481364a02e5a-Tag gibt das Schlüsselpaargeneratorfeld an, das im Formular verwendet werden soll.

Beim Absenden des Formulars werden zwei Schlüssel generiert, einer ist der private Schlüssel und der andere der öffentliche Schlüssel.

Der private Schlüssel wird auf dem Client gespeichert und der öffentliche Schlüssel wird an den Server gesendet. Der öffentliche Schlüssel kann später zur Überprüfung des Client-Zertifikats des Benutzers verwendet werden.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<form action="demo-form.php" method="get">
			用户名:<input list="text" name="usr_name">
			密码:<keygen name="security">
			</datalist>
			<input type="submit">
		</form>
		
		<p>
			<strong>注意:</strong>Internet Explorer 不支持 keygen标签。
		</p>
		
	</body>
</html>


HTML5 d8b09b469a036345a17928a30682f1ee-Element

Das be6d67dae90cc1ad6469079e163d0939-Element wird für verschiedene Arten der Ausgabe verwendet, wie z. B. Berechnungen oder Skriptausgaben:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<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>
		
		<p>
			<strong>注意:</strong>Internet Explorer 不支持 output 标签。
		</p>
		
	</body>
</html>


HTML5 neues Formularelement

标签 描述
fc86e7b705049fc9d4fccc89a2e80ee3 d5fd7aea971a85678ba271703566ebfd标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
aa983b9eb8086376f1f6481364a02e5a aa983b9eb8086376f1f6481364a02e5a 标签规定用于表单的密钥对生成器字段。
be6d67dae90cc1ad6469079e163d0939 be6d67dae90cc1ad6469079e163d0939 标签定义不同类型的输出,比如脚本的输出。

Das obige ist der detaillierte Inhalt vonNeue HTML5-Formularelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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:HTML5 neuer EingabetypNächster Artikel:HTML5 neuer Eingabetyp