HTML5表单_表单元素

最新推荐文章于 2021-06-29 00:58:55 发布

时间解

最新推荐文章于 2021-06-29 00:58:55 发布

阅读量768

点赞数

分类专栏： HTML 文章标签： html5 datalist keygen output

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML5的新表单元素

HTML5 拥有若干涉及表单的元素和属性。

datalist
keygen
output

浏览器支持

Input type	IE	Firefox	Opera	Chrome	Safari
datalist	No	No	9.5	No	No
keygen	No	No	10.5	3.0	No
output	No	No	9.5	No	No

datalist元素

datalist 元素规定输入域的选项列表。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Webpage: <input type="url" list="url_list" name="link" />    <!-- 绑定datalist元素 -->
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />

</form>

</body>
</html>

提示：option 元素永远都要设置 value 属性。

keygen元素

keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Username:   <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
            <input type="submit" />

</form>

</body>
</html>

output元素

output 元素用于不同类型的输出，比如计算或脚本输出：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
    numA=document.getElementById("num_a").value;
    numB=document.getElementById("num_b").value;
    document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>

<body>

<p>使用 output 元素的简易计算器：</p>
<form onsubmit="return false">
 <input id="num_a" /> +
 <input id="num_b" /> =
 <output id="result" onforminput="resCalc()"></output>
</form>

</body>
</html>