How to create a form

Build a small form

The form sends named controls to the URL in action using the selected method.

<form action="/contact" method="post">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email"
         autocomplete="email" required>

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

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

Label every control

Match a label's for with the control's unique id. Placeholder text is an optional hint, not a replacement for a persistent label.

Choose helpful attributes

  • Use the most specific input type, such as email, tel, or date
  • A name is required for a value to be submitted
  • Use autocomplete tokens for common personal fields
  • Use fieldset and legend for related radio buttons or checkboxes

Validate responsibly

Client-side constraints improve feedback but can be bypassed, so validate and sanitize all values on the server. Explain errors in text, associate them with controls, preserve valid input, and focus the first error when appropriate.