Creating a Dynamic Registration Form using HTML, CSS, and JavaScript [Step-by-Step Guide]
11 min readFeb 5, 2023
A dynamic registration form is an essential part of any website or application that requires user registration. It is the process of collecting user data and storing it in a database or other back-end storage. Although in this tutorial we’re not going to use any back-end storing process. Here we’re going to validate all the fields after clicking the submit button by the user and after validating we will display a simple success message. In this step-by-step guide, we will walk through the process of creating a registration form using HTML, CSS, and JavaScript.
HTML is the markup language used to create the structure of the web page. We will use HTML to create the form fields, labels, and buttons.
CSS is used to style the form and make it look visually appealing. CSS is responsible for the look and feel of the form, including the font style, colors, and other visual elements.
JavaScript is used to add interactivity to the form. JavaScript allows us to validate the form, perform error handling, and make the form dynamic by adding real-time data validation and feedback to the user.
Here are the steps to create a dynamic registration form using HTML, CSS, and JavaScript:
- Create the HTML form structure: The first step is to create the HTML form structure. Use the HTML form tag to create the form, and use the input tag to create form fields such as text boxes, radio buttons, checkboxes, and drop-down lists.
- Add CSS styling to the form: Once the HTML form structure is in place, the next step is to add CSS styling to the form. Use CSS to set the font style, background color, and other visual elements. You can also use CSS to add animations and other interactive elements.
- Validate the form using JavaScript: The next step is to validate the form using JavaScript. JavaScript is used to perform error handling, data validation, and real-time feedback to the user. For example, you can use JavaScript to validate the email address, check if all required fields are filled in, and display error messages if the form is not filled in correctly.
- Submit the form data: Once the form is validated, the final step is to submit the form data. After submission we’ll be showing a sucess message.
In conclusion, creating a dynamic registration form using HTML, CSS, and JavaScript is a straightforward process that requires a basic understanding of these technologies. With this step-by-step guide, you can create a simple registration form that is both functional and visually appealing.
Step 1 → Create the HTML form structure:
main.html
<!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">
<link rel="stylesheet" href="style.css">
<title>Registration Form</title>
</head>
<body>
<div class="form-container">
<h1>Student Registration Form</h1>
<form action="registration-success.html">
<div class="input-group">
<label><strong>First Name:</strong></label>
<input type="text" placeholder="Enter Your First Name" id="fname">
</div>
<div class="input-group">
<label><strong>Last Name:</strong></label>
<input type="text" placeholder="Enter Your Last Name" id="lname">
</div>
<div class="input-group">
<label><strong>Date of Birth:</strong></label>
<input type="date" id="dob">
</div>
<div class="input-group">
<label><strong>Email Id:</strong></label>
<input type="email" placeholder="Enter Your Email Id" id="email-id">
</div>
<div class="input-group">
<label><strong>Mobile No.:</strong></label>
<input type="tel" placeholder="Enter your mobile number" id="phone-no">
</div>
<div class="input-group">
<label><strong>Gender:</strong></label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;"name="gender" value="female" id="female">
<label for="female">Female</label>
</div>
<div class="input-group">
<label><strong>Country:</strong></label>
<select name="country" id="country-name">
<option value="" selected="selected" >Select Country</option>
</select>
</div>
<div class="input-group">
<label><strong>State:</strong></label>
<select name="state" id="state-name">
<option value="" selected="selected">Please select country first</option>
</select>
</div>
<div class="input-group">
<label><strong>Address:</strong></label>
<input type="text" placeholder="Enter Your Address" id="address">
</div>
<div class="input-group">
<label><strong>Pin Code:</strong></label>
<input type="text" placeholder="Enter Your Pin Code" id="pincode">
</div>
<div class="input-group">
<label><strong>City:</strong></label>
<input type="text" placeholder="Enter Your City" id="city">
</div>
<div class="input-group">
<label><strong>District:</strong></label>
<select name="district" id="district-name" >
<option value="" selected="selected">Please select state first</option>
</select>
</div>
<div class="input-group">
<label><strong>Hobbies:</strong></label>
<textarea rows="5" placeholder="Enter Your Hobbies" id="hobbies" ></textarea>
</div>
<button >Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>sucess.html
<!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">
<title>Document</title>
</head>
<body>
<h2 style="font-family: 'Poppins', sans-serif; color: green; text-align: center;">All validations are completed successfully.</h2><br><hr>
<h2 style="font-family: 'Poppins', sans-serif; color: rgb(45, 143, 88); text-align: center;">Your registration is successful and registration id is ABCD1234</h2><br>
<img src="Checkmark.svg" alt="" style=" display: block; margin-left: auto; margin-right: auto; width: 50%; height: 200px;">
</body>
</html>Step 2→ Add CSS styling to the form:
body{
background-color: #18796c;
display: flex;
justify-content: center;
align-items: center;
}
.form-container form{
background-color: rgb(230, 234, 238);
padding: 20px 30px 20px;
position: relative;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
h1{
margin: 0px 0px 10px 0px;
padding: 0 100px;
}
.input-group{
width: 110%;
display: flex;
align-items: center;
margin: 16px 0;
position: relative;
}
.input-group label{
flex-basis: 18%;
}
.input-group input, .input-group textarea{
flex-basis: 40%;
border: 0;
outline: 0;
padding: 10px 0;
border-bottom: 1px solid #999;
background-color: rgb(247, 244, 244);
color: rgb(0, 0, 0);
font-size: 16px;
}
::placeholder{
font-size: 14px;
}
form button{
background: #141a34;
color: #fff;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 10px 40px;
outline: 0;
cursor: pointer;
display: block;
margin: 30px auto 10px;
}This is the basic structure of our form. Now to display the error message we will use the span tag of html. Now after adding the span tag the code will be:
<div class="input-group">
<label><strong>Last Name:</strong></label>
<input type="text" placeholder="Enter Your Last Name" id="lname">
<span id="lname-error"> **Last name required</span>
</div>We’ll add the span tag like this above in our main.html file. Similarly we’ll add this tag to all the mentioned input area. And we’ll delete the span tag elements as because we’re going to show that using JavaScript.
<!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">
<link rel="stylesheet" href="style.css">
<title>Registration Form</title>
</head>
<body>
<div class="form-container">
<h1>Student Registration Form</h1>
<form action="registration-success.html">
<div class="input-group">
<label><strong>First Name:</strong></label>
<input type="text" placeholder="Enter Your First Name" id="fname">
<span id="fname-error"></span>
</div>
<div class="input-group">
<label><strong>Last Name:</strong></label>
<input type="text" placeholder="Enter Your Last Name" id="lname">
<span id="lname-error"></span>
</div>
<div class="input-group">
<label><strong>Date of Birth:</strong></label>
<input type="date" id="dob" onchange="validateDOB()">
<span id="dob-error"></span>
</div>
<div class="input-group">
<label><strong>Email Id:</strong></label>
<input type="email" placeholder="Enter Your Email Id" id="email-id">
<span id="email-error"></span>
</div>
<div class="input-group">
<label><strong>Mobile No.:</strong></label>
<input type="tel" placeholder="Enter your mobile number" id="phone-no">
<span id="mobile-error"></span>
</div>
<div class="input-group">
<label><strong>Gender:</strong></label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;"name="gender" value="female" id="female">
<label for="female">Female</label>
<span id="gender-error"></span>
</div>
<div class="input-group">
<label><strong>Country:</strong></label>
<select name="country" id="country-name">
<option value="" selected="selected" >Select Country</option>
</select>
<span id="country-error"></span>
</div>
<div class="input-group">
<label><strong>State:</strong></label>
<select name="state" id="state-name">
<option value="" selected="selected">Please select country first</option>
</select>
<span id="state-error"></span>
</div>
<div class="input-group">
<label><strong>Address:</strong></label>
<input type="text" placeholder="Enter Your Address" id="address">
<span id="address-error"></span>
</div>
<div class="input-group">
<label><strong>Pin Code:</strong></label>
<input type="text" placeholder="Enter Your Pin Code" id="pincode">
<span id="pin-error"></span>
</div>
<div class="input-group">
<label><strong>City:</strong></label>
<input type="text" placeholder="Enter Your City" id="city">
<span id="city-error"></span>
</div>
<div class="input-group">
<label><strong>District:</strong></label>
<select name="district" id="district-name">
<option value="" selected="selected">Please select state first</option>
</select>
<span id="district-error"></span>
</div>
<div class="input-group">
<label><strong>Hobbies:</strong></label>
<textarea rows="5" placeholder="Enter Your Hobbies" id="hobbies"></textarea>
<span id="hobbies-error"></span>
</div>
<button>Submit</button>
<span id="submit-error"></span>
</form>
</div>
<script src="script.js"></script>
</body>
</html>And we’ll be adding some more styles to our css file for the span tag as coded below:
.input-group span{
font-size: 14px;
color: red;
}
#submit-error{
color: red;
}
img{
width: 100%;
height: 30px;
}Step 3→ Validate the form using JavaScript:
Declaring the variables by which we’ll be showing the error message. Here we’re getting those elements with the id used in the main.html file.
var fnameError = document.getElementById('fname-error');
var lnameError = document.getElementById('lname-error');
var dobError = document.getElementById('dob-error');
var emailError = document.getElementById('email-error');
var genderError = document.getElementById('gender-error');
var mobileError = document.getElementById('mobile-error');
var countryError = document.getElementById('country-error');
var stateError = document.getElementById('state-error');
var addressError = document.getElementById('address-error');
var pinCodeError = document.getElementById('pin-error');
var cityError = document.getElementById('city-error');
var districtError = document.getElementById('district-error');
var hobbiesError = document.getElementById('hobbies-error');
var submitError = document.getElementById('submit-error');As we’ll be using the cascading dropdown for the address fields so we’re declaring this:
var addressObject = {
"INDIA": {
"Assam": ["Bongaigaon", "Jorhat", "Kokrajhar", "Lakhimpur", "Tinsukia", "Kamrup Metropolitan"],
"Goa": ["North Goa", "South Goa"],
"Himachal Pradesh": ["Kangra", "Kullu", "Mandi", "Shimla", "Lahaul and Spiti", "Kinnaur"],
"Kerela": ["Kollam", "Malappuram", "Thiruvananthapuram", "Kannur", "Palakkad"],
"Tripura": ["Dhalai", "North Tripura", "South Tripura", "West Tripura"],
"Sikkim": ["Gangtok", "Mangan", "Namchi", "Geyzing", "Pakyong", "Soreng"],
"West Bengal": ["Malda", "Alipurduar", "Howrah", "Kolkata", "Bankura", "Nadia"],
"Delhi": ["Central Delhi", "East Delhi", "New Delhi", "North Delhi", "South Delhi", "West Delhi"]
},
"USA": {
"Arizona": ["Gila", "Yuma", "Apache", "Mohave", "Santa Cruz", "Greenlee"],
"California": ["San Francisco", "Los Angeles", "Sacramento", "San Diego", "Riverside", "San Jose"],
"Georgia": ["Atlanta", "Augusta", "Columbus", "Savannah"],
"Michigan": ["Watersmeet", "Holland", "Flint", "Holly", "Dearborn"],
"New York": ["Shirley", "Brooklyn", "Manhattan", "Bronx", "Yonkers"],
"Washington": ["Pierce", "Yakima", "Thurston", "Snohomish"],
"New Mexico": ["Alamogordo", "Santa Fe", "Albuquerque"]
},
"BANGLADESH": {
"Barisal": ["Barisal", "Barguna", "Bhola", "Pirojpur", "Jhalokati", "Patuakhali"],
"Khulna": ["Bagerhat", "Jashore", "Khulna", "Narail", "Satkhira", "Meherpur"],
"Rajshahi": ["Natore", "Sirajganj", "Pabna", "Bogura", "Naogaon", "Joypurhat"],
"Rangpur": ["Dinajpur", "Kurigram", "Rangpur", "Thakurgaon", "Panchagarh", "Gaibandha"],
"Sylhet": ["Habiganj", "Moulvibazar", "Sunamganj", "Sylhet"],
"Dhaka": ["Gazipur", "Tangail", "Rajbari", "Gopalganj", "Faridpur", "Narayanganj"],
"Chittagong": ["Rangamati", "Cox's Bazar", "Chattogram", "Lakshmipur", "Chandpur", "Brahmanbaria"]
}
}Now we will be linking those dropdowns as follows:
window.onload = function(){
var countrySel = document.getElementById("country-name");
var stateSel = document.getElementById("state-name");
var districtSel = document.getElementById("district-name");
for(var x in addressObject){
countrySel.options[countrySel.options.length] = new Option(x, x);
}
countrySel.onchange = function(){
//Empty districts and States dropdown
districtSel.length = 1;
stateSel.length = 1;
//Display correct values
for(var y in addressObject[this.value]){
stateSel.options[stateSel.options.length] = new Option(y, y);
}
}
stateSel.onchange = function(){
//Empty Districts dropdown
districtSel.length = 1;
//display correct values
var z = addressObject[countrySel.value][this.value];
console.log(z);
for(var i=0; i<z.length; i++){
districtSel.options[districtSel.options.length] = new Option(z[i], z[i]);
}
}
}
//Function to validate First name
function validateFName(){
var fname = document.getElementById('fname').value;
if(fname.length == 0){
fnameError.innerHTML = ' **First Name is required';
return false;
}
if(!fname.match(/^[A-Za-z]*$/)){
fnameError.innerHTML = ' **Numeric is not allowed';
return false;
}
if(fname.length < 3){
fnameError.innerHTML = ' **Minimum 3 char required';
return false;
}
if(fname.length > 20){
fnameError.innerHTML = ' **First name should be less than 20 char';
return false;
}
fnameError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Last name
function validateLName(){
var lname = document.getElementById('lname').value;
if(lname.length == 0){
lnameError.innerHTML = ' **Last Name is required';
return false;
}
if(!lname.match(/^[A-Za-z]*$/)){
lnameError.innerHTML = ' **Numeric is not allowed';
return false;
}
if(lname.length < 3){
lnameError.innerHTML = ' **Minimum 3 char required';
return false;
}
if(lname.length > 20){
lnameError.innerHTML = ' **Last name should be less than 20 char';
return false;
}
lnameError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Date of Birth
function validateDOB(){
var dobString = document.getElementById('dob').value;
var myDate = new Date();
var parts = dobString.split("-");
console.log(dobString);
console.log(parts);
if(dobString == ""){
dobError.innerHTML = ' **Date of Birth required';
return false;
}
if(Date.parse(dobString) > Date.parse(myDate.toDateString())){
dobError.innerHTML = " **You can't select future date as DOB";
return false;
}
if(myDate.getFullYear() - parts[0] > 24){
dobError.innerHTML = ' **Date of Birth should not be greater than 24';
return false;
}
dobError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Email
function validateEmail(){
var emailId = document.getElementById('email-id').value;
if(emailId.length == 0){
emailError.innerHTML = ' **Email is required';
return false;
}
if(!emailId.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/)){
emailError.innerHTML = ' **Invalid Email';
return false;
}
emailError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Phone Number
function validatePhone(){
var phoneNum = document.getElementById('phone-no').value;
if(phoneNum.length == 0){
mobileError.innerHTML = ' **Phone number is required';
return false;
}
if(phoneNum.length !== 10){
mobileError.innerHTML = ' **Phone Number should be of 10 digits';
return false;
}
if(!phoneNum.match(/^[0-9]{10}$/)){
mobileError.innerHTML = ' **Only digits please';
return false;
}
mobileError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Gender
function validateGender(){
var genderSelected = document.querySelector('input[name = "gender"]:checked');
if(genderSelected != null){
genderError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
genderError.innerHTML = ' **Please enter your gender';
return false;
}
//Function to validate Country Name
function validateCountry(){
var countryName = document.getElementById('country-name').value;
if(countryName == ""){
countryError.innerHTML = ' **Country name required';
return false;
}
countryError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate State Name
function validateState(){
var stateName = document.getElementById('state-name').value;
if(stateName == ""){
stateError.innerHTML = ' **State name required';
return false;
}
stateError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Address
function validateAddress(){
var address = document.getElementById('address').value;
if(address == ""){
addressError.innerHTML = ' **Address is required';
return false;
}
addressError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate PinCode
function validatePinCode(){
var pinCode = document.getElementById('pincode').value;
if(pinCode.length == 0){
pinCodeError.innerHTML = ' **PinCode is required';
return false;
}
if(pinCode.length !== 6){
pinCodeError.innerHTML = ' **PinCode should be of 6 digits';
return false;
}
if(!pinCode.match(/^[0-9]{6}$/)){
pinCodeError.innerHTML = ' **Only digits please';
return false;
}
pinCodeError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate City Name
function validateCity(){
var cityName = document.getElementById('city').value;
if(cityName == ""){
cityError.innerHTML = ' **City name required';
return false;
}
cityError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate District Name
function validateDistrict(){
var districtName = document.getElementById('district-name').value;
if(districtName == ""){
districtError.innerHTML = ' **District name required';
return false;
}
districtError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate Hobbies
function validateHobbies(){
var hobbies = document.getElementById('hobbies').value;
var requiredChar = 15;
var leftChar = requiredChar - hobbies.length;
if(leftChar > 0){
hobbiesError.innerHTML = leftChar + ' more characters required';
return false;
}
hobbiesError.innerHTML = '<img src="Checkmark.svg" alt="">';
return true;
}
//Function to validate while the submit button is clicked aby the user
function validateForm(){
if(!validateFName() || !validateLName() || !validateDOB() ||
!validateEmail() || !validatePhone() || !validateGender() ||
!validateCountry() || !validateState() || !validateAddress() ||
!validatePinCode() || !validateCity() || !validateDistrict() ||
!validateHobbies()){
submitError.innerHTML = 'Please fix the error to submit';
return false;
}
}Now at last we need to link those functions with the corresponding input element tag of the main.html file.
<!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">
<link rel="stylesheet" href="style.css">
<title>Registration Form</title>
</head>
<body>
<div class="form-container">
<h1>Student Registration Form</h1>
<form action="registration-success.html">
<div class="input-group">
<label><strong>First Name:</strong></label>
<input type="text" placeholder="Enter Your First Name" id="fname" onkeyup="validateFName()">
<span id="fname-error"></span>
</div>
<div class="input-group">
<label><strong>Last Name:</strong></label>
<input type="text" placeholder="Enter Your Last Name" id="lname" onkeyup="validateLName()">
<span id="lname-error"></span>
</div>
<div class="input-group">
<label><strong>Date of Birth:</strong></label>
<input type="date" id="dob" onchange="validateDOB()">
<span id="dob-error"></span>
</div>
<div class="input-group">
<label><strong>Email Id:</strong></label>
<input type="email" placeholder="Enter Your Email Id" id="email-id" onkeyup="validateEmail()">
<span id="email-error"></span>
</div>
<div class="input-group">
<label><strong>Mobile No.:</strong></label>
<input type="tel" placeholder="Enter your mobile number" id="phone-no" onkeyup="validatePhone()">
<span id="mobile-error"></span>
</div>
<div class="input-group">
<label><strong>Gender:</strong></label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;" name="gender" value="male" id="male" onkeyup="validateGender()">
<label for="male">Male</label>
<input type="radio" style="flex-basis: 0%; margin: 0 10px;"name="gender" value="female" id="female" onkeyup="validateGender()">
<label for="female">Female</label>
<span id="gender-error"></span>
</div>
<div class="input-group">
<label><strong>Country:</strong></label>
<select name="country" id="country-name" onclick="validateCountry()">
<option value="" selected="selected" >Select Country</option>
</select>
<span id="country-error"></span>
</div>
<div class="input-group">
<label><strong>State:</strong></label>
<select name="state" id="state-name" onclick="validateState()">
<option value="" selected="selected">Please select country first</option>
</select>
<span id="state-error"></span>
</div>
<div class="input-group">
<label><strong>Address:</strong></label>
<input type="text" placeholder="Enter Your Address" id="address" onkeyup="validateAddress()">
<span id="address-error"></span>
</div>
<div class="input-group">
<label><strong>Pin Code:</strong></label>
<input type="text" placeholder="Enter Your Pin Code" id="pincode" onkeyup="validatePinCode()">
<span id="pin-error"></span>
</div>
<div class="input-group">
<label><strong>City:</strong></label>
<input type="text" placeholder="Enter Your City" id="city" onkeyup="validateCity()">
<span id="city-error"></span>
</div>
<div class="input-group">
<label><strong>District:</strong></label>
<select name="district" id="district-name" onclick="validateDistrict()">
<option value="" selected="selected">Please select state first</option>
</select>
<span id="district-error"></span>
</div>
<div class="input-group">
<label><strong>Hobbies:</strong></label>
<textarea rows="5" placeholder="Enter Your Hobbies" id="hobbies" onkeyup="validateHobbies()"></textarea>
<span id="hobbies-error"></span>
</div>
<button onclick="return validateForm()">Submit</button>
<span id="submit-error"></span>
</form>
</div>
<script src="script.js"></script>
</body>
</html>That’s all..
Now we’ve successfully created a registration form with HTML, CSS and JAVASCRIPT.
Thank You..