Make inputs easy to understand

One idea at a time

Forms collect information through controls such as text inputs, checkboxes, and buttons. A clear label tells someone what each control expects. The label should remain visible while they type; placeholder text is not a replacement because it disappears when the input contains a value.

A label uses for to identify the input it describes. That value must match the input id. Clicking the label then focuses or activates its control, and assistive technology can use the association to announce its purpose. Each id should be unique within a page.

The type attribute changes the kind of input. Keyboard focus identifies the control receiving your typing or keypresses. An email input gives the browser information about the expected format, but it cannot prove that an address exists. The name identifies a field when form data is submitted. An id connects elements within the document; name and id have different jobs.

Meet the controls before trying the form

Walk through an example

<fieldset>
  <legend>Reader details</legend>
  <label for="reader-email">Email address</label>
  <input id="reader-email" name="email" type="email">
  <p>This is a learning example. Nothing is sent.</p>
  <button type="button">Example button</button>
</fieldset>

Place this fragment inside body in your local page. Click Email address: focus should move to the input. Press Tab to move through the controls. The fieldset groups the controls under its legend. We leave it outside a form so this local demo cannot submit. The button explicitly uses type="button", which also prevents submission if it is later placed in a form. It does not save anything either: there is no JavaScript handler or service behind this example. Use pretend information while experimenting.

See it happen: try a small change

<label>Name
  <input required>
</label>

One choice or several?

Use a text input for a short answer, textarea for a longer message, and select for a dropdown. Radio buttons with the same name form a single-choice group. Checkboxes allow independent choices. Give every control a visible label, and group related options in a fieldset with a legend naming the question.

A textarea has opening and closing tags; put any initial message between them. A select also has a closing tag and contains option elements, one per choice. Each option wraps its visible text and can have a value for submission. You will build that dropdown in the later complete-form lesson. Radio buttons and checkboxes are not new tags: both use input, with type="radio" or type="checkbox". In the next example, each label wraps its input and its visible words.

<fieldset>
  <legend>Delivery</legend>
  <label><input type="radio" name="delivery" value="first"> Collect</label>
  <label><input type="radio" name="delivery" value="second"> Deliver</label>
</fieldset>

What happens when you submit?

A form groups controls for submission. A submit button asks the browser to submit that form. required is a boolean attribute: its presence enables the requirement; remove it to disable it. It rejects an empty field, and type="email" checks an email-like format. Neither proves that the information is true. A normal button with type="button" does not trigger those submission checks.

<form>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email">
  <button type="submit">Check email</button>
</form>

The preview uses JavaScript supplied by Tuklas to keep submission on this page and show a demo message. You are experimenting with HTML controls; you do not need to write that JavaScript yet. No data is sent or saved.

On a working website, action chooses the submission URL and method chooses how to send data. GET puts data in the URL; POST puts it in the request body. POST does not encrypt data. A real service also needs HTTPS and server-side validation. An HTML form by itself cannot deliver email or create an account.

Try it in your browser

Copy the fieldset example into body, outside a form, and use pretend text. Save and refresh. Click its label, type into the field, and press Tab to reach the button. The ordinary Example button deliberately does nothing; use the supplied preview for validation experiments.

A common wrong turn

Inside a form, a button without an explicit type usually acts as a submit button. That can navigate or reload a page unexpectedly. This learning example uses an ordinary button deliberately. A production form needs an intentional submission destination, data handling, and suitable error messages; HTML alone does not create an email subscription service.

Change one thing

Change only the label text and click it again. The association still works because it depends on for and id, not the displayed words. Next temporarily mismatch those two attributes and try again. Restore the matching values, then navigate with Tab to make sure you can see where keyboard focus is.

Go to the source

• MDN: explore this topic ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.