Registration form design in HTML and CSS with code

In this tutorial, we will see how to create a responsive registration form using HTML, CSS, and JavaScript. We will also see, how to create and different types of HTML controls and how to validate HTML controls using javascript. So here is an example of a registration form design in HTML and CSS with code.

Finally, we will see how to get HTML control values using JavaScript.

Table of Contents

How to create registration form in HTML and CSS

Now, let us see how to create a responsive registration form. For this, first, we will create an HTML page. You can use any HTML code editor like Notepad++, VS Code, Atom, etc. We will use here Visual Studio code to create a registration form in HTML and CSS.

In Visual Studio Code, create a file with extension as .html or .htm.

Here, we will use the below HTML controls:

Textbox
Textarea
Radio button
Date
Number
Email
Tel
Checkbox
Dropdown
Password
Button, etc.

Apart from this, we have used a .CSS file to provide styling for the controls and we have provided the .css file reference in the HTML file.

Below is the registration form in html code:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Responsive Registaration Form</title>
        <link rel="stylesheet" href="./responsiveRegistration.css">
        <script type="text/javascript" lang="javascript" src="./responsiveRegistaration.js"></script>
    </head>
       
    <body>
        <h1>Student Registaration Form</h1>
        <div class="container">
            <div class="row">
                <div class="col-10">
                    <label for="fname">First Name:</label>
                </div>
                <div class="col-90">
                    <input type="text" id="fname" name="firstname" placeholder="Enter your first name">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="lname">Last Name:</label>
                </div>
                <div class="col-90">
                    <input type="text" id="lname" name="lastname" placeholder="Enter your last name">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="email">Email:</label>
                </div>
                <div class="col-90">
                    <input type="email" id="email" name="email" placeholder="it should contain @,.">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="mobile">Mobile:</label>
                </div>
                <div class="col-90">
                    <input type="tel" id="mobile" name="mobile" placeholder="only 10 digits are allowed">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="gender" required>Gender:</label>
                </div>
                <div class="col-90">
                    <input type="radio" id="male" name="gender" value="male"/>Male
                    <input type="radio" id="female" name="gender" value="female"/>Female
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="dob">Date Of Birth:</label>
                </div>
                <div class="col-90">
                    <input type="Date" id="dob" name="dob">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="address">Address:</label>
                </div>
                <div class="col-90">
                    <textarea name="address" id="address" cols="30" rows="10"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="city">City:</label>
                </div>
                <div class="col-90">
                    <input type="text" id="city" name="city" maxlength="10">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="pincode">Area PIN:</label>
                </div>
                <div class="col-90">
                    <input type="number" id="pin" name="pin" maxlength="6">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="state">State:</label>
                </div>
                <div class="col-90">
                    <input type="text" id="state" name="state">
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="qualification" required >Qualification:</label>
                </div>
                <div class="col-90">
                    <select name="qualification" id="qualification">
                        <option value=" ">Select Qualification:</option>
                        <option value="Graduation">Graduation</option>
                        <option value="BTech.">BTech.</option>
                        <option value="MTech.">MTech.</option>
                        <option value="MCA">MCA</option>
                        <option value="BCA">BCA</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="specialization">Specialization:</label>
                </div>
                <div class="col-90">
                    <input type="checkbox" class="specialization" id="cs" name="specialization[]" value="Computer Science">Computer Science<br/>
                    <input type="checkbox" class="specialization" id="it" name="specialization[]" value="Information Technology">Information Technology<br/>
                    <input type="checkbox" class="specialization" id="ca" name="specialization[]" value="Computer Architecture">Computer Architecture<br/>
                    <input type="checkbox" class="specialization" id="tc" name="specialization[]" value="Tele Communication">Tele Communication<br/>
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <label for="password">Password:</label>
                </div>
                <div class="col-90">
                    <input type="password" id="password" name="password" maxlength="8">
                </div>
            </div>
            <div class="row">
                <input type="submit" value="Registered" onclick="SaveStudentDetails()">
            </div>  
        </div>  
    </body>
</html>

And the .CSS file for the responsive registration form looks like below:

*{box-sizing: border-box;
}
input[type=text], input[type=email], input[type=number], input[type=select], input[type=date],input[type=select],input[type=password], input[type=tel]
{
    width: 45%;
    padding: 12px;
    border: 1px solid rgb(168, 166, 166);
    border-radius: 4px;
    resize: vertical;
}
textarea{
    width:45%;
    padding: 12px;
    border: 1px solid rgb(168, 166, 166);
    border-radius: 4px;
    resize: vertical;
}
input[type=radio],input[type=checkbox]{
    width: 1%;
    padding-left: 0%;
    border: 1px solid rgb(168, 166, 166);
    border-radius: 4px;
    resize: vertical;
}
h1{
    font-family: Arial;
    font-size: medium;
    font-style: normal;
    font-weight: bold;
    color: brown;
    text-align: center;
    text-decoration: underline;
}
label{
    padding: 12px 12px 12px 0;
    display: inline-block;
}
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float:left;
}
input[type=submit]:hover {
background-color: #32a336;
}
.container{
    border-radius: 5px;
    background-color:#f2f2f2;
    padding: 20px;
}
.col-10{
    float: left;
    width:10%;
    margin-top: 6px;
}
.col-90{
    float: left;
    width: 90%;
    margin-top: 6px;
}
.row:after{
    content: "";
    display: table;
    clear: both;
}
@media screen and (max-width: 600px) {
    .col-10,.col-90,input[type=submit]{
        width: 100%;
        margin-top: 0;
    }
}

