Login page examples in html

Create A Login Page Form Using HTML And CSS — With Source Code

An integral part of any website is its login functionality. No matter what web technology you use, users go through the process of logging in to your website and interacting with the login page the most number of times.

Having a fancy responsive login page is a must these days as the demand for mobile web pages has far increased that of desktop ones.

Having a beautiful login page is essential. Users have to instantaneously like your login page to give that best first impression.

In today’s blog post, we will create a beautiful yet simple login web page using HTML and CSS only and I will also leave the source code so you can use it for your website.

What will our login page look like?

We will be building this simple yet beautiful login page by just writing some HTML and CSS.

This login page will be centered on the screen vertically and horizontally.

It will have two input text fields, username, and password.

It will also have a remember me checkbox, just if the developer wants to remember their login details.

Then there will be a full-width login button.

Users who don’t yet have a username and password on this website can go to the sign-up link. This will be provided just below the login button.

We will also have an option of signing in using social links like Facebook and Google.

Now that we know what we are building, let’s go ahead and understand how, step by step.

Login Page HTML Structure

I am using visual studio code as my code editor and I will start by creating two files in the folder.

After creating these two files, we will create the structure for our index.html page. We are using the Emmet extension inside visual studio code to create the basic structure for the HTML page.

This is what the HTML structure looks like.

I have linked my style.css fie in the link tag.

I am using Fontawesome Icons to add icons to my website. They are super simple to use and very versatile. They provide a brilliant aesthetic to websites.

I will signup to Fontawesome and then use the script tag to add the icons to our Login HTML page.

Now, we will add the HTML structure to our login page.

As you can see in the image below, I have added some HTML elements for our login page, we will now go line by line and understand what’s happening in our HTML code.

Explanation Of Our HTML Code

In the body tag of our HTML page, we start by creating a div element with a class of container. This will be the white box that you see in our first image.

Then we add a div with a class of login-box. This will be our actual login container.

This login box will have four main components.

On the top it will have an icon, then the login elements such as inputs, checkbox, and button, then we will have the separator for the social links and finally, we will have the buttons for social login.

The code is very clean and easy to understand. You can find the source code at the end of this post.

Login Page CSS Code

Once we have created the HTML structure, it’s now time to make things beautiful by adding some styles to our elements.

We will first start by adding a Google font to our website and then define the body and html tags.

Then we add the styles for the containers that we created.

Now, if you go to the initial image, we have the login icon on the top.

We are giving the icon the full width of the login box and placing the icon right in the middle.

At this point, our login page looks something like the below:

Now, let’s style the input controls.

The only thing that is now left on our login page is the social links and the separator and the CSS code for these is really simple.

That’s it! With all that HTML and CSS code, we can achieve a beautiful-looking login page that your visitors like.

Источник

36 CSS Login Forms

Discover a collection of stylish and functional CSS login forms for your website from CodePen, GitHub, and other resources. Our update includes eight new items that will enhance your website’s user experience and improve the login process.

In today’s world, where most interactions take place online, creating a user-friendly and functional login form is crucial for any website or application. In this collection, we will explore some of the best pure CSS login forms available for free on the web, along with their features and benefits. Whether you’re a web developer or designer, these login forms are sure to inspire and help you create a seamless login experience for your users.

Related Articles

1. Bootstrap Login Forms

Author

Links

Made with

About a code

Hacker Login Form

The Hacker Login Form is a unique and creative login form designed to resemble a hacker’s terminal. Overall, the Hacker Login Form is a fun and engaging login form that can add a unique touch to any website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Finance Mobile Application-UX/UI Design Screen One

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Glassmorphism Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up / Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Creative and Customizable Registration Form

The form is fully customizable, allowing you to add or remove fields as per your requirements. You can also change the color scheme and fonts to match your brand’s identity. The form is easy to use and navigate, making it a great choice for users.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

eCommerce Registraion Form

The form’s modern design and responsive layout make it a great addition to any website looking to improve its user experience.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Registration Form #18

A modern and stylish registration form template that can be easily customized to fit any website. With its clean design and user-friendly interface, this form is perfect for collecting user information and creating a seamless registration process. It includes fields for name, email, password, and more.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up Form #26

A modern and stylish registration form template that can be used for various purposes. It features a clean and minimal design with a beautiful color scheme that can be customized to match your brand. The form includes fields for name, email, password, and confirmation, as well as a submit button. The template is fully responsive and can be easily integrated into your website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Sign Up Form #7

Instead of getting one free creative signup form template, this bundle offers you two lovely alternatives to play with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Glassmorphism Login Form

The form has a transparent glass-like effect with a blurred background, giving it a sleek and elegant look. The form has a username and password input field with attractive focus effect, making it easy for users to interact with.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sign Up Modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js, bootstrap.js, popper.js

Author

Links

Made with

About the code

Double Slider Sign In/Up Form

Double slider login form in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Registration Form

Simple HTML and CSS registration form with validation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Modal Form

HTML and CSS modal login form with little JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Cube Login Form

Pure CSS cube buttons and inputs for login form with gradien styles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form with Floating Labels

Pure CSS login form with floating labels.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Prismatic Forms

Prismatic login, sign up and other forms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login Form Animation

Login page animation template created with CSS3 and vanilla JavaScript DOM elements. Will surely try to upgrade it with more better animation effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Login/Sign Up Form Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Form UI Animation

Form transitions UI based on Dominik Markušić dribble.

Author

Источник

How TO — Login Form

Learn how to create a responsive login form with CSS.

Click on the button to open the login form:

How To Create a Login Form

Step 1) Add HTML:

Add an image inside a container and add inputs (with a matching label) for each field. Wrap a element around them to process the input. You can learn more about how to process input in our PHP tutorial.

Example

Step 2) Add CSS:

Example

/* Bordered form */
form border: 3px solid #f1f1f1;
>

/* Full-width inputs */
input[type=text], input[type=password] width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
>

/* Set a style for all buttons */
button background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
>

/* Add a hover effect for buttons */
button:hover opacity: 0.8;
>

/* Extra style for the cancel button (red) */
.cancelbtn width: auto;
padding: 10px 18px;
background-color: #f44336;
>

/* Center the avatar image inside this container */
.imgcontainer text-align: center;
margin: 24px 0 12px 0;
>

/* Avatar image */
img.avatar width: 40%;
border-radius: 50%;
>

/* Add padding to containers */
.container padding: 16px;
>

/* The «Forgot password» text */
span.psw float: right;
padding-top: 16px;
>

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) span.psw display: block;
float: none;
>
.cancelbtn width: 100%;
>
>

How To Create a Modal Login Form

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
>

/* Modal Content/Box */
.modal-content background-color: #fefefe;
margin: 5px auto; /* 15% from the top and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
>

/* The Close Button */
.close /* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
>

/* Close button on hover */
.close:hover,
.close:focus color: red;
cursor: pointer;
>

/* Add Zoom Animation */
.animate -webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
>

Tip: You can also use the following javascript to close the modal by clicking outside of the modal content (and not just by using the «x» or «cancel» button to close it):

Example

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник