Simple Registration Form in HTML CSS Source Code

Welcome to all my readers! I hope you are fine. Today, I will show you how to create a simple registration form in HTML CSS.

After reading this article, I hope you know how to create a Simple Registration From HTML CSS. After that, you can build a good form like this.

Simple Registration Form in HTML CSS Source Code

This is a simple form, not a responsive form. This form view is the same in both Windows and Mobiles. If you are in search of a responsive form. Please Checkout the given link below.

Let's Start to build the simple registration form.

First, Open your HTML Editor and Write a simple syntax for the HTML and CSS. Then go to between the <body> </body> section and create a div with the class name "container". In the Container div, create a div for the form title with the class name "title". Then insert a <hr> tag below the form title div. After that next step is to create a div for the form with the class name "form" and then insert a <form> tag in it.

Create two div in the <form> tag, the first div with the class name "details" for input fields and labels and the second div for gender radio buttons.

Into the details div, you need to insert a div with the class name " input-field" for the label and input field.

Gender div is used to store the gender information of the user. The last div is inserted in the <form> tag which is used for the Register button.

Second, Copy the CSS code that is given below and paste it into the <style></style> tag. If you want to use the 'Poppins Font' then copy this link (<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap">) and paste it into the <head> tag.

If you do not understand anything then simply copy the below code and paste it into the HTML file and enjoy the simple registration form.

        <!---Simple Registration Form in HTML Source Code --->
            <!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="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap">
    <title>Simple Registration Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins';
        }

        body {
            background: linear-gradient(to right, #33ccff 20%, #ff99cc 72%); 
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
        }

        .container {
            background-color: white;
            max-width: 650px;
            width: 100%;
            padding: 10px 25px;
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }

        .container .title {
            font-weight: 500;
            font-size: 20px;
            position: relative;
        }

        .container hr { 
            border: none;
            height: 4px;
            width: 40px;
            border-radius: 2px;
            background: linear-gradient(to right, #33ccff 20%, #ff99cc 72%);
        }

        .container form .details {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 20px 0 12px 0;
        }

        form .details .input-field {
            margin-bottom: 15px;
            width: calc(100% / 2 - 20px);
        }

        .details .input-field span {
            display: block;
            font-weight: 500;
        }

        .details .input-field input[type=text],input[type=email],input[type=password] {
            height: 40px;
            border-radius: 5px;
            width: 100%;
            outline: none;
            font-size: 16px;
            border-bottom-width: 2px;
            padding-left: 10px;
            border: 1px solid #ccc;
            transition: all 0.3s ease;
        }

        .details .input-field input[type=text]:focus {
            border-color: #9b59b6;
        }

        .gender-details {
            display: flex;
            padding-bottom: 30px;
        }

        .gender-details .option {

            padding-right: 30px;
        }
        input[type=submit]{
            width: 100%;
            background: linear-gradient(to right, #33ccff 20%, #ff99cc 72%);
            border: none;
            height: 45px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.5s ease;
            font-size: 20px;
            font-weight: 500;
        }
        input[type=submit]:hover{
            background: linear-gradient(to left, #33ccff 20%, #ff99cc 72%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="title">
            Simple Registration Form
        </div>
        <hr>
        <div class="form">
            <form action="#">
                <div class="details">
                    <div class="input-field">
                        <span>First Name</span>
                        <input type="text" placeholder="Enter your first name" required>
                    </div>
                    <div class="input-field">
                        <span>Last Name</span>
                        <input type="text" placeholder="Enter your last name" required>
                    </div>
                    <div class="input-field">
                        <span>Phone Number</span>
                        <input type="text" placeholder="Enter your Phone number" required>
                    </div>
                    <div class="input-field">
                        <span>Email</span>
                        <input type="email" placeholder="Enter your email address" required>
                    </div>
                    <div class="input-field">
                        <span>Password</span>
                        <input type="password" placeholder="Enter your password" required>
                    </div>
                    <div class="input-field">
                        <span>Confirm Password</span>
                        <input type="password" placeholder="Enter your password" required>
                    </div>
                </div>
                <div>
                    <div class="input-field">
                        <span>Gender</span>
                    </div>
                    <div class="gender-details">

                        <div class="option">
                            <input type="radio" name="gender" required>
                            <label for="Male">Male</label>

                        </div>
                        <div class="option">
                            <input type="radio" name="gender" required>
                            <label for="Male">Female</label>

                        </div>
                    </div>
                </div>
                <div class="submit">
                    <input type="submit" value="Register">
                </div>
            </form>
        </div>
    </div>
</body>

</html>

Simple Registration Form in 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

Simple Registration Form in HTML CSS Source Code

You may like these posts

Post a Comment

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

Contact form