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 Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram