HTML Registration Form

Creating an interactive and responsive user registration form is a fundamental skill in web development. On most websites, users interact primarily through forms, whether to sign up for a service, enter personal information, or leave feedback. This tutorial will show you how to use HTML and CSS to build a stylish and simple user registration form.

HTML User Registration Form Design Demo

Step 1: Setting Up Your HTML File

First, create a new HTML file. Name it whatever you want, such as register.html.

In your new HTML file, you'll need to add the basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
</head>
<body>
    <!-- Body content goes here -->
</body>
</html>

The above code creates a blank HTML page titled "Registration Form."

Step 2: Creating the Form in HTML

Next, let's add a form inside the <body> tag:

<!-- Form -->
<div class="box-outer">
    <form name="signup_form" method="post" action="" autocomplete="off">
        <h2 class="heading">Sign Up Form</h2>

        <label>First Name</label>
        <input type="text" name="first_name" class="input-control" placeholder="Your first name">

        <label>Last Name</label>
        <input type="text" name="last_name" class="input-control" placeholder="Your last name">

        <label>Email</label>
        <input type="text" name="email" class="input-control" placeholder="Your email address">

        <label>New Password</label>
        <input type="password" name="password" class="input-control">

        <input type="submit" name="submit" class="button" value="Signup Now For FREE">
    </form>
    <hr>
    <div>By clicking Sign Up, you are indicating that you have read and agree to the <a href="#" target="_blank"><u>Terms of Use</u></a> and <a href="#" target="_blank"><u>Privacy Policy</u></a>.</div>
</div>
<!-- Form End -->

The above code adds a registration form with fields for the user's first name, last name, email, and password. The form also contains links to the Terms of Use and Privacy Policy and a Submit button.

Step 3: Styling the Form with CSS

Let's add some CSS to the form to make it more visually appealing. You can include this within the <style> tag in the document's <head> or a separate CSS file. For this tutorial, we'll place this in an HTML file:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <style>
    /* add your CSS here */
    </style>
</head>

And here's the CSS:

/* Outer box styles */
.box-outer {
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: .12rem;
}
/* Heading styles */
.heading {
    margin-bottom: 1rem;
}
/* Input control styles */
.input-control {
    transition: border .1s linear 0s, box-shadow .1s, width .25s, color .2s;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px rgb(50 50 93 / 10%), 0 1px 0 rgb(0 0 0 / 2%);
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: .969rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    background-color: #FFF;
    background-clip: padding-box;
    appearance: none;
    border-radius: .12rem;
    margin-bottom: 1rem;
}
.input-control:focus {
    border-color: #9fd4fc;
    box-shadow: 0 0 0 4px rgb(0 149 255 / 15%);
    background-color: #fffffa;
    outline: 0;
}
/* Button styles */
.button {
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgb(50 50 93 / 10%), 0 1px 0 rgb(0 0 0 / 2%);
    background: linear-gradient(#6dbd45, #51a326);
    border: 0;
    padding: .5rem;
    border-radius: .12rem;
}
.button:focus {
    background: linear-gradient(#5EA534, #519327);
}

This CSS adds styles to the form, input, and button.

Thats all! You have created a user registration form using HTML and CSS. Also note that when you submit this form, no data is sent anywhere; to do so, server-side programming would need to be added.

Remember to replace the # in the form's action attribute with the URL of your server-side script, verify that the links in your Terms of Use and Privacy Policy point to the correct documents.

Found This Useful? Share This Page!