Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

HTML Login Page for beginner Sample | RRTutors

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

 



Also Check GrabItJob



161 Views

Author: GrabItJob