HTML: Forms

The <form> HTML element represents a document section containing interactive controls for submitting information.

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Form Attributes

Attribute Definition
Action defines the action to be performed when the form is submitted
Method specifies the HTTP method to be used when submitting the form data. The default HTTP method when submitting form data is GET.
Autocomplete specifies whether a form should have autocomplete on or off
Novalidate When present, it specifies that the form-data (input) should not be validated when submitted.
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form

Form Elements

The HTML <form> element can contain one or more of the following form elements:

Element Definition
<button> is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.
<datalist> contains a set of option elements that represent the permissible or recommended options available to choose from within other controls.
<fieldset> is used to group several controls as well as labels (label) within a web form.
<input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input /> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
<label> represents a caption for an item in a user interface.
<legend> represents a caption for the content of its parent fieldset.
<optgroup> creates a grouping of options within a select element.
<option> is used to define an item contained in a select, an optgroup, or a datalist element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
<select> represents a control that provides a menu of options.
<textarea> represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Form Example

Using the elements that youve learned, try and recreate the form below. Remember to put your code inside the <body> </body> tag

If you get stuck, dont worry. You can click the "show answer" button anytime.

Legend for the fieldset