HTML 5 表单元素

来源:互联网 发布:2016淘宝618抢红包 编辑:程序博客网 时间:2024/04/30 13:57
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form action="test.asp" method="get" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <p>datalist 元素规定输入域的选项列表.列表是通过 datalist 内的 option 元素创建的.如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id.</p>
        <p style="color:red">提示:option 元素永远都要设置 value 属性。</p>
        <input type="url" list="url_list" name="link" oninput="showdatalistUrl(this.value)" />
        <datalist id="url_list">
            <option label="W3School" value="http://www.w3school.com.cn" />
            <option label="Baidu" value="http://www.baidu.com" />
            <option label="Microsoft" value="http://www.microsoft.com" />
        </datalist>
        <span id="urlInfo"></span>
        <br />
        <p>select 标签学习兼比较</p>
        <select id="selectUrl" oninput="showSelectedUrl(this.value)">
            <option label="W3School" value="http://www.w3school.com.cn" />
            <option label="Baidu" value="http://www.baidu.com" />
            <option label="Microsoft" value="http://www.microsoft.com" />
        </select>
        <span id="selectUrlInfo"></span><br />
        <p>keygen 元素的作用是提供一种验证用户的可靠方法.</p>
        <p>keygen 元素是密钥对生成器(key-pair generator).当提交表单时,会生成两个键,一个是私钥,一个公钥.</p>
        <p>私钥(private key)存储于客户端,公钥(public key)则被发送到服务器.公钥可用于之后验证用户的客户端证书(client certificate).</p>
        <p style="color:red">目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。</p>
        Username: <input type="text" name="usr_name" />
        Encryption: <keygen name="security" /> <br />
        <input type="submit" /><br />
        <p>output标签定义不同类型的输出,比如脚本的输出.</p>
        0
        <input type="range" id="a" value="50">100
        +<input type="number" id="b" value="50">
        =<output name="x" for="a b"></output>
    </form>
</body>
</html>
<script type="text/javascript">
    function showdatalistUrl(pValue) {
        document.getElementById("urlInfo").innerHTML = pValue;
    }
    function showSelectedUrl(pValue) {
        document.getElementById("selectUrlInfo").innerHTML = pValue;
    }


</script>

0 0
原创粉丝点击