HTML5学习(6) 表单元素

Symbol

于 2012-08-20 16:03:19 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 encryption microsoft input output list

本文链接：https://blog.youkuaiyun.com/wcf_szkingdom/article/details/7887029

HTML5 专栏收录该内容

18 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>