Forms & labels

01Labels are essential

Connect each label to its input with matching for and id values. A placeholder is a hint, not a replacement for a visible label.

<label for="name">Your name</label>
<input id="name" name="name" autocomplete="name" required>

02Choose the right input

Use email for email addresses and textarea for longer messages. The name attribute identifies a field when submitting it. Browser validation improves usability; the server must validate again.

<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="message">Your project</label>
<textarea id="message" name="message" rows="4"></textarea>

03A form needs somewhere to send

HTML alone does not deliver an email. A live form needs a working action endpoint or JavaScript connected to a backend. Test delivery before promising that requests are received.

<!-- Example only: /contact must be implemented on a server. -->
<form action="/contact" method="post">
  <label for="project">Project</label>
  <input id="project" name="project" required>
  <button type="submit">Send request</button>
</form>

04Try it yourself

Add a labelled email field. This playground does not send or store form data.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.