Tutorial: HTML forms to ask the user for data

Every page that "does something" with what you type (a login, a search box, a contact form) starts with the same tag: <form>. Today you'll build one, and no, you don't need to know backend yet.

Step 1: the form structure

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

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

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

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

Each <input> has an id that matches its <label>'s for. That's not decoration: it's how the browser (and screen readers) know which field belongs to which label.

Step 2: use the right input type

<input type="email" /> <!-- validates it has an @ -->
<input type="number" />
<input type="date" />
<input type="checkbox" />

Using type="email" instead of type="text" gives you free validation from the browser. Zero lines of JavaScript, zero effort, maximum elegance.

Step 3: mark required fields

The required attribute stops the form from submitting if the field is empty. Try it: leave the name blank and click "Send". The browser will politely scold you, so you don't have to.

What did you just learn?

• How to structure a form with <form>, <label>, and <input>.
• Why the right input type saves you work.
• How to mark required fields without writing any JavaScript.

This form doesn't send data anywhere yet (that needs a server), but later we'll validate and improve it with JavaScript.