HTML Forms and Input Basics

HTML forms collect information and submit it for processing. Use labels, appropriate input types and clear instructions so people can complete forms reliably.

Create a form

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact details</legend>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </fieldset>
  <button type="submit">Send</button>
</form>

The action identifies where the form submits. The method determines how the browser sends the form data. A fieldset and legend group related controls. The server must be configured to receive and process submissions; validate data on the server even when the browser provides client-side validation.

Form attributes

Common form attributes include action, method, autocomplete and novalidate. Select attributes based on the behavior your form needs.

Input types

Choose a type that matches the information, such as text, email, password, number, date or checkbox. The browser can provide useful controls and basic validation for some types.

Input attributes

Attributes such as name, required, placeholder, min, max and maxlength configure inputs. A placeholder is a hint, not a replacement for a visible label.

Input form attributes

An input can use the form attribute to associate it with a form elsewhere in the same document by ID. Use this when the visual layout places controls outside the form element.

Choose GET or POST for a form

Use GET when submitting criteria to retrieve or filter information, such as a search. The submitted values appear in the URL, so do not use GET for passwords or other sensitive values. Use POST when sending data that changes or creates something on the server. POST places form data in the request body, but a secure connection and suitable server-side protections are still necessary.

The name attribute supplies a field’s key when the form is submitted. An id connects a control to its label and can identify it for scripts or CSS. A value without a name is generally not included as a named field in the submitted form data.

Use validation to help people fill out a form

Attributes such as required, minlength, max and an appropriate input type let the browser catch common mistakes before submission. These checks improve the form experience, but users can bypass browser-side rules, so validate and safely handle all submitted data on the server too.

Give each control a visible, descriptive label. A placeholder can show an example, but it should not be the only label because it disappears as the person types. For checkboxes and radio buttons, provide text that explains each choice.

For more on connecting labels to controls, see the W3C WAI guide to form labels.

HTML form questions

Does action="/submit" make a form work?

Only if your website has a server route at that address that accepts the selected method and processes the submitted fields. The path in a tutorial example is illustrative; HTML alone does not store or email submissions.

Why does an input need a name?

The name becomes the field key in the form submission. The ID is mainly used to associate a label and target the element; the name is what the receiving code uses to identify the submitted value.