How to Create a Register Form with CSS?

To create a register form with CSS, we will be using HTML forms. A registration form includes name, email, password, contact and other type of information collected from a user. It consists of input fields, buttons and other form elements which can be easily created using form tag.

In this article, we will be discussing and understanding the complete process of how to create a register form with CSS with stepwise explanation and complete example code.

Steps to Create a Register Form with CSS

We will be following below mentioned steps to create a register form with CSS.

• Creating Structure of Registration Form
• Designing Registration Form using CSS

Creating Structure of Registration Form

• To create a form we have used HTML form tag. We have created several input fields using input tag and used type attribute to specify the type of input field we want.
• Then, we have created labels to define each input field using label tag. We have also used select tag to create a dropdown list and used option tag to specify the list items for created dropdown list.
• At the end, we have used a submit button that is created using button tag to submit the form. All these form elements are wrapped insided a div container.

<h1>Registration Form</h1>
<div class="container">
    <form>
        <label for="name"><strong>Name</strong></label>
        <input type="text" placeholder="Enter Name" 
               name="name" required>
        <label for="email"><strong>Email</strong></label>
        <input type="text" placeholder="Enter Email" 
               name="email" required>
        <label for="Phone"><strong>Phone</strong></label>
        <input type="tel" placeholder="Enter Number" 
               name="phone" required>
        <label for="psw"><strong>Password</strong></label>
        <input type="password" placeholder="Enter Password" 
               name="psw" required>
        <label for="psw-confirm">
            <strong>Confirm Password</strong>
        </label>
        <input type="password" placeholder="Confirm Password" 
               name="psw-confirm" required>
        <label for="dob"><strong>D.O.B</strong></label>
        <input type="date" placeholder="Enter DOB" name="dob" 
               required class="dob">
        <label for="gender"><strong>Gender</strong></label>
        <select id="gender" name="gender" required>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
        <hr>
        <p>By creating an account you agree to our 
            <a href="#">Terms & Privacy</a>.
        </p>
        <button type="submit" class="registerbtn">
            Register
        </button>
        <div class="signin">
            <p>Already have an account? 
                <a href="#">Sign in</a>.
            </p>
        </div>
    </form>
</div>

Designing Registration Form using CSS

• We have used universal selector to set the font and font-size of the HTML document using CSS font-family and font-size property respectively. To center the heading we have used text-align property.
• To center the form in HTML document, we have used container class. We have used display property to make it a flex container then used justify-content property to center it horizontally.
• To style the form elements, we have used width to set the width of the form, set the padding and background-color of the form.
• We have used input, select as element selector to style the input fields and drop down list by setting its margin and padding. We have removed the border using border property.
• We have used :focus psuedo class to remove the outline when input fields are in focus. We have also set the cursor property value to text and pointer for dob and drop down list respectively.
• To style the submit button, we have used registerbtn class. We have changed its background and text color, set the margin and padding, removed its border, changed the cursor to pointer, set the opacity value and changed the font-size.
• We have used :hover psuedo class for submit button and set the opacity value upon hovering. At the end we have removed the underlining of link using text-decoration property.

* {
    box-sizing: border-box;
    font-family: Verdana, sans-serif;
    font-size: large;
}
h1 {
    text-align: center;
}        
.container {
    display: flex;
    justify-content: center;    
}
form {
    padding: 16px;
    width: 400px;
    background-color: rgb(255, 254, 195);
}
input,select {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
}
input,select:focus {

    outline: none;
}
.dob{
    cursor: text;
}
select {
    cursor: pointer;
}
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}
.registerbtn {
    background-color: #04af2f;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    font-size: larger;
}
.registerbtn:hover {
    opacity: 1;
}
a {
    color: dodgerblue;
    text-decoration: none;
}
.signin {
    background-color: #f1f1f1;
    text-align: center;
}

Complete Example Code

Here is the complete example code implementing above mentioned steps to create a register form with CSS.

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
            font-family: Verdana, sans-serif;
            font-size: large;
        }
        h1 {
            text-align: center;
        }        
        .container {
            display: flex;
            justify-content: center;
        }
        form {
            padding: 16px;
            width: 400px;
            background-color: rgb(255, 254, 195);
        }
        input,select {
            width: 100%;
            padding: 15px;
            margin: 5px 0 22px 0;
            display: inline-block;
            border: none;
        }
        input,select:focus {

            outline: none;
        }
        .dob{
            cursor: text;
        }
        select {
            cursor: pointer;
        }
        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }
        .registerbtn {
            background-color: #04af2f;
            color: white;
            padding: 16px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
            font-size: larger;
        }
        .registerbtn:hover {
            opacity: 1;
        }
        a {
            color: dodgerblue;
            text-decoration: none;
        }
        .signin {
            background-color: #f1f1f1;
            text-align: center;
        }       
    </style>
</head>
<body>
    <h1>Registration Form</h1>
    <div class="container">
        <form>
            <label for="name"><strong>Name</strong></label>
            <input type="text" placeholder="Enter Name" 
                   name="name" required>
            <label for="email"><strong>Email</strong></label>
            <input type="text" placeholder="Enter Email" 
                   name="email" required>
            <label for="Phone"><strong>Phone</strong></label>
            <input type="tel" placeholder="Enter Number" 
                   name="phone" required>
            <label for="psw"><strong>Password</strong></label>
            <input type="password" placeholder="Enter Password" 
                   name="psw" required>
            <label for="psw-confirm">
                <strong>Confirm Password</strong>
            </label>
            <input type="password" placeholder="Confirm Password" 
                   name="psw-confirm" required>
            <label for="dob"><strong>D.O.B</strong></label>
            <input type="date" placeholder="Enter DOB" name="dob" 
                   required class="dob">
            <label for="gender"><strong>Gender</strong></label>
            <select id="gender" name="gender" required>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
            </select>
            <hr>
            <p>By creating an account you agree to our 
                <a href="#">Terms & Privacy</a>.
            </p>
            <button type="submit" class="registerbtn">
                Register
            </button>
            <div class="signin">
                <p>Already have an account? 
                    <a href="#">Sign in</a>.
                </p>
            </div>
        </form>
    </div>
</body>
</html>

Conclusion

In this article we undestood how to create a registration form with CSS with stepwise explanation of the code. We have used HTML form along with form elements to create a form and used CSS to style the registration form.