伪类表单控件

原创2019-09-04 10:30:4914
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>伪类表单控件</title>    <link rel="stylesheet" href=&

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>伪类表单控件</title>

    <link rel="stylesheet" href="static/CSS/style4.css">

</head>

<style>div {

    width: 500px;

    height: 400px;

    border: 1px solid ;

    /*background-color: lightgreen;*/

    /*text-align: center;*/

    margin-left: 20px;

    padding-left: 20px;

}

#verdfiy {

   width: 74px;

}


/*表单可用区域背景设置*/

form :enabled {

    background-color: lightblue;

}

/*选中项目字体颜色设置*/

form :checked + label {

    color: red;

}

/*表格内填写数据有效性,未测试*/

form :invalid {

    color: red;

}

/*焦点区域格式*/

form :focus {

    background-color: yellow;

}

/*使用属性选择器进行选择对应按钮再进行样式选择*/

button[name="sbm"]:hover {

    width: 60px;

    height: 25px;

    background-color: black;

    color: white;

}

</style>

<body>


    <h1>注册/登录</h1>

    <hr>

    <div>

    <form action="" method="post">


    <p>

        <label for="username">姓名:</label>

        <input type="text" id="username"  placeholder="手机号/邮箱">

    </p>

    <p>

        <label for="username">密码:</label>

        <input type="password" id="password" placeholder="字母和数字不低于8位" autocomplete="new-password">

    </p>

        <p>

            <label for="verdfiy">验证码:</label>

            <input type="text" id="verdfiy">  <button type="button">点击发送</button>

        </p>

     <p>

         <label >保存时间</label>

         <input type="radio" name="limit" value="week" id="week" ><label for="week" >一周</label>

         <input type="radio" name="limit" value="month" id="month"><label for="month" >一个月</label>

     </p>


    <button type="submit" name="sbm">登录</button>

    <button type="reset">重置</button>

</form>

    </div>

</body>

</html>


批改老师:欧阳克批改时间:2019-09-05 14:37:20
老师总结:完成的不错。css样式学好,做出来的页面很绚丽。继续加油。

发布手记

热门词条