HTML Login Page for beginner Sample | RRTutors

Simple HTML Login Page Example for Beginners. Login Page contains UserName, Password, Forgot Password and Create account. RRTutors

Published January 21, 2021

In this Example we will create Simple HTML Login Page.

This Login Page contains

  • User Name
  • Password
  • Forgot Password
  • Create Account Fileds

 

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Links Examples</title>
<style>
.login  {
    border-radius: 20px;
    
    margin: auto;
    font-family: cursive;
    text-align: center;
    /*border: 5px solid DodgerBlue;*/
    padding: 25px;
    background-color: #f2f2f2;
    margin-top: 10%;
    width: 340px;
    }  
body  {
    background-color: #48d45d;
    }        
    
</style>        
</head>
<body>
<div class="login">
<form>
    <table>
    <tr>
      <td><label for="fname" style="font-size: 25px;">Username </label></td>
      <td><input type="text" id="fname" name="fname" placeholder="Your name "style="height: 28px;width: 200px;"></td><br>
    </tr>
    <tr>
      <td><label for="pwd" style="font-size: 25px;"> Password </label></td>
      <td><input type="text" id="pwd" name="pwd" placeholder="Your password"style="height: 28px; width: 200px;"></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value=" Log In " style="font-size: 25px;
           width: 208px;background-color: lightforestgreen;"></td>
    </tr>
    <tr>
        <td></td>
        <td><a href="#" style="font-size: 25px">Forgot Password</a></td>    
    </tr>    
    </table>
    <hr>    
       <td><input type="submit" value=" Create Account " style="font-size: 25px;
           width: 208px;background-color: lightforestgreen;"></td>
    </div>
</form>        
</body>
</html>

 

Html Login Page

 

Related Tutorials & Resources

Html Button Link - How do i make html button with link

Hide Password HTML (Hide and Show Password using Javascript)

What is the difference between Cache and Cookie?

What is the difference between HyperText and HyperLink

CSS - How do i make circular loading in HTML

HTML Login Page for beginner Sample | RRTutors