HTML5学习(6) 表单元素

最新推荐文章于 2025-07-10 18:05:30 发布

原创最新推荐文章于 2025-07-10 18:05:30 发布 · 861 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #encryption #microsoft #input #output #list

HTML5 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了HTML5中的一些新特性，包括选项表单datalist、数据加密的keygen元素及output元素的应用实例。通过这些特性，网页可以实现更丰富的交互效果，并提供更好的用户体验。

<!DOCTYPE HTML>
<body>
    <!--选项表单 datalist-->
    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="Baidu" value="http://www.baidu.com" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <!-- 数据加密 -->
    <form action="demo_form.asp" method="get">
    Username: <input type="text" name="usr_name" />
    Encryption: <keygen name="security" />
    </form>
    <!--output-->
    <p>使用 output 元素的简易计算器：</p>
    <form onsubmit="return false">
     <input id="num_a" /> +
     <input id="num_b" /> =
     <output id="result" onforminput="resCalc()"></output>
    </form>
    <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>
</body>