Responsive Registration Form in HTML with CSS Source Code

Mobile View:

responsive registration form using html and css

I will discuss creating a responsive registration form in HTML CSS in this article. Also, discuss how to make the simple form into a responsive form. I hope you are interested in creating the responsive form. Let's Start to build the registration form.

There is various type of forms like Sign-up form and Login Form. The main purpose of the forms is to collect information about your customers.

The form consists of different elements:

Labels
Input Fields
Radio Buttons
Drop-Down Menus
Buttons
Company Logo & Title

Create a Responsive Registration Form:

If you want to learn how to create a responsive registration form in HTML CSS. First, you need to create an HTML file. Then add the syntax of HTML. Add <div> container in the file and start to create a simple form accordingly to your requirements.

Add Labels and corresponding Input Fields.
Give background color of form.
Add Button
Style the Button, Labels, and Input Fields.
Add Legend to the form
Add Shadow Effect

So next step is to create a form responsive. To make the form responsive add a simple media query.

You can see in the above image of Registration Form. I added 4 input fields e.g First Name, Last Name, Email, and Password. You can add input fields accordingly to your requirements. I have used media queries of CSS to make it responsive. If you have not understood the CSS media query. Then you need to copy-paste the code that is given below.

Responsive Registration Form With HTML CSS Source Code:

If you can not understand the query. Do not worry about that. I have provided a complete HTML CSS Source code. Simply, You need to copy the Source code and create a single HTML file then paste it into your created HTML file. Enjoy the Registration Responsive Form 😍.

            <!---Responsive Registration Form in HTML CSS --->
<!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>Responsive Registration Form</title>
    <style>
        body {
            font-family: Georgia;
            font-weight: 200;
        }
        /* Container having Form */
        .container {
            padding: 40px;
        }


        form {
            background-color: aquamarine;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 1px 1px 4px 4px; /* shadow around the border of the form*/
        }
             /* input field + label is considered as row */
        .row {
            padding: 12px 0px;
        }

        input {
            width: 75%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;


        }

        label {

            width: 25%;
            float: left;

        }

        button {
            float: right;
            background-color: rgb(224, 148, 6);
            color: black;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: .5px .5px .5px .5px;  /* shadow around the border of the button */
        }

        

        /* for making the form responsive we use media screen */
        @media screen and (max-width: 600px) {

            input,
            button {
                width: 100%;
                margin-top: 10px;

            }
        }
    </style>
</head>

<body>
    <div class="container">

        <form action="">
            <fieldset>
                <legend>Responsive Form</legend>
                <div class="row">
                    <label for="First_Name" class="Label"> First Name</label>
                    <input type="text" id="First_Name" name="fname" placeholder="Enter Your First Name...">
                </div>
                <div class="row">
                    <label for="Last_Name" class="Label"> Last Name</label>
                    <input type="text" id="Last_Name" name="lname" placeholder="Enter Your Last Name...">
                </div>
                <div class="row">
                    <label for="Email" class="Label"> Email</label>
                    <input type="email" id="email" name="email" placeholder="example@gmail.com">
                </div>
                <div class="row">
                    <label for="Pass" class="Label"> Password</label>
                    <input type="password" id="pass" name="pass" placeholder="Create Your Strong Password">
                </div>

                <div class="row"> 
                    <button>Submit</button>
                </div>
            </fieldset>

        </form>
    </div>
</body>

</html>

Responsive Registration Form in HTML with CSS Source Code

Create a Responsive Registration Form:

Responsive Registration Form With HTML CSS Source Code:

Post a Comment

How To Get IntelliJ IDEA Ultimate Student License

Made with Love by

#buttons=(Accept !) #days=(20)

Contact form

Responsive Registration Form in HTML with CSS Source Code

Create a Responsive Registration Form:

Responsive Registration Form With HTML CSS Source Code:

You may like these posts

Post a Comment

#buttons=(Accept !) #days=(20)

Contact form