HTML Forms

The HTML form element represents a section of interactive controls for submitting information.

There are many different types of information you may want to collect from users, text-based answers, numbers, files, checkboxes, date, email, etc. It is important to specify the type of information you are collecting to make it easier for the computer to parse or translate the information and determine next actions. To collect all of this information, we use the input element and specify the type of information by using the type attribute.

Let’s take a look at a few examples of how the input element is used for a variety of types of information.

• <input type="text">: The type text is used to take in a single-line text field. The placeholder attribute provides a brief hint, displayed in the text field while it is empty, about the kind of information expected (it is a hint only — not a default value, and not a substitute for a label).
• <input type="button">: The type button is used to create a clickable rectangular button. Alternatively, most developers use the <button> element instead.
• <input type="checkbox">: The type checkbox creates a box that is checked (ticked) when selected.
• <input type="number">: The type number takes in a number input. By default the number type allows only integers unless otherwise specified by the use of the step attribute.
• <input type="radio">: The type radio creates a clickable circular button, or a radio button. They act similarly to the checkbox type.

Check out MDN’s docs on the HTML input element to learn more about other types of input and associated values, attributes, and events.

Note: On its own, a form submits its data to the URL in its action attribute using the HTTP method in its method attribute (get by default) — no JavaScript required. When you want to process the input in the browser instead (validate it, update the page, call an API), JavaScript steps in to read the form’s values and take the appropriate actions. In both cases it is important to give each form control a name attribute — the submitted data is sent as name=value pairs, so a control without a name cannot be identified (an id is still useful for linking a label to its control and for selecting elements from JavaScript, and a class for styling, but neither is included in the submitted data).