Unable to load the content

Please attempt to reload the page or alternatively, try accessing it using a different browser.

A Guide to build a Top-notch Legend Login Form using HTML CSS and JS

bySmart UI Studio Published:

In the realm of web design, a well-crafted login form is like a welcoming front door to your digital world. In this tutorial, we'll dissect and understand the structure of a stylish login form built with HTML, CSS and JavaScript. Let's embark on this journey to create an aesthetically pleasing and user-friendly login interface.

Must Read: Interactive Quiz Web App using HTML CSS JS Project | With Levels

A-Guide-to-build-a-Top-notch-Legend-Login-Form-using-HTML-CSS-JS

Below is the Code Snippet for HTML Code.

<div class="main-container centered-flex">
        <div class="form-container">
            <div class="icon fa fa-user"></div>
            <form class="centered-flex">
                <div class="title">LOGIN</div>
                <div class="msg"></div>
                <div class="field">
                    <input type="text" placeholder="Username" id="uname">
                    <span class="fa fa-user"></span>
                </div>
                <div class="field">
                    <input type="password" placeholder="Password" id="pass">
                    <span class="fa fa-lock"></span>
                </div>
                <div class="action centered-flex">
                    <label for="remember" class="centered-flex">
                        <input type="checkbox" id="remember"> Remember me
                    </label>
                    <a href="#">Forget Password ?</a>
                </div>
                <div class="btn-container">
                    <input type="submit" id="login-btn" value="Login">
                </div>
                <div class="signup">Don't have an Account?<a href="#"> Sign up</a></div>
            </form>
        </div>
</div>

At the core of our login form is a <div> element with the class "main-container." This element acts as the container for our form, ensuring it's centered on the web page. We've applied the "centered-flex" class to achieve this.

Within this container, the login form is nested inside a <div> with the class "form-container." This inner container encapsulates all the form elements and ensures a visually pleasing arrangement.

User Icon: Right at the top of our form, we've included a user icon for a personalized touch. It's wrapped in a <div> with the "icon" class, and we've used the popular FontAwesome icon library by utilizing the "fa fa-user" class.

Form Title: Just below the user icon, the "LOGIN" title elegantly welcomes users to the form. This is enclosed within a <div> with the "title" class, providing a distinct style.

Read More: Realistic Dual Clock using HTML CSS and JS

Form Elements:

  • Username Field: We've created a text input field for the username, complete with a placeholder attribute for guidance. The accompanying icon on the right, represented by the "fa fa-user" class, adds a touch of sophistication.
  • Password Field: Similarly, the password input field is crafted for security, accompanied by a lock icon with the "fa fa-lock" class.
  • Remember Me Checkbox: The "Remember me" checkbox is thoughtfully designed with a corresponding label, enhancing the user experience. When users click the label, it toggles the checkbox.
  • Forgot Password Link: A "Forget Password ?" link offers a quick route for users to reset their passwords if needed.
  • Login Button: The login button, clearly labeled "Login," awaits user interaction. Its placement is within a <div> element with the "btn-container" class.
  • Sign-Up Link: Finally, for those who are new to the platform, a "Don't have an Account?" link invites users to register. It's stylized with a link to the sign-up page.

Below is the code snippet for CSS code. 

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

.main-container {
    min-height: 100vh;
    min-width: 450px;
    font-family: 'calibri';
}

.centered-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    width: 400px;
    height: 480px;
    display: grid;
    position: relative;
}

.icon {
    position: absolute;
    width: 85px;
    font-size: 50px;
    display: grid;
    height: 85px;
    place-content: center;
    border: 1px solid #2a2a2a;
    z-index: 1;
    justify-self: center;
    border-radius: 50%;
    background: #0e0e0e;
}

.fa {
    color: #a2a2a2;
}

form {
    flex-direction: column;
    padding: 25px 25px 10px;
    height: 440px;
    border-radius: 30px;
    background: rgba(19, 19, 19, 0.736);
    border: 1px solid rgba(255, 255, 255, 0.097);
    position: absolute;
    width: 100%;
    bottom: 0;
}

.title {
    position: relative;
    margin: 40px 0;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.msg {
    color: #fa2929;
    position: absolute;
    top: 25%;
}

.field {
    display: flex;
    position: relative;
    width: 100%;
}

.field .fa {
    position: absolute;
    font-size: 14px;
    right: 10px;
    bottom: 10px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px rgb(14 14 14) inset;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #bababa !important;
}

form input {
    display: block;
    outline: none;
    width: 100%;
    border: none;
    font-size: 16px;
    color: #d2d2d2;
    margin: 25px 0 5px;
    caret-color: #cccccc;
    background: transparent;
    padding: 10px 25px 3px 0;
    border-bottom: 1px solid #404040;
}

.action {
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
}

.action label {
    cursor: pointer;
    color: #7d7d7d;
}

.action input {
    width: auto;
    margin: 0 8px 0 0;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #9b9b9b;
}

.btn-container {
    padding: 20px;
    transition: .2s linear;
}

#login-btn {
    padding: 5px 20px;
    border: none;
    background: rgb(25, 62, 97);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 15px;
    transition: .3s;
    margin: 25px 0;
}

#login-btn:hover {
    cursor: pointer;
}

.signup {
    color: rgb(70, 70, 70);
    margin-top: 10px;
}

.shift-left {
    transform: translateX(-120%);
}

