Create a Signup Form with HTML and CSS

In this article, we will be understanding How to create a signup form with HTML and CSS. A sign-up form allows any new user visiting the website to register. It includes adding an email-id, password, repeat password, and clicking on the Sign-Up button to register.

To allow the browser to save the password, click the Remember Me. You can also provide a Terms & Policies link so the users can first read the registration terms. Let us see how to create a signup form with HTML and CSS.

Steps to Create Sign Up Form

We are following 2 steps to create a signup form with HTML and CSS. First step is to create structure of our sign up form using HTML. Second step is to style our sign up form using CSS.

Step 1 - Add HTML

Here is the HTML code to create the sign up form. Here is a stepwise procedure:

  • A div container is set for the form and form is created using the form element.
  • We have used labels for each input field and set the email-id field using the input type text.
  • The password and repeat password fields are set using the input type password.
  • We have used button for creating a sign up button and a checkbox for remember me.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Sign-Up form with HTML and CSS
    </title>
    <link rel="stylesheet" href="form.css">
</head>
<body>
    <form>
        <div class="formContainer">
            <h1>Sign Up Form</h1>
            <hr>
            <label for="email">
                <strong>Email</strong>
            </label>
            <input type="text" placeholder="Enter Email" 
                      name="email" required>
            <label for="password">
                <strong>Password</strong>
            </label>
            <input type="password" 
                      placeholder="Enter Password"
                      name="password" required>
            <label for="repeatPassword">
                <strong>Repeat Password</strong>
            </label>
            <input type="password"  
                      placeholder="Repeat Password"
                      name="repeatPassword" required>
            <label>
                <input type="checkbox" checked="checked" 
                          name="remember" id="check">
                Remember me
            </label>
            <p>
                By creating an account you agree to our
                <a href="#" style="color:dodgerblue">
                    Terms & Privacy</a>.
            </p>
            <div>
                <button type="submit" class="signup">
                    Sign Up
                </button>
            </div>
        </div>
    </form>
</body>
</html>

Step 2 - Add CSS

Here is the CSS code to style the sign up form. The following CSS file styles input fields, sign up button, applies padding, font sizes and background color. 

* {
    box-sizing: border-box
}
body {
    font-family: 'Segoe UI', Tahoma,
        Geneva, Verdana, sans-serif;
}
/* Styling the form input fields */
input[type=text],
input[type=password] {
    width: 100%;
    font-size: 28px;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}
label {
    font-size: 15px;
}
input[type=text]:focus,
input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}
/* Style the Sign Up button */
button {
    font-size: 18px;
    font-weight: bold;
    background-color: rgb(10, 119, 13);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}
/* To change opacity of button upon hovering */
button:hover {
    opacity: 1;
}
.formContainer {
    padding: 16px;
}
.formContainer p {
    font-size: 28px;
}
#check {
    margin-bottom: 15px;
}

Complete Example Code

Here is the complete code To create a signup form with HTML and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Sign-Up form with HTML and CSS
    </title>
    <style>
        * {
            box-sizing: border-box
        }
        body {
            font-family: 'Segoe UI', Tahoma,
                Geneva, Verdana, sans-serif;
        }
        input[type=text],
        input[type=password] {
            width: 100%;
            font-size: 28px;
            padding: 15px;
            margin: 5px 0 22px 0;
            display: inline-block;
            border: none;
            background: #f1f1f1;
        }
        label {
            font-size: 15px;
        }
        input[type=text]:focus,
        input[type=password]:focus {
            background-color: #ddd;
            outline: none;
        }
        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }
        button {
            font-size: 18px;
            font-weight: bold;
            background-color: rgb(10, 119, 13);
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }
        button:hover {
            opacity: 1;
        }
        .formContainer {
            padding: 16px;
        }
        .formContainer p {
            font-size: 28px;
        }
        #check {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <form>
        <div class="formContainer">
            <h1>Sign Up Form</h1>
            <hr>
            <label for="email">
                <strong>Email</strong>
            </label>
            <input type="text" placeholder="Enter Email"
                      name="email" required>
            <label for="password">
                <strong>Password</strong>
            </label>
            <input type="password" 
                      placeholder="Enter Password" 
                      name="password" required>
            <label for="repeatPassword">
                <strong>Repeat Password</strong>
            </label>
            <input type="password"  
                      placeholder="Repeat Password" 
                      name="repeatPassword" required>
            <label>
                <input type="checkbox" checked="checked" 
                          name="remember" id="check">
                Remember me
            </label>
            <p>
                By creating an account you agree to our
                <a href="#" style="color:dodgerblue">
                    Terms & Privacy</a>.
            </p>
            <div>
                <button type="submit" class="signup">
                    Sign Up
                </button>
            </div>
        </div>
    </form>
</body>
</html>
Updated on: 2024-07-19T13:26:37+05:30

16K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements