Design a Registration Form Using HTML and CSS

Today we are going to build a simple Registration form using HTML and CSS. Registration form have different types are used intensively on registration page of website to allow user or visitor can create their own profile on website. By designing a registration form and make it scale to fit the browser window and in all devices.

The HTML

In the HTML, we will put form, Here is the code, I’ll explain some of the interesting parts later.

index.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>Registration Form - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="inputs">
            <label for="">User Name</label>
            <input type="text" placeholder="Enter Your Name" class="input-field" required />
            <label for="">Email Address</label>
            <input type="email" placeholder="Enter Email Address" class="input-field" required />
            <label>Gender</label>
            <div class="radio-btn">
                <label>
                    <input type="radio" name="gender" value="Male">
                    <span class="mark">Male</span>
                </label>
                <label>
                    <input type="radio" name="gender" value="Female">
                    <span class="mark">Female</span>
                </label>
            </div>
            <label for="">Date Of Birth</label>
            <input type="date" class="input-field" required>
            <div class="text">
                <input type="checkbox">
                <p>i accept the <a href="#">terms & conditions</a></p>
            </div>
            <div class="btn">
                <button type="button" name="button">Create Account</button>
            </div>
        </div>
    </div>
</body>

</html>

The CSS

For the clearness of the form to give like colors, design, margin, padding and more using CSS.

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #a39eec;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 480px;
    box-shadow: 10px 2px 4px rgba(230, 226, 226, 0.1),
     0 4px 8px rgba(230, 224, 224, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #26242e;
    background-color: #f6f8fb;
}

.inputs {
    width: 250px;
    height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.input-field {
    border: none;
    width: 250px;
    height: 45px;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    padding-left: .7rem;
}

::placeholder {
    color: #bfbfbf;
}

.text {
    display: flex;
    align-items: center;
}

.text p {
    margin-left: 8px;
    font-weight: bold;
}

p a {
    text-decoration: none;
}

.btn button {
    width: 200px;
    height: 40px;
    margin-left: 20px;
    border: none;
    background-color: #1294fc;
    border-radius: 4px;
    color: #ffff;
}

.btn button:hover {
    background-color: #065da3;
}

Sagar Developer

Design a Registration Form Using HTML and CSS | Sign Up Page |

2/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Design a Registration Form Using HTML and CSS | Sign Up Page |

Related Posts

2/Post a Comment/Comments

Post a Comment

Contact Form