.shift-right {
    transform: translateX(120%);
}

.shift-top {
    transform: translateY(-150%);
}

.shift-bottom {
    transform: translateY(150%);
}

.no-shift {
    transform: translate(0%, 0%);
}

Universal Reset Styles:

  • The CSS code begins with a universal reset for margin, padding, font-family, and box-sizing. This ensures consistent styling across different elements.
  • The background of the entire page is set to black (#000000), creating a dark theme.
  • The font family "calibri" is applied to text throughout the page.

Main and Form Container:

  • The "main-container" is set to occupy 100% of the viewport height (100vh) with a minimum width of 400px.
  • The "centered-flex" class is defined for creating centered flexbox layouts. It's used for aligning content vertically and horizontally.
  • The "form-container" class styles the login form container with a width of 400px and a rounded border. It has a translucent dark background with a subtle border.
  • An icon is positioned absolutely inside the form container. It's circular, sized at 85x85 pixels, and has a border and background color.
  • Icons from FontAwesome ("fa fa-user" and "fa fa-lock") are styled with a specific font size and color.

Form Container:

  • The form title ("LOGIN") is styled with a bold font, a white color, and positioned appropriately.
  • The form itself is styled with padding, a dark background, and a relative position.
  • The error message is styled with a red color ("#fa2929") and positioned absolutely near the top.
  • Text input fields are styled with a borderless, transparent background, and a bottom border. They have a placeholder style and a subtle caret color.
  • Autofill styles are applied to input fields, changing the background color on autofill to maintain the dark theme.
  • The action section includes the "Remember me" checkbox and the "Forgot Password ?" link. These are styled with appropriate spacing and cursor styles.
  • Links are styled with no underlines and a light gray color.
  • The button container has padding and a transition effect.
  • The "Login" button is styled with padding, background color, and text color. It has a hover effect to indicate interactivity.
  • The "Don't have an Account?" link is styled with a distinct color and margin.
  • There are several shift classes that can be used to apply different transform translations, enabling animation or positioning effects.

Below is the code snippet for JavaScript code.

const uname = document.querySelector('#uname');
const pass = document.querySelector('#pass');
const btnContainer = document.querySelector('.btn-container');
const btn = document.querySelector('#login-btn');
const form = document.querySelector('form');
const msg = document.querySelector('.msg');
btn.disabled = true;

function shiftButton() {
    showMsg();
    const positions = ['shift-left', 'shift-top', 'shift-right', 'shift-bottom'];
    const currentPosition = positions.find(dir => btn.classList.contains(dir));
    const nextPosition = positions[(positions.indexOf(currentPosition) + 1) % positions.length];
    btn.classList.remove(currentPosition);
    btn.classList.add(nextPosition);
}

function showMsg() {
    const isEmpty = uname.value === '' || pass.value === '';
    btn.classList.toggle('no-shift', !isEmpty);

    if (isEmpty) {
        btn.disabled = true
        msg.style.color = 'rgb(218 49 49)';
        msg.innerText = 'Please fill the input fields before proceeding';
    } else {
        msg.innerText = 'Great! Now you can proceed';
        msg.style.color = '#92ff92';
        btn.disabled = false;
        btn.classList.add('no-shift')
    }
}

btnContainer.addEventListener('mouseover', shiftButton);
btn.addEventListener('mouseover', shiftButton);
form.addEventListener('input', showMsg)
btn.addEventListener('touchstart', shiftButton);

Input Selection: The code begins by selecting the uname (username input), pass (password input), btn (login button), btnContainer, form, and msg (message container) elements from the HTML.

Initial Button State: The login button (btn) is initially disabled by setting its disabled property to true.

shiftButton Function:

This function is responsible for shifting the button's position and showing a message when certain events occur. It's used for button animations and user feedback.

  • When triggered, it checks the button's current position among four possible positions: 'shift-left', 'shift-top', 'shift-right', and 'shift-bottom'.
  • It then determines the next position in the sequence and updates the button's CSS classes accordingly.
  • showMsg Function: This function is called to show a message based on user input and control the button's state.
  • It checks whether the username or password inputs are empty and updates the message and button accordingly.
  • If both inputs are filled, it displays a positive message and enables the button for login.
  • If either input is empty, it shows a message prompting the user to fill in the required fields and disables the button.
  • The message's color and content change based on input status.

Event Listeners:

  • The mouseover event on the button and button container (btn and btnContainer) triggers the shiftButton function, creating a visual effect when the user hovers over these elements.
  • The touchstart event on the button triggers the shiftButton function, providing a similar visual effect on touch devices.
  • The input event on the form triggers the showMsg function, dynamically updating the message and button state as the user types in the input fields.

In the exploration of crafting a stylish login form with HTML, CSS, and JavaScript, we've uncovered the foundational elements that lay the groundwork for an exceptional user experience.

By now, your login form boasts not only an eye-catching appearance but also functional elements that facilitate a seamless user journey. The combination of HTML's structural prowess, CSS's aesthetic finesse, and JavaScript's interactive capabilities has transformed a mere form into a captivating gateway to your digital realm.

In future posts, we'll explore advanced techniques to take your login form to the next level. Stay tuned for more insights on perfecting your web design skills. Thank you for joining us on this journey of blending style and functionality. We look forward to sharing more web design wisdom with you soon.

Download
Tags:

You might like

Previous Post Next Post
Share to other apps
Copy Post Link