• map-iconQatar
  • email-iconinfo@sugaiinstitute.com

YouTube : Sugai Institute

How to create Login Form using HTML ans CSS

How to create Login Form using HTML ans CSS

  • Teacher
    Gayathri Sudhakar
  • Category
  • Views

Login Form using HTML and CSS

SimpleLogin Form with font awesome icon using HTML and CSS

Note:Watch my video for detailed explanation in Tamil

Login Form using HTML and CSS

(Use Ctrl+c to copy this coding)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Login Form</title>
<style> form{ width:400px; height:500px; background-color:#eb83c6; box-shadow:5px 5px 10px; border-radius:5px; margin:2% auto; padding:20px; } .input_box { width:250px; height:49px; padding:15px; border-radius:0px 5px 5px 0px; border:none; margin-left:-4px; } .form_icon { background-color:white; Padding:14px; border-radius:5px 0px 0px 5px; padding-bottom:17px; } .form_icon_right { background-color:white; Padding:14px; border-radius:0px 5px 5px 0px; padding-bottom:17px; margin-left:-4px; } .log_in { color:black; width: 300px; height: 50px; padding: 0 20px; border-radius: 5px; outline: none; border: none; cursor: pointer; text-align: center; } .sign_up { background: #B8F2E6; padding:10px; border-radius:5px; border:none; cursor:pointer; } </style>
<h2 style="text-align:center;">Log In</h2>
<p style="text-align:center;">Login here using Username and Password</p>
<span class="form_icon"><i class="fa fa-user-circle" aria-hidden="true"></i></span>
<input type="text" class="input_box" placeholder="Enter Username" required>
<br><br> <span class="form_icon"><i class="fa fa-key" aria-hidden="true"></i></span>
<input style="border-radius:0px 0px 0px 0px;width:210px;" type="password" class="input_box" placeholder="Enter Passord" required>
<span class="form_icon_right"> <i class="fa fa-eye" aria-hidden="true"></i></span>
<br> <br>
<button class="log_in"> Log In </button>
<button class="sign_up">Sign Up
<i class="fa fa-user-plus" aria-hidden="true"></i>
</form> </div> </body> </html>

Click output to view the output of the coding

  • Reviews
    07-08-2022 12:39:39

    hai mam.how to insert fogot password in this form mam.will u explain me mam pls

Leave A Comment

Other Playlist

  • HTML : 7 Classes
  • CSS : 8 Classes
  • HTML Questions : 2 Videos
Free Courses Watch Now