box-sizing: border-box; – It is a CSS property, which sets the calculated value of total width and height of a form.
.container – This container class is used for stored all the objects in memory.
.col-10, .col-90 -Here we divided the screen into two parts from 100% of the total responsive grid view. One is col-10, which takes 10% of the total screen. It includes all the labels like First Name, Last Name, Email, Mobile, etc.) Similarly, col-90, which takes 90% of the total screen. It includes all the fields like text field, text area, number field, password field, date field, etc.
@media – It is a CSS query used for adopting all the screen resolution (such as a mobile, tablet, desktop, laptop, etc.)

And now the registration form in html and css looks like below:

registration form design in html and css with code

This is an example of a simple registration form in html code and css code.

Read: What is a Visual Studio Code Workspace

Responsive registration form validation using JavaScript

Now, let us see how to validate HTML controls using JavaScript. Here we have added one .js and refer it in the .HTML file.

And we have added one JavaScript function as validateControls(); for validation. The code looks like below:

function SaveStudentDetails() {
    validateControls();
}
var gender;
var specialization = [];
function validateControls() {
    //FirstName
    var fname = document.getElementById("fname")
    if (fname.value == "") {
        window.alert("please enter your first name");
        fname.focus();
        return false;
    }
    //LastName
    var lname = document.getElementById("lname")
    if (lname.value == "") {
        window.alert("please enter your last name");
        lname.focus();
        return false;
    }
    //Email
    var email = document.getElementById("email")
    if (email.value == "") {
        window.alert("please enter your valid email Id");
        email.focus();
        return false;
    }
    //Mobile
    var mobile = document.getElementById("mobile")
    if (mobile.value == "") {
        window.alert("please enter your 10 digits mobile no.");
        mobile.focus();
        return false;
    }
    //Gender   
    gender = document.querySelector('input[name="gender"]:checked');
    if (gender === null) {
        window.alert("Gender required!");
        gender.focus();
        return false;
    }
    //Dob
    var dob = document.getElementById("dob")
    if (dob.value == "") {
        window.alert("please enter your Date of Birth");
        dob.focus();
        return false;
    }
    //Address
    var address = document.getElementById("address")
    if (address.value == "") {
        window.alert("please enter your address details");
        address.focus();
        return false;
    }
    //City
    var city = document.getElementById("city")
    if (city.value == "") {
        window.alert("please enter your city name");
        city.focus();
        return false;
    }
    // Pin
    var pin = document.getElementById("pin")
    if (pin.value == "") {
        window.alert("please enter your 6 digits Area PIN");
        pin.focus();
        return false;
    }
    // State
    var state = document.getElementById("state")
    if (state.value == "") {
        window.alert("please enter your state name");
        state.focus();
        return false;
    }
    //Qualification
    var qualification = document.getElementById("qualification")
    if (qualification.selectedIndex < 1) {
        window.alert("please choose your qualification");
        qualification.focus();
        return false;
    }
    // Specialization

    var specializationArray = document.getElementsByClassName('specialization');
    for (var i = 0; specializationArray[i]; ++i) {
        if (specializationArray[i].checked) {
            specialization.push(specializationArray[i].value);
        }
    }
    if (specialization == "") {
        alert("Specialization required!");
        return false;
    }
    // Password
    var password = document.getElementById("password")
    if (password.value == "") {
        window.alert("please enter your password");
        password.focus();
        return false;
    }

    getControlValues();

}

This is how we can validate HTML controls using JavaScript.

Validation Of Checkbox

Below JavaScript code, we can use to validate a check box in HTML form using JavaScript.

var specializationArray = document.getElementsByClassName('specialization');
for (var i = 0; specializationArray[i]; ++i) {
if (specializationArray[i].checked) {
specialization.push(specializationArray[i].value);
}
}
if (specialization == "") {
alert("Specialization required!");
return false;
}

Validation Of Dropdown

Below code, we can use to validate a dropdown in HTML using JavaScript.

var qualification = document.getElementById("qualification")
if (qualification.selectedIndex < 1) {
window.alert("please choose your qualification");
qualification.focus();
return false;
}

Validation of Radio Button

Below is the JavaScript code to validate radio buttons in HTML.

gender = document.querySelector('input[name="gender"]:checked');
if (gender === null) {
window.alert("Gender required!");
gender.focus();
return false;

This is how to create registration form in html with validation.

Read: How to change background color in visual studio code

Get HTML control values using JavaScript

Now, let us see how to get HTML control values using JavaScript. For this particular example, I have displayed the values in an alert box.

Below is the JavaScript code:

function getControlValues() {
    alert("First Name= " + fname.value + "\n" + "Last Name= " + lname.value + "\n" + "Email= " + email.value + "\n" + "Mobile= " + mobile.value + "\n" + "Gender= " + gender.value + "\n" + "DateOfBirth= " + dob.value + "\n" + "Address= " + address.value + "\n" + "City= " + city.value + "\n" + "Pin= " + pin.value + "\n" + "State= " + state.value + "\n" + "Qualification= " + qualification.value + "\n" + "Specialization= " + specialization + "\n" + "Password= " + password.value)
}

This is how we can get HTML control values using JavaScript.