HTML5 Login Form




  • The Login form is used to login into a web page with username and password credential. We can see many websites have its own login forms.
  • Let’s we see a simple login form with a responsive design.

Sample coding for Login Form

Tryit<!DOCTYPE html>
<html>
   <head>
        <title> Wikitechy Login Form</title>
         <link rel="stylesheet" type="text/css" href="login-style.css">
   </head>
    <body class="form container">
        <h2>HTML5 Login Form</h2>
        <label><b>Username</b></label>
        <input type="text" name="uname" required>
        <label><b>Password</b></label>
        <input type="password" name="psw" required> 
        <button type="submit">Login</button>     
    </body>
</html>

Code Explanation for Login Form

code explanation for Login Form

  1. The External CSS style sheet file login-style.css will be linked for apply styles to the Login Form.
  2. The form design for Login Page.
  3. The input box for get input from the user for Username.
  4. The input box for get input from the user for Password.
  5. The Submit button to submit the Login form.

Sample coding for Login Form login-style.css

Tryit
    input[type=text], input[type=password] 
    {
     width: 100%;
     padding: 12px 20px;
     margin: 8px 0;
     display: inline-block;
     border: 1px solid #ccc;
     box-sizing: border-box;
    }
    button 
    {
     background-color: #3333ff;
     color: white;
     padding: 14px 20px;
     margin: 8px 0;
     cursor: pointer;
     width: 100%;
    }
    .form 
    {
     background-color: #fefefe;
     margin: 5% auto 15% auto; 
     padding: 16px;
     border: 1px solid #888;
     width: 80%;
     -webkit-animation: animatezoom 0.6s;
    }
    @keyframes animatezoom 
    {
     from {transform: scale(0)}     
    }


  

Code Explanation for Login Form login-style.css

Output for Login Form login-style.css

  1. The CSS styles to design input box for username and password.
  2. The CSS styles to design submit button.
  3. The CSS styles to design Login form with animated effect.

Output for Login Form

Output for Login Form login-style.css

  1. Login form have been created and displayed with zoom effect
Output for Login Form login-style.css

  1. The User can give input and submit the login form.

Browser Support for Login Form

Yes Yes Yes Yes Yes

Related Searches to login form in html with css source code