How to Create Sign Up Form in HTML CSS With Source Code
Share this Article!
Introduction – Sign up page design with source code
A Login and sign up page design is an essential feature of every type of website. Website owners require the user’s details such as name, email address, or mobile number for the user registration process. In this article, you will learn how to create sign up page design with source code HTML CSS 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 a login and sign up page design with source code using HTML and CSS with a step-by-step guide and source code.
Steps – How to Create sign up page design with source code?
We are going to cover the following important topics to create a beautiful HTML CSS-based login and sign up page design with source code:
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 – Sign up page design with source code
You can watch the video tutorial for a complete step-by-step guide to creating an HTML CSS template for the sign up page design with source code and login forms.
Create a login signup page in HTML & CSS!
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.
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.
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.
