-
datalist:定义自动完成文本输入的下拉选项列表,通常配合<input>标签配合使用,可以为<input>元素提供自动完成功能。浏览器会根据用户输入的值展示一个下拉列表,包含匹配的选项。注意!<datalist>标签不能独立使用,它总是与<input>标签相关联,并通过list属性绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</body>
</html>
-
keygen:表示一个密钥对生成器字段,它可以用于生成密钥对。用户可以选择密钥类型(例如,RSA),并且密钥对随后可以被用于SSL客户端认证等。
<keygen name="security">
-
output:用于表示计算或脚本的输出结果,它通常与
<form>
标签一起使用,可以关联到表单中的其他输入元素,用来显示计算值或脚本处理的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" name="a">
+
<input type="number" id="b" name="b">
=
<output name="result" for="a b"></output>
</form>
<hr>
<form oninput="result.value=parseInt(a.value)-parseInt(b.value)">
<input type="number" id="a" name="a">
-
<input type="number" id="b" name="b">
=
<output name="result" for="a b"></output>
</form>
<hr>
<form oninput="result.value=parseInt(a.value)*parseInt(b.value)">
<input type="number" id="a" name="a">
*
<input type="number" id="b" name="b">
=
<output name="result" for="a b"></output>
</form>
<hr>
<form oninput="result.value=parseInt(a.value)/parseInt(b.value)">
<input type="number" id="a" name="a">
/
<input type="number" id="b" name="b">
=
<output name="result" for="a b"></output>
</form>
</body>
</html>