index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
    .login{
            background-color: rgba(255, 155, 4, 0.781);
            box-shadow: 0px 10px 20px 0px rgb(2, 255, 179);
            width: 50%;
            height: 100%;
        }
        #body{
            background-color: bisque;
        }
        #btn1{
         background-color: red;
        }
        #btn2{
            background-color: green;
        }
        #btn3{
            background-color: yellow;
            
        }

        #btn1:hover{
            background-color: blueviolet;
            color: white;
        }
        #btn2:hover{
            background-color: blueviolet;
            color: white;
        }
        #btn3:hover{
            background-color: blueviolet;
            color: white;
        }
       
    </style>
</head>
<body id="body">
   <center> <h2> <mark> Login Form </mark> </h2> </center>
    <center>  <form action="user.html" method="post" enctype="multipart/form-data" class="form" >
        <fieldset class="login"  >
            <legend> Login </legend>
            <label for="Id "> User ID </label> <br> <br>
            <input type="text" name="" id=""> <br> <br>
            <label for=""> Enter Your Password </label> <br> <br>
            <input type="password"> <br> <br>
            <button type="reset" id="btn1"> Reset </button>
            <button type="submit" id="btn2"> Log In </button>
            <button type="menu" id="btn3" > Forgot password</button>
           <br>
           <br>
           <p> <mark id="mark" style="background-color: rgb(255, 0, 221);"> <a href="FormTag.html"> Signup here </a>  </mark> </p>
            

        </fieldset>
    </form>
</center>
    
</body>
</html>