How to create registration form in html

HtmlHow-ToBeginner · 4 min read

How to Create a Registration Form in HTML: Simple Guide

To create a registration form in HTML, use the <form> element with input fields like <input> for username, email, and password. Add <label> tags for accessibility and a <button> to submit the form.

📐

Syntax

A registration form uses the <form> tag to group input fields. Each input field uses <input> with a type attribute like text, email, or password. Labels describe each input for users and screen readers. The form ends with a submit button using <button type="submit">.

html

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

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

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

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

Output

A form with labeled fields for Username, Email, Password, and a Register button.

💻

Example

This example shows a simple registration form with username, email, and password fields. Each field is labeled for clarity and accessibility. The form uses the POST method to send data when submitted.

html

<!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>
    form {
      max-width: 300px;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-family: Arial, sans-serif;
    }
    label {
      font-weight: bold;
    }
    input {
      padding: 8px;
      font-size: 1rem;
    }
    button {
      padding: 10px;
      font-size: 1rem;
      background-color: #007BFF;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <form action="/submit" method="post" aria-label="Registration form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

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

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

    <button type="submit">Register</button>
  </form>
</body>
</html>

Output

A clean registration form with labeled input fields for Username, Email, Password, and a blue Register button centered on the page.

⚠️

Common Pitfalls

Common mistakes include missing label tags, which hurts accessibility, forgetting the name attribute on inputs, which prevents data submission, and not using the correct type for inputs like email or password. Also, omitting the required attribute can allow empty submissions.

html

<!-- Wrong: Missing label and name -->
<form>
  <input type="text" id="user">
  <button type="submit">Submit</button>
</form>

<!-- Right: Added label and name -->
<form>
  <label for="user">Username:</label>
  <input type="text" id="user" name="user" required>
  <button type="submit">Submit</button>
</form>

📊

Quick Reference

<form>: Wraps the entire form and defines submission behavior.
<label>: Describes each input for users and screen readers.
<input>: Collects user data; use type for text, email, password, etc.
name attribute: Required on inputs to send data.
required attribute: Makes fields mandatory.
<button type="submit">: Sends form data.

✅

Key Takeaways

Use

Always include the name attribute on inputs to ensure data is sent.

Use appropriate input types like email and password for better user experience.

Add labels for accessibility and required attributes to prevent empty submissions.

Style the form with CSS for a clean, user-friendly layout.