Forms & HTML

How to create a registration form in HTML (Step by Step)

A beginner-friendly guide to building a clean, modern registration form from scratch using plain HTML and CSS.

April 19, 2026 · 7 min read · MyFormConnect

Creating a registration form is one of the first major milestones when learning web development. Whether you're making a signup page for a new app or a membership site, HTML forms are the standard way to collect user data.

In this beginner-friendly tutorial, we'll build a registration form step by step. We'll start with the basic HTML structure, add the necessary input fields, and finally apply some basic CSS so it looks great.

What we will build

Here is the exact registration form we are going to create. It is clean, responsive, and fully functional using HTML and CSS.

Step 1: The Form Tag

Every HTML form starts with the <form> tag. It acts as a container for all your input fields and buttons.

<form action="YOUR_ENDPOINT_URL" method="POST">
  
</form>

The action attribute tells the browser where to send the data when the user clicks submit. The method="POST" ensures the data is sent securely.

Step 2: Adding Input Fields

For a registration form, we typically need a First Name, Email, and Password. We use the <input> tag paired with a <label>.

<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name" required>

<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

<label for="password">Password</label>
<input type="password" id="password" name="password" required>

Notice the required attribute? This tells the browser to stop the user from submitting the form if they leave the field blank.

Step 3: The Submit Button

Finally, we need a button for the user to click to submit their registration.

<button type="submit">Create Account</button>

The Final Ready-to-Run Code

Here is the complete, ready-to-run HTML code for your registration form. It includes a bit of internal CSS so that it looks clean and modern right out of the box. You can copy this code, save it in a file named register.html, and open it in your browser!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #f3f4f6;
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }
    .form-container {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #374151;
    }
    input {
      width: 100%;
      padding: 10px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      background-color: #2563eb;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <h2 style="margin-top:0;">Create an Account</h2>
    
    <!-- Form Starts Here -->
    <form action="https://myformconnect.io/submit/YOUR_FORM_ID" method="POST">
      
      <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" id="first_name" name="first_name" placeholder="Jane" required>
      </div>

      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" required>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••" required>
      </div>

      <button type="submit">Register</button>
    </form>
  </div>

</body>
</html>

Where does the data go?

HTML forms are excellent for collecting data, but they don't process it. Usually, you need to write server-side code (like PHP, Node.js, or Python) to save user registrations to a database.

If you don't want to build a backend from scratch, you can use an endpoint service like MyFormConnect. Just replace YOUR_FORM_ID in the action URL above with your unique MyFormConnect endpoint, and your registrations will automatically flow into your dashboard and email inbox.

Happy coding! Check out our guide on how to host an HTML website on GitHub Pages if you need a free place to put your new form online, or read the form capture without a backend guide to see how endpoints work in more detail.