h5增强表单---数据列表和属性

最新推荐文章于 2024-03-25 18:03:47 发布

叶不休

最新推荐文章于 2024-03-25 18:03:47 发布

阅读量175

点赞数 2

分类专栏：前端文章标签： javascript 前端开发语言 html5 css chrome html

本文链接：https://blog.csdn.net/weixin_58694594/article/details/136988894

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

h5增强表单---数据列表

下拉列表

<!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>
    <input type="text" list="mylist">

    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手镯"></option>
    </datalist>
</body>
</html>

h5增强表单---属性

autofocus:获取焦点

required必填项，不能为空

pattern="[0-9][A-Z]{3}" 必须输入一个数字和三个大写字母

multiple，支持多个地址，用逗号隔开

<!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="">
        <div>
            用户名：<input type="text" autofocus required 
            pattern="[0-9][A-Z]{3}" placeholder="请输入一个数字和三个大写字母">
            <!-- autofocus:获取焦点 -->
            <!-- pattern="[0-9][A-Z]{3}"   必须输入一个数字和三个大写字母 -->
        </div>
        <div>
            邮箱：<input type="email" name="email" required multiple>

            <!-- required必填项，不能为空 -->
            <!-- multiple，支持多个地址，用逗号隔开 -->
        </div>
        <input type="submit">
    </form>
</body>
</html>