Create a Stylish Login Form Using HTML and CSS

In this tutorial, you will learn how to create a stylish login form using only HTML and CSS. This guide is perfect for beginners and includes step-by-step instructions.

You can find all resources mentioned in the video at the end of this blog post, making it easy to follow along.

– 100% Free

Set Up the Project

Create a new folder with an HTML file and a CSS file. Open the project in Visual Studio Code (VS Code). If you’re using VS Code for the first time, check out this setup guide for extensions and other tools you’ll need.

Basic HTML Structure

Start by setting up a basic HTML structure, linking the CSS file. Use VS Code’s “Live Server” extension to view your changes in real-time in the browser.

Creating the Form Structure

1. Inside the HTML file, create a <div> with a class wrapper. This will contain the form elements. Add the form tag with a method="post" attribute (since the form is not submitting data, this can remain empty). Add an <h1> for the heading titled “Login”.
2. Duplicate the input-box div for the password field, changing the input type to password and the placeholder to “Password”.
3. Mark the fields as required to ensure the user inputs data before submitting the form.

Adding ‘Remember Me’ and ‘Forgot Password’ Options

Create another <div> with class remember-forgot. Add a label and an input type checkbox for the “Remember Me” option. Add a link for “Forgot Password” with a placeholder href="#".

Adding a Login Button and Registration Link

Add a submit button with the text “Login” to submit the form. Below the form, create a register-link class to display a message like “Don’t have an account?” along with a registration link.

Adding Icons

To add icons inside the input fields, use Boxicons. Add the link for Boxicons to your HTML file, then insert user and lock icons in the input fields.

CSS Styling

Style the form using Flexbox to center it. Set a background color (e.g., sea green) and size the form to 420px.

For the input fields, style them to have a transparent border with 20% opacity, giving a modern, sleek look.

Move the icons inside the input fields using position: relative and adjust padding for better alignment.

Style the placeholder text in white, increase input text size, and set the background of the form to purple with white text.

Final Touches

Style the “Remember Me” and “Forgot Password” options by spacing them apart and adding an underline effect on hover. Now you have a fully functional, stylish login form with sleek input fields and a responsive design. You can preview the form to ensure everything looks perfect!