How to Create a Form in HTML

Use the <form> element when you want to collect user input such as names, emails, passwords, search terms, or messages. Forms are the standard way to build sign-up pages, contact forms, login screens, and search boxes.

What you’ll build or solve

You’ll learn how to create a basic HTML form with input fields and a submit button. You’ll also know how to label fields clearly so the form is easier to use and easier to maintain.

When this approach works best

This approach is the right choice when users need to enter and submit data through a web page.

Common real-world scenarios include:

• Contact forms
• Sign-up forms
• Login forms
• Search bars
• Newsletter subscription forms

This is a bad idea when the page only needs to display information without any user input. In that case, plain text, buttons, or links are enough.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add a <form> with labeled fields and a submit button

Wrap the input fields inside a <form> element. Add a <label> for each field, then include a submit button.

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

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

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

To collect more information, add more labeled fields inside the same form.

<form>
  <label for="username">Username</label>
  <input type="text" id="username" name="username">

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

  <button type="submit">Create account</button>
</form>

What to look for:

• <form> wraps the full input area
• <label> tells the user what each field is for
• for on the label should match the input id
• name gives each field a key when the form is submitted
• type="submit" makes the button send the form

Examples you can copy

Contact form

<form>
  <label for="full-name">Full name</label>
  <input type="text" id="full-name" name="fullName">

  <label for="message">Message</label>
  <input type="text" id="message" name="message">

  <button type="submit">Send message</button>
</form>

Login form

<form>
  <label for="login-email">Email</label>
  <input type="email" id="login-email" name="email">

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

  <button type="submit">Log in</button>
</form>

Newsletter form

<form>
  <label for="newsletter-email">Email address</label>
  <input type="email" id="newsletter-email" name="email">

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

Common mistakes and how to fix them

Mistake 1: Leaving out labels

What the reader might do:

<form>
  <input type="text" name="name">
  <input type="email" name="email">
</form>

Why it breaks: users do not get clear field names, and accessibility suffers because screen readers depend on labels.

Corrected approach:

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

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

Mistake 2: Using a label for value that does not match the input id

What the reader might do:

<label for="user-email">Email</label>
<input type="email" id="email" name="email">

Why it breaks: clicking the label will not focus the correct input, and the field relationship becomes less reliable.

Corrected approach:

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

Mistake 3: Forgetting the name attribute

What the reader might do:

<form>
  <label for="email">Email</label>
  <input type="email" id="email">
</form>

Why it breaks: the field may appear normally, but it will not send a useful key when the form is submitted.

Corrected approach:

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

Troubleshooting

If clicking the label does nothing, check that the label for value matches the input id.

If the form submits but some field data is missing, add a name attribute to each input.

If the wrong keyboard appears on mobile, check that the type value matches the field, such as email or password.

If the form structure feels messy, group related inputs inside the same <form> and keep labels directly above or next to their fields.

Quick recap

• Use <form> to wrap all form fields
• Add a <label> for every input
• Match each label for value to the input id
• Add a name attribute to every field
• Use a submit button to send the form