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

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>