We use cookies
This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..
The primary source for SEO guidance with clear and expert-level insights.
A Guide to Making a Website Login Form Using HTML & CSS
Last updated: Mar 20, 2023
Disclaimer: Our team is constantly compiling and adding new terms that are known throughout the SEO community and Google terminology. You may be sent through SEO Terms in cmlabs.co from third parties or links. Such external links are not investigated, or checked for accuracy and reliability by us. We do not assume responsibility for the accuracy or reliability of any information offered by third-party websites.
In creating a website, the login form is a crucial element that can help users enter the website.
This guide will cover how to create a simple login form using HTML and CSS.
Check out the discussion below!
Things that Need to Be Prepared
Before using HTML and CSS, there are several things that need to be prepared first.
Here are some things you need to prepare before creating one using HTML and CSS.
1. Special Folder for Saving Login Forms
First of all, you must prepare a special folder that will be used to store the login form.
To link HTML and CSS files, they must be in the same folder. So, do not separate folders for HTML and CSS files.
In addition, it is not recommended to use spaces in folder names because it may potentially cause errors in your program.
Instead of using spaces, you can use some wildcards, such as (_), (-), and other symbols.
2. Text Editor for Creating Login Form Files
Second, you need to prepare tools in the form of a text editor to compile the file program using HTML and CSS.
Open a text editor, then create HTML and CSS files, each named "index.html" and "style.css".
You can use any text editor, including Notepad++, Atom, VsCode, or something else.
How to Create a Login Form with HTML
After preparing everything you need, now is the time for you to know how to create a login form using HTML.
Let's check out the following explanation.
1. HTML Document Declaration
In order for the login form to display properly, you must first declare the HTML document.
This aims to tell the browser that the file format is in the form of an HTML document.
To declare it, you can follow the source code:
<!DOCTYPE HTML>
<html>
</html>cmlabs
2. Create Head of the Page
Inside the <html> tag, you can include <head> to create a page heading.
The <head> tag itself is an attribute that contains various technical information related to the HTML document, such as metadata, external file sources, and so on.
To perform this step, follow the source code below:
<!DOCTYPE HTML>
<html>
<head>
</head>
</html>cmlabs
3. Provide a Page Title
To create a title, you can use the <title> tag. You can follow the source code:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
</head>
</html>cmlabs
4. Insert CSS Files
The next step is to insert the CSS file. This aims to link CSS files with HTML so that the form can be displayed properly later.
To do this, you can use the rel link attribute, as exemplified by the following source code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>cmlabs
5. Create Body Login Form
To create the body using HTML, you need the <body> tag. You can see the use of this tag in the following source code example:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>cmlabs
6. Create Form Layouts
Creating the contents of the form using the <body> tag is not enough. You still need other attributes to make it better, namely the container attribute.
This attribute cannot stand alone. To use the container, you need to insert it into the class div element.
To implement this attribute, you can follow the code below:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>cmlabs
7. Creating Headings 1
With H1, your login form will stand out more. Making H1 also aims to make your form title recognizable by search engines.
In addition, this heading can also help search engines assess the SEO performance of your site more easily.
To create heading 1, you can use the following program code:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
</div>
</body>
</html>cmlabs
8. Create a Login Form Box
Once you have found the right title, you can enter the core program to create the right box.
This time, you'll use the <form> tag. This tag has a function similar to the <div> tag, which is to group elements together.
Look at the program code below:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
</form>
</div>
</body>
</html>cmlabs
9. Create Username and Password Columns
As you know, every login form must have a username and password column. To create these two elements, you can use <label>, <br>, and <input type> tags.
- <label> to provide text information on a form
- <br> serves as a new line marker
- <input type> allows the user to enter the required information
You can see how to make use of these three elements in the following program code:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
</form>
</div>
</body>
</html>cmlabs
10. Create Form Buttons
The login form is not perfect if it doesn't have a button or buttons. To create a form button, you need the <button> attribute.
How to implement it is quite easy; you can follow the program code below:
<!DOCTYPE HTML>
<html>
<head>
<title>Insert Page Title Here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
<button>Login</button>
</form>
</div>
</body>
</html>cmlabs
How to Make a Login Form with CSS
Basically, CSS serves to add visual value to a website. Likewise, CSS is able to provide its own color and style.
The following is an example of CSS program code that you can use:
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Open Sans', sans-serif;
}
body{
height: 100vh;
background-image: url(https://enter urlimagedotcom);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 20px 30px;
width: 350px;
background-color: rgba(0,0,0,.7);
box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.container h1{
text-align: center;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #2979ff;
}
.container label{
text-align: left;
color: #90caf9;
}
.container form input{
width: calc(100% - 20px);
padding: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
}cmlabs
After the HTML and CSS programming has been completed, save the file so that the configuration you have worked on is not lost.
After saving the file, you can immediately see the results by opening the "index.html" file in your browser.
Thus, the end of the guide about how to create a login form using HTML and CSS.
If you finish configuring your website, don't forget to use SEO services to maximize your pre-existing business strategy.
SEO services are not only capable of evaluating content, but they can also audit your entire website to define a better strategy.
cmlabs
WDYT, you like my article?
Subscribe to Our Newsletter
Enter your email to receive news from us
Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.
Free on all Chromium-based web browsers
Subscribe to Our Newsletter
Enter your email to receive news from us
Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.
Free on all Chromium-based web browsers
