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.