Ad

How to create Login form

 


Creating Sample Login Form Using HTML

 Login Form


login form




  1]   What is login form?

 

Almost every website and application uses login credentials. The login form uses the user's credentials to verify access rights. It usually consists of a username or email and a password. However, you can add more fields to make your site more secure.

  

  2]  What is login ID & password?

An access certificate is a unique identifier (such as a username and password) that allows a user to identify themselves and log in to an online account. Failure to use secure passwords can render network security software and tools such as firewalls and VPNs ineffective.

Example 

Source CODE

Login form



<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<title> Login Page </title>  
<style>  
Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color:;  
}  
button {  
       background-color: #4CAF50;  
       width: 100%;  
        color: blue;  
        padding: 15px;  
        margin: 10px 0px;  
        border: none;  
        cursor: pointer;  
         }  
 form {  
        border: 3px solid #f1f1f1;  
    }  
 input[type=text], input[type=password] {  
        width: 100%;  
        margin: 8px 0;  
        padding: 12px 20px;  
        display: inline-block;  
        border: 2px solid violet;   ;  
        box-sizing: border-box;  
    }  
 button:hover {  
        opacity: 0.7;  
    }  
  .cancelbtn {  
        width: auto;  
        padding: 10px 18px;  
        margin: 10px 5px;  
    }  
       
     
 .container {  
        padding: 25px;  
        background-color: lightblue;  
    }  
</style>  
</head>    
<body>    
    <center> <h1> Login Form </h1> </center>  
    <form>  
        <div class="container">  
            <label>Username : </label>  
            <input type="text" placeholder="Enter Username" name="username" required>  
            <label>Password : </label>  
            <input type="password" placeholder="Enter Password" name="password" required>  
            <button type="submit"><b>Login</b></button>  
            <input type="checkbox" checked="checked"> Remember me  
            <button type="button" class="cancelbtn"> Cancel</button>  
            Forgot <a href="#"> password? </a>  
        </div>  
    </form>
    </body>
    </html>

Related Post 
👇👇👌👍

features of javascript

php program print square number pattern

No comments

Powered by Blogger.