Login Form with Icon using HTML and CSS
by Letscode - November 29,2023
typeing-text

Q: How do I add an icon to my login page?

A: After reading and watching the following article and tutorial, you will able to create a login form or page with the icon in the input field.

Hello readers, today in this blog I’m going to create a login form with an icon using HTML and CSS. In an earlier blog, I have shared How to Create a Responsive Sign Up Form, and now let’s get into the login form.

What is Login Form or Page?

In the easiest way, we can say, login form means is an entry form where users need to enter their identification (phone number or email address and password ) to enter in the particular webpage. All users have their unique email address or phone and password.

How do you put an icon in Input Field?

Following are the CSS code to put icons inside the input files and remember that the input field should be relative.

  • position: absolute;
  • top: 50%;
  • left: 10px;
  • transform: translateY(-50%);

Login Form with Icon using HTML and CSS | Free Source Code

To paste the given codes of this Login Form with Icon, you need to create two files, one is an HTML file and another is a CSS file. After creating these two files you can copy-paste the given codes in your file. Click on the following download button to download source code files.

HTML
                                              
<!DOCTYPE html>
<!-- Created By Letscodeweb-->
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title> Login Form | Letscodeweb </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>

<body>
    <div class="main_div">
        <div class="title">Login Form</div>
        <div class="social_icons">
            <a href="#"><i class="fab fa-facebook-f"></i> <span>Facebook</span></a>
            <a href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a>
        </div>
        <form action="#">
            <div class="input_box">
                <input type="text" placeholder="Email or Phone" required>
                <div class="icon"><i class="fas fa-user"></i></div>
            </div>
            <div class="input_box">
                <input type="password" placeholder="Password" required>
                <div class="icon"><i class="fas fa-lock"></i></div>
            </div>
            <div class="option_div">
                <div class="check_box">
                    <input type="checkbox">
                    <span>Remember me</span>
                </div>
                <div class="forget_div">
                    <a href="#">Forgot password?</a>
                </div>
            </div>
            <div class="input_box button">
                <input type="submit" value="Login">
            </div>
            <div class="sign_up">
                Not a member? <a href="#">Signup now</a>
            </div>
        </form>
    </div>

</body>

</html>
CSS
                                              
/* Coding by Letscode */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    display: grid;
    height: 100vh;
    place-items: center;
    background: #be2edd;
}

.main_div {
    width: 365px;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.main_div .title {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}

.main_div .social_icons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.social_icons a {
    display: block;
    height: 45px;
    width: 100%;
    line-height: 45px;
    text-align: center;
    border-radius: 5px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s linear;
}

.social_icons a span {
    margin-left: 5px;
    font-size: 18px;
}

.social_icons a:first-child {
    margin-right: 5px;
    background: #4267B2;
}

.social_icons a:first-child:hover {
    background: #375695;
}

.social_icons a:last-child {
    margin-left: 5px;
    background: #1DA1F2;
}

.social_icons a:last-child:hover {
    background: #0d8bd9;
}

form {
    margin-top: 25px;
}

form .input_box {
    height: 50px;
    width: 100%;
    position: relative;
    margin-top: 15px;
}

.input_box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding-left: 45px;
    font-size: 17px;
    transition: all 0.3s ease;
}

.input_box input:focus {
    border-color: #be2edd;
}

.input_box .icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: grey;
}

form .option_div {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}

.option_div .check_box {
    display: flex;
    align-items: center;
}

.option_div span {
    margin-left: 5px;
    font-size: 16px;
    color: #333;
}

.option_div .forget_div a {
    font-size: 16px;
    color: #be2edd;
}

.button input {
    padding-left: 0;
    background: #be2edd;
    color: #fff;
    border: none;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s linear;
}

.button input:hover {
    background: #a720c5;
}

form .sign_up {
    text-align: center;
    margin-top: 25px;
}

.sign_up a {
    color: #be2edd;
}

form a {
    text-decoration: none;
}

form a:hover {
    text-decoration: underline;
}

If you face any difficulties while creating your Login Form or your code is not working as expected, you can download the source code files for this Login Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Buy Me A Coffee

Most Popular

Recent Posts

  1. Image Slider in HTML CSS and JavaScript

    Letscode - October 4,2023

  2. Facebook Login Page Using HTML & CSS

    Letscode - October 10,2023

  3. Amazon Website clone in HTML & CSS

    Letscode - November 4,2023

  4. Custom Captcha Generator in HTML CSS and JS

    Letscode - October 24,2023