HTML5 new form elements

HTML5 <datalist>元素

The <datalist> element specifies a list of options for the input field

The <datalist> attribute specifies that the form or input field should have autocomplete. When the user starts typing in an autocomplete field, the browser should display the filled options in that field;

Bind to the <datalist> element using the list attribute of the <input> element.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.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>Note:</strong> Internet Explorer 9, Safari does not support the datalist tag.
		</p>
		
	</body>
</html>

HTML5 <keygen> element

The purpose of the <keygen> element is to provide a reliable way to authenticate users.

The <keygen> tag specifies the key pair generator field for the form.

When the form is submitted, two keys are generated, a private key and a public key.

The private key is stored on the client and the public key is sent to the server. The public key can then be used to verify the user's client certificate.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.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>Note:</strong> Internet Explorer does not support keygen tags.
		</p>
		
	</body>
</html>

HTML5 <output> 元素

The <output> element is used for different types of output, such as computation or script output:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.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>Note:</strong> Internet Explorer does not support the output tag.
		</p>
		
	</body>
</html>