html5中新增的表单控件 input datalist

最新推荐文章于 2024-04-26 09:40:19 发布

533_

最新推荐文章于 2024-04-26 09:40:19 发布

阅读量451

点赞数

本文链接：https://blog.csdn.net/qq_14993591/article/details/118254430

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="POST">
        <p>
            颜色选择:
            <input type="color">
        </p>
        <p>
            日期选择:
            <input type="date">
        </p>
        <p>
            时间选择:
            <input type="time">
        </p>
        <p>
            颜色选择:
            <input type="email">
        </p>

        <p>
            必填:
            <input type="text" required>
        </p>
        <p>
            数字:
            <input type="number" max="30" min="10">
        </p>
        <p>
            数字拖拽:
            <input type="range" max="30" min="10">
        </p>
        <p>
            搜索:
            <input type="search">
        </p>
        <p>
            url:
            <input type="url">
        </p>
        <p>
            <input type="submit" value="提交表单">
        </p>
    </form>

</body>
</html>

效果：
在这里插入图片描述

        <p>
            省份：
            <input type="text" list="province-list">
            <datalist id="province-list">
                <option value="山西">
                <option value="辽宁">
                <option value="山东">
                <option value="广西">

            </datalist>
        </p>
        <p>
            <input type="submit" value="提交表单">
        </p>

在这里插入图片描述

533_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5中新增的表单控件 input datalist

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form act.
复制链接

扫一扫