How to use grid area to create grid layout
grid area is an important part of the grid. It helps us to create layouts easily while writing less code. Grid is used to create a 2d layout with the help of…
# Best Registration form in HTML with CSS source code with 3 examples
Looking for a registration form in HTML with CSS source code, sure here I have provided responsive registration with HTML and CSS source code with awesome design you can directly copy and paste to your website.
In today’s digital age registration form is the most important part of a website and application. which allows users to create accounts and sign up for services and helps businesses access user data and information.
To create an effective and attractive registration form you will need HTML for creating structure and CSS for styling and making the HTML form look attractive.
Animated Registration form in HTML with CSS source code
I have designed some of the following animated registration forms in HTML with CSS source code, You can find them below to download and preview or live demo of the registration form.
As the registration form is an important section/part of our website registration form should be attractive and user-friendly for the user so that users can fill the form easily without struggling with how to fill the form.
You may like this 👋 build responsive real-world websites with html and css
Simple Registration form in HTML with CSS source code
Registration form in HTML with CSS source code with validation
This is the registration form with input validation and error message. you can download or preview the demo.
Registration form in HTML with CSS source code free download
you can find many source codes for free download on Codepen and GitHub. many developers shared their developed registration for code for free on their public GitHub page and codepen for open source.
Responsive registration form in html with CSS source code
The above HTML forms are mobile responsive for all devices. You can resize your screen and can check the responsiveness of registration forms. if you want to download the registration form source you can download clicking the download source button.
Student signup or registration form in HTML with CSS source code
Student registration will also be the same but some fields may be different like courses/classes / or college registration number etc. You can add as many fields as you want in the registration form but keep your form not much length ask only the information which are compulsory and not redundant.
How to create a Registration form in HTML with CSS source code given above
To create a registration form you will need html for structure and css for styling form. You will need an HTML and CSS file for HTML structure and styling respectively.
Setting the HTML Structure
To create html structure create an html file named registration.html for example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css"> <!-- Include your CSS file here -->
</head>
<body>
<!-- Your registration form content will be here -->
</body>
</html>
In the code above, we are done with the basic structure of an HTML document for form. We have also linked an external CSS file called style.css, which we’ll create shortly to style our registration form.
Create the Registration Form
Now, let’s add the registration form html itself to the <body> of the HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="form">
<img
alt="register"
src="https://www.frontendzone.com/_next/image?url=%2Fimages%2Fcard.jpg&w=1920&q=75"
/>
<form>
<h2>Register Now</h2>
<label for="email">
<input autofocus placeholder="Email" id="email" type="text"/>
</label>
<label for="password">
<input placeholder="Password" id="password" type="password"/>
</label>
<label for="confirm password">
<input placeholder="confirm password" id="password" type="password" />
</label>
<button>Sign Up</button>
</form>
</div>
</body>
</html>
In the code above for the HTML form, we have created a registration form which has the following fields:
- password
- confirm password
You can add more fields according to your need like first name, last name, mobile number, etc.
Each input element has a unique id and name attribute, which is essential for JavaScript and server-side processing.
HTML inputs used in the registration form
There may be the following HTML inputs that are used in the registration form. they may be used according to the requirements of users like students, clients, teachers, or any other user.
Now add CSS in style.css and link it to the HTML file
style.css
/* body{display: flex;align-items: center;min-height: 96vh;} */
.form {
display: flex;
height: 400px;
width: 700px;
border-radius: 8px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.15);
font-family: sans-serif;
overflow: hidden;
margin: 10px auto;
}
.form input {
padding: 10px;
color: #555;
border: 2px solid #ddd;
outline: none;
font-size: 16px;
width: 100%;
}
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}
.form input:focus {
border-color: blue;
}
.form img {
width: 50%;
height: 100%;
object-fit: cover;
}
.form button {
padding: 10px 20px;
font-size: 16px;
background: blue;
color: #fff;
border: none;
border-radius: 4px;
width: 100%;
}
.form label {
position: relative;
margin-bottom: 17px;
}
.form label:has(input:focus, input:not(:placeholder-shown)):before {
top: -22%;
background: #fff;
z-index: 1;
padding: 0 5px;
transform: none;
color: #888;
}
.form label:has(input:focus)::before {
color: blue;
}
.form input::placeholder {
opacity: 0;
}
.form label::before {
color: #ccc;
content: attr(for);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
pointer-events: none;
transition: all 0.3s;
}
.form h2 {
margin-top: 0;
}
.form form {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 767px) {
.form img {
display: none;
}
.form {
justify-content: center;
width: unset;
align-items: center;
}
}How to use this registration form html & css
You can use this registration form HTML & CSS either by copying and pasting it into your website or can downloading the file directly and adding it to your website folder. if you are facing any problems in adding this code to your website you can contact me over WhatsApp.
Registration form HTML CSS source code
Now let’s see how to create a registration form with HTML and CSS that will be responsive, attractive, and user-friendly.
How to make the form responsive
I have provided the complete code for the registration form in HTML with CSS source code.
To make the form responsive to work on mobile and tablet devices you can use media query in CSS.
@media screen and (max-width:767px){
//your code for mobile here
}Some of the advanced CSS that is used in this form
Using condition for CSS when changing border color and position of the placeholder. the following advanced code is also has been used in the registration form in HTML with css source code given above for download.
.form label:has(input:focus, input:not(:placeholder-shown)):before {
top: -22%;
background: #fff;
z-index: 1;
padding: 0 5px;
transform: none;
color: #888;
}
.form label:has(input:focus)::before {
color: blue;
}Changing auto-filled input background color simply background color can’t be changed but you can use the following trick to override the background by autofill
.form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}Power of css ✊
Conclusion
So in this article, we have taken you through the process of how to create a registration form and style it with CSS for your website.
A well-designed UI for the registration and login form are an essential part of the website which connect user with your website to save to fetch their data on your website become crucial to keep the registration form easy to understand while user fill out the form.
You can further enhance this form according to your requirements like more input validation and error messages and connect it to the backend server or API.
About Author
Ashish Yadav
Software Engineer Follow
Software Engineer Follow
Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.
With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies
HTML5CSS3javascriptreact jsRedux.jswordpressNext jsSEOexpress js node jsmongodb
Whatsapp Group
Frontend developerwhatsapp group
