• 技术文章 >web前端 >前端问答

    html5中新增加的表单元素有哪些

    青灯夜游青灯夜游2022-04-25 11:54:02原创326

    html5中新增加了3个表单元素:1、datalist元素,用于为input设置下拉列表,里面的选项是预先定义好的,将作为用户的输入数据;2、keygen元素,可规定用于表单的密钥对生成器字段;3、output元素,用于将计算结果输出显示。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    HTML5中新增了三个表单元素:datalist、keygen、output。

    1、datalist元素

    <datalist> 标签规定了 <input> 元素可能的选项列表。

    <datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

    这里注意datalist元素要写id,与input表单元素的 list属性创建联系

    例1:

    在这里插入图片描述

    在页面上显示如下:

    在这里插入图片描述

    例2:

    在这里插入图片描述

    在页面上显示如下:

    在这里插入图片描述

    假如想要输入的是网址,需要注意value值必须添加http://

    例3

    在这里插入图片描述

    这里的datalist元素在火狐浏览器上是没有下拉列表的,要注意!

    以及datalist的子元素option元素可以写成单标签的格式 :eg:<option value=“英语” label=“棒”/>

    2、keygen元素

    <keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

    实例

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
        <p style="color:#FF0000">
            掌握fieldset/legend元素的用法(和figure和figcaption很像,只不过是作用于表单)
        </p>
        <form action="L3_01.html" method="get" >
            <fieldset>
            <legend>用户注册</legend>
                用户名:<input type="text" name="name"><br>
                密码:<input type="password" name="password">
                <br><input type="submit" value="确定">
            </fieldset><br>
    
            keygen元素用法:<br>
            加密:<keygen name="mykey"><br>
            <br><input type="submit" value="确定">
        </form>
    <body>
    </body>
    </html>

    3、output元素

    <output> 标签作为计算结果输出显示(比如执行脚本的输出)。

    output标签语法格式

    <output name="名称" for="element_id">默认内容</output>

    说明:output标签中的内容为默认显示内容,它会随着相关元素的改变而变化。

    output标签属性

    实例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>html中output标签详细介绍</title>
    </head>
     
    <body style="background-color: bisque;">
        <h4>output标签演示:</h4>
        <h5>加法计算器</h5>
        <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
            <input type="number" id="a" value="0"> +
            <input type="number" id="b" value="0"> =
            <output name="x" for="a b">0</output>
        </form>
    </body>
    </html>

    1.gif

    通过上边的实例,相信大家也学会了output标签的用法,将其改为减法、乘法、除法等计算器也是轻而易举的事,有兴趣的朋友可以试试哟!

    【相关推荐:html视频教程web前端

    以上就是html5中新增加的表单元素有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5
    上一篇:html5的svg是什么 下一篇:html5中元素由哪三部分组成
    千万级数据并发解决方案

    相关文章推荐

    • html5标签的使用规则是什么• html5支持用表格吗• html5中的dom是什么• css3只能用在html5吗• 带你了解HTML5 SVG,看看怎么绘制自适应的菱形
    1/1

    PHP中文网