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.