Introduction – Signup and Login HTML Form
A Login and sign up page design is an essential feature of every type of website. Website owners require the user’s details such that name, email address, or mobile number for the user registration process. In this article, you will learn how to create sign up page design in HTML CSS with source code and how to use HTML and CSS3’s latest features.
This login and sign-up page design with HTML CSS is also responsive to all media devices. This article also explains how to create login and sign up pages using HTML and CSS with step by step guide and source code.
Steps – How to Create Login and Sign Up Page?
We are going to cover the following important topics to create a beautiful HTML CSS-based login and sign up landing page design:
- Open the code editor of your choice on your computer. In this tutorial, we are using Visual Studio Code.
- Create a new file named signup.html in your code editor.
- Write HTML code to design the basic structure of the signup and login forms.
- After that, create a style.css file and link a CSS file with an HTML page using an HTML link tag.
- Write CSS code to decorate and style the signup form design in HTML and CSS.
- Add background body image in HTML CSS sign up form.
- Add font awesome social icons using the CDN link on the HTML signup page.
- How to create a beautiful button design in the CSS signup and user login form?
- How to create login and sign up pages in CSS and HTML with form toggle features?
Video Tutorial – Creating Signup Page Design
You can watch the video tutorial for a complete step-by-step guide to creating an HTML CSS template for the signup and login forms.
Recommended for You!
- 10 Easy HTML CSS Projects for Beginners with Source Codes
- How to Run PHP Code in VSCode Terminal Console
- How to Receive Email from HTML Form using PHP
Or You can read the full detailed article to create a responsive login and sign up page design using HTML and CSS templates and how to create a login form template with free Source Code.
HTML Code – User Signup Page Template
In this section, we created a new file named, signup.html in our code editor. After that, write the following HTML code in the body section of your sign-up page. HTML code includes the two sections of the sign-in and signup pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome 5 CDN link to add icones -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Sign Up</title>
<!-- Linking .css file with HTML page -->
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div>
<!-- Left section of signup form -->
<dive>
<h1>Sign Up</h1>
<h5>Welcome to our - favourite music</h5>
<form action="" method="get">
<div>
<p><label for="userNmae">User Name</label></p>
<input type="text" id="userName" autocomplete="off" >
</div>
<div>
<p><label for="email">Email Address</label></p>
<input type="email" id="email" name="email" required autocomplete="off">
</div>
<div>
<p><label for="password">Password</label></p>
<input type="password" id="password" required >
</div>
<button type="button" id="btn">Sign Up Now</button>
<p>Already a member? <a href="login.html">Log in</a></p>
</form>
<div></div>
<!-- Adding social icones -->
<div>
<h6>Or Connect With - </h6>
<div><i></i></div>
<div><i></i></div>
<div><i></i></i></div>
</div>
</dive>
<!-- Right section of the form containing image -->
<div>
<img src="https://www.hmablogs.com/wp-content/uploads/2021/07/musicImg.png" alt="Music Image">
</div>
</div>
</body>
</html>
Explanation – Free HTML Signup Form Code
The signup form source code contains two sections. The first section contains the HTML inputs and font awesome social media icons. The social icons and, the buttons have beautiful mouse-over hover effects. The second section includes an image on the right side of the HTML form.
HTML Code – User Login Page Template
The following image shows the user login form in HTML and CSS.
In this section, we are going to create the HTML login page design. The login page is linked with the signup page design template under the signup button. When the user clicks on the login button then redirected to this login form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome icones CDN Link -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Sign Up</title>
<!-- Linking css code file -->
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div>
<dive>
<h1>Sign in</h1>
<h5>Welcome to our - favourite music</h5>
<form action="" method="get">
<div>
<p><label for="email">Email</label></p>
<input type="email" id="email" name="email" required >
</div>
<div>
<p><label for="userNmae">Password</label></p>
<input type="password" id="password" required >
</div>
<button type="button" id="btn">Sign in Now</button>
<p>Not a register user? <a href="signUp.html">Sign Up</a></p>
</form>
<div></div>
<!-- Social media icones -->
<div>
<h6><strong>Or connect with - </strong></h6>
<div><i></i></div>
<div><i></i></div>
<div><i></i></i></div>
</div>
</dive>
<div>
<img src="https://www.hmablogs.com/wp-content/uploads/2021/07/musicImg.png" alt="Music Image">
</div>
</div>
</body>
</html>
Want more Free Source Codes?
Hey, If this article is helpful, Please Consider Buying Me a Coffee
Your small help will enable us to bring free content for you!
CSS Source Code – Login & Signup Forms
In this section, we are going to write CSS source code for both Login and sign-up pages. Both pages have the same CSS code file and which has linked to both of them.
How to add a body background image in CSS?
First of all, we are adding a body background image in the sign-up page design. the HTML body tag contains the box-sizing CSS property.
What is CSS Box Sizing?
The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.
body{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
background-image: url(https://www.hmablogs.com/wp-content/uploads/2021/07/backgroundimg-scaled.jpg);
background-size: cover;
background-attachment: fixed;
}
CSS Code – HTML Sign Up Page With Sections
The Login and sign-up forms have two sections. The first section has a with of 40% and the second has with of 50%. We have used the input: focus CSS property to design the input fields for HTML CSS forms. Password: focus CSS property was used to decorate the password field of the login & sign-up forms.
.container{
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 650px;
height: 500px;
margin-top: 90px;
background-color: #FBFBFB;
display: flex;
}
.section1{
width: 40%;
padding-left: 50px;
}
.section2{
width: 50%;
}
.section2 > img{
width: 100%;
height: 100%;
margin: 10px 0px 0px 8px;
}
h5{
margin-top: -12px;
}
label{
text-transform: uppercase;
font-size: 12px;
color: rgb(48, 48, 48);
}
input{
border: none;
width: 100%;
border-bottom: 1px solid lightgray;
background-color: #FBFBFB;
position: relative;
top: -10px;
padding: 5px;
}
input:focus {
outline: none !important;
border-bottom: 1px solid red;
font-size: 14px;
font-weight: bold;
}
#password:focus{
color: red;
font-size: 16px;
font-weight: bold;
}
#btn{
border: none;
background-color: red;
border-radius: 20px;
padding: 10px;
color: white;
width: 120px;
margin-top: 15px;
}
p{
font-size: small;
}
.line{
border-bottom: 1px solid lightgray;
width: 100%;
margin-top: 50px;
}
.socialIcons{
display: flex;
margin-top: 5px;
}
.icon{
margin: 10px 7px;
position: relative;
left: 30px;
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid black;
font-size: 12px;
line-height: 25px;
}
.fab{
position: relative;
left: 6px;
}
.fb > .fab {
position:relative;
left: 8px;
}
h6{
position:relative;
top: -8px;
font-size: 12px;
}
.icon:hover, #btn:hover{
box-shadow: 0 0 25px rgba(8, 8, 8, 0.2);
background-color: rgb(182, 49, 93);
}
Want more Free Source Codes?
Please Consider Buying Me a Coffee!
Your small help will enable us to bring free content to you!
16 Responses
Usuаlly I don’t read poѕt on blogs, howevеr I wish
to say that thiѕ write-up very compelled me to try and ɗo ѕo!
Your writing style has been surpriseɗ me. Thаnk you, quite nice articⅼe.
Review my pagｅ :: job
Thanks!!!
I like the helpful information you provide in your articles.
I will bookmark your blog and check again here frequently.
I am quite sure I will learn plenty of new stuff right
here! Best of luck for the next!
Great blog you’ve got here.. It’s difficult to find good quality writing like yours these days.
I truly appreciate people like you! Take care!!
I think this is one of the most important information for me. And i am glad reading your article. But should remark on few general things, The site style is great, the articles is really excellent : D. Good job, cheers
Greetings! I’ve been following your blog for a long time now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to tell you keep up the fantastic work!
Keep functioning ,splendid job!
Welcome to the world of adult Dating loveawake.ru
I’ve read some good stuff here. Definitely worth bookmarking for revisiting. I wonder how much effort you put to make such a fantastic informative website.
Major thanks for the blog article.Thanks Again. Keep writing.
Hi, I think your site might be having browser compatibility issues.
When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer, it
has some overlapping. I just wanted to give you a quick heads up!
Other then that, awesome blog!
I think this is one of the most significant info for me.
And i’m glad reading your article. But wanna remark on few general things, The site
style is great, the articles is really nice : D. Good job,
cheers
Hi i am kavin, its my first time to commenting anywhere, when i read this
piece of writing i thought i could also make comment due
to this brilliant paragraph.
I evеry time spent my һalf an hour to read this webpage’s
ɑrticles daily along with a cup of coffee.
Heya! I’m at work surfing around your blog from my new iphone 4!
Just wanted to say I love reading through your blog and look forward to all your
posts! Keep up the excellent work!
I’m not sure where you’re getting your info, but great topic. I needs to spend some time learning more or understanding more.
Thanks for excellent information I was looking for this info for my mission.