HTML / Element

How to Use the form Element

The HTML form element is the foundation for grouping fields and buttons so users can send the data they entered.

The answer first

Put controls such as input, select, textarea, and button inside a form. Use action for the destination and method for how the data is sent.

A form creates the input and submission interface; it does not store data by itself. The server at the destination also needs code to receive and process the submission.

Minimal example

<form action="/search" method="get">
  <label for="keyword">Search term</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Search</button>
</form>

The label explains the control, name names the submitted data, and value supplies its value. If action is omitted, the destination is the current document; the default method is generally GET.

Try it

Because the destination is omitted, this example sends a GET request to this page. If you submit it empty, the browser's constraint validation will respond first.

What goes inside a form?

Element	Main role	Example
`input`	Enter or choose one-line text, dates, checks, and more	Name, email, agreement
`select`	Choose from prepared options	Region, category
`textarea`	Enter multiple lines of text	Message
`button`	Start submission, reset, or another scripted action	Submit, reset
`label`	Associate a name or explanation with a control	Email address

Keep meaning and presentation separate. Use the form controls for their semantics and CSS for the page layout.

action and method

Setting	What it does	Common use
`action`	The URL that receives the data	A search or registration endpoint
`method="get"`	Puts the data in the URL query	Search or filtering whose result should be shareable
`method="post"`	Sends the data in the request body	Creating or updating data that should not be put in the URL
`method="dialog"`	Closes the containing dialog without a network request	Returning a confirmation or choice from a dialog

POST does not encrypt data. Use HTTPS for transport security, and implement authentication, authorization, and server-side validation.

What gets submitted?

A control with a name supplies a candidate name and value for the submission. A control without a name is normally not included in a regular form submission.

A disabled control is not included in a regular form submission.
An unchecked check box is not included in a regular form submission.
Only the submit button that started the submission is included as the submitter's button value.
Do not trust data just because it came through a browser; validate it on the server.

<input name="color" value="blue">
<input type="checkbox" name="terms" value="yes" checked>

Example submitted data:
color=blue
terms=yes

Make forms understandable with label and fieldset

Give every control a label that makes its purpose clear. When several choices form one question, group them with fieldset and legend.

<fieldset>
  <legend>Contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

A placeholder is a hint or example. It is not a replacement for a persistent label.

Check input conditions

Attributes such as required, type="email", min, max, and pattern let the browser check input conditions.

<label for="age">Age</label>
<input id="age" name="age" type="number" min="0" max="130" required>

Browser validation helps prevent mistakes, but it is user-experience support. Users can alter or bypass client-side processing, so important data must also be checked on the server.

Common mistakes

Putting one form inside another. Forms cannot be nested.
Forgetting name. A visible field without a submitted name is difficult for the receiver to process.
Leaving the type off a button that should not submit. In an ordinary form, button defaults to type="submit", so specify type="button" for a separate action.
Assuming POST keeps secrets safe by itself. HTTPS, access control, and server-side validation are still required.

Check it in Atlas

For the form content model, form owner, entry list, constraint validation, and HTMLFormElement APIs, see the form element in Yugien Atlas. For the difference between displaying a calculation result and submitting data, see the output element page; for method="dialog" and returning a choice from a dialog, see the dialog element page; for naming and associating form controls, see the label element page in Yugien; for multiline text input, see the textarea element page.