详解:17 :valid :invalid

2020-10-28 12:20:40 浏览数 (1)

核心:这里记住了哈,作用的可是type=“email”

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="email"]:valid
        {
            color: red;
        }
        input[type="email"]:invalid
        {
            background-color: yellow;
        }
        
    </style>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" id="" placeholder="请输入" required="required" ><br>
        密码:<input type="password" name="password" id="" required="required" placeholder="你输入"><br>
        邮箱:<input type="text" name="email" id="" required="required"  placeholder="请输入"><br>
        年龄:<input type="text" name="age" id="" placeholder="输入"><br>
        性别:<input type="radio" name="sex" id="" value="1">男
        <input type="radio" name="sex" id="" value="2">女
        <input type="radio" name="sex" id="" value="3" checked="checked">保密<br>
        兴趣爱好:
        <input type="checkbox" name="fav[]" id="" value="1" checked="checked" />PHP
        <input type="checkbox" name="fav[]" id="" value="2" checked="checked" />PHP
        <br>    
        <input type="email" placeholder="aa">
        <input type="submit" name="" value="reg">
    </form>
</body>
</html>

核心:如果 input 元素中输入的值为合法的,设置其为黄色:,否则呢,前面加一个in,记住了,大多数的选择器如果no前面都是in

0 人点赞