Forms and buttons in HTML

Note: The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.

HTML forms and buttons are powerful tools for interacting with users — most commonly they are used for collecting data from users or allowing them to control a user interface. In this article we provide an introduction to the basics of forms and buttons.

Prerequisites: Basic HTML familiarity, as covered in Basic HTML Syntax. Text-level semantics such as headings and paragraphs and lists. Structural HTML.

Learning outcomes:

Prerequisites:	Basic HTML familiarity, as covered in Basic HTML Syntax. Text-level semantics such as headings and paragraphs and lists. Structural HTML.
Learning outcomes:	An appreciation that forms and buttons are the main tools for users to interact with a website, along with links. The common types of `<button>`: `button`, `submit`, and `reset`. Common `<input>` types: `text`, `number`, `file`, `checkbox`, `radio`, `password`, and `search`. Common attributes such as `name` and `value`. Making forms accessible — Correct semantics, the `<label>` element, and the `for` attribute. Other control types: `<textarea>`, `<select>`, and `<option>`. Client-side validation basics — `required`, `min`, `max`, `minlength`, `maxlength`, and `pattern`. The `<form>` element, and the basics of form submission.

An appreciation that forms and buttons are the main tools for users to interact with a website, along with links.
The common types of <button>: button, submit, and reset.
Common <input> types: text, number, file, checkbox, radio, password, and search.
Common attributes such as name and value.
Making forms accessible — Correct semantics, the <label> element, and the for attribute.
Other control types: <textarea>, <select>, and <option>.
Client-side validation basics — required, min, max, minlength, maxlength, and pattern.
The <form> element, and the basics of form submission.

Note: There are a lot of input types and form features not explicitly mentioned here; the purpose is to get a good general introduction to buttons and form elements, and learn the most common cases. The advanced/specialized cases can be studied on a need-to-know basis, as part of a web developer's constant learning throughout their career.

Buttons

TODO

Common input types

TODO

Accessible forms

Going back to the argument for semantic HTML (see also 2.2 Good document structure), you should understand why it is important to use the right element for the right job. For example, use a <button> to submit your form, and not a <div> programmed to behave like a <button>.
Understand the features programmed into <button>s and form elements by the browser by default, and how important they are. Examples include keyboard accessibility, focus outlines, and semantic meaning for AT to identify the elements and communicate their meaning.

Other control types

TODO

Client-side form validation

Client-side form validation is really a usability enhancement, to be used alongside server-side form validation. It is not a substitute for it.

The `<form>` element

TODO

Test your skills!

TODO

Summary

That's all for now. We have covered images and captions in detail. In the next article, we'll move it up a gear, looking at how to use HTML to embed video and audio content into web pages.