欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

html5中新增的表单元素

程序员文章站 2022-05-11 14:12:49
...

表单中创建下拉选框 方法一:

  • 采用常规的select和option创建
专业:<select name="" id="">
        <option value="1">java</option>
        <option value="2">c++</option>
        <option value="3">c#</option>
    </select>

html5中新增的表单元素


但是我们有时候的预想是:不仅可以选择,还可以输入。所以有另外一种方法


表单中创建下拉选框 方法二:

  • 通过datalist创建选择表
<!--需要建立输入框和选项框的关联 list="datalist的id号"-->
    专业:<input type="text" list="good"><br>
    <!--通过datalist创建选择列表-->
        <!--功能非常强大,但是不同的浏览器对其支持也是不一样的,日常使用中,比较少-->
    <datalist id="good">
        <!--创建选项值:value:具体的值;label:提示信息,辅助值-->
        <!--option可以是一个单标签也可以是一个双标签-->
        <option value="前端移动开发" label="better"></option>
        <option value="c++" label="better"></option>
        <option value="java" label="better"></option>
    </datalist>
    网址:<input type="url" list="urls"><br>
    <datalist id="urls">
<!--如果input输入框的type类型是url,那么value值必须添加HTTP://-->
        <option value="http://www.baidu.com"></option>
        <option value="http://www.163.com"></option>
        <option value="http://www.souhu.com"></option>
    </datalist>

html5中新增的表单元素


结束微语:如果你醒着,那么你就应当清醒;如果你睡着,那么你就应当当酣睡。如果你在做一件事情,就不应当再考虑其他事。如果你的手在这里,你的思想也应当同时在这里。如果开始行动,就不要迟疑!

相关标签: html5