HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
Example
The Element
The HTML element is used to create an HTML form for user input:
The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
All the different form elements are covered in this chapter: HTML Form Elements.
The Element
The HTML element is the most used form element.
An element can be displayed in many ways, depending on the type attribute.
| Type | Description |
|---|---|
| Displays a single-line text input field | |
| Displays a radio button (for selecting one of many choices) | |
| Displays a checkbox (for selecting zero or more of many choices) | |
| Displays a submit button (for submitting the form) | |
| Displays a clickable button |
All the different input types are covered in this chapter: HTML Input Types.
Text Fields
The defines a single-line input field for text input.
Example
A form with input fields for text:
This is how the HTML code above will be displayed in a browser:
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
The Element
Notice the use of the element in the example above.
The tag defines a label for many form elements.
The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.
The element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.
The for attribute of the tag should be equal to the id attribute of the element to bind them together.
Radio Buttons
The defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
Choose your favorite Web language:
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
Checkboxes
The defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The Submit Button
The defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form’s action attribute.
Example
A form with a submit button:
This is how the HTML code above will be displayed in a browser:
The Name Attribute for
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the «First name» input field:
HTML Tag
An HTML form with three input fields; two text fields and one submit button:
Definition and Usage
The tag specifies an input field where the user can enter data.
The element is the most important form element.
The element can be displayed in several ways, depending on the type attribute.
The different input types are as follows:
Look at the type attribute to see examples for each input type!
Tips and Notes
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | Specifies a filter for what file types the user can pick from the file input dialog box (only for type=»file») |
| alt | text | Specifies an alternate text for images (only for type=»image») |
| autocomplete | on off | Specifies whether an element should have autocomplete enabled |
| autofocus | autofocus | Specifies that an element should automatically get focus when the page loads |
| checked | checked | Specifies that an element should be pre-selected when the page loads (for type=»checkbox» or type=»radio») |
| dirname | inputname.dir | Specifies that the text direction will be submitted |
| disabled | disabled | Specifies that an element should be disabled |
| form | form_id | Specifies the form the element belongs to |
| formaction | URL | Specifies the URL of the file that will process the input control when the form is submitted (for type=»submit» and type=»image») |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the server (for type=»submit» and type=»image») |
| formmethod | get post | Defines the HTTP method for sending data to the action URL (for type=»submit» and type=»image») |
| formnovalidate | formnovalidate | Defines that form elements should not be validated when submitted |
| formtarget | _blank _self _parent _top framename | Specifies where to display the response that is received after submitting the form (for type=»submit» and type=»image») |
| height | pixels | Specifies the height of an element (only for type=»image») |
| list | datalist_id | Refers to a element that contains pre-defined options for an element |
| max | number date | Specifies the maximum value for an element |
| maxlength | number | Specifies the maximum number of characters allowed in an element |
| min | number date | Specifies a minimum value for an element |
| minlength | number | Specifies the minimum number of characters required in an element |
| multiple | multiple | Specifies that a user can enter more than one value in an element |
| name | text | Specifies the name of an element |
| pattern | regexp | Specifies a regular expression that an element’s value is checked against |
| placeholder | text | Specifies a short hint that describes the expected value of an element |
| readonly | readonly | Specifies that an input field is read-only |
| required | required | Specifies that an input field must be filled out before submitting the form |
| size | number | Specifies the width, in characters, of an element |
| src | URL | Specifies the URL of the image to use as a submit button (only for type=»image») |
| step | number any | Specifies the interval between legal numbers in an input field |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week | Specifies the type element to display |
| value | text | Specifies the value of an element |
| width | pixels | Specifies the width of an element (only for type=»image») |
Global Attributes
Event Attributes
Related Pages
- Input Button Object
- Input Checkbox Object
- Input Color Object
- Input Date Object
- Input Datetime Object
- Input DatetimeLocal Object
- Input Email Object
- Input FileUpload Object
- Input Hidden Object
- Input Image Object
- Input Month Object
- Input Number Object
- Input Password Object
- Input Range Object
- Input Radio Object
- Input Reset Object
- Input Search Object
- Input Submit Object
- Input Text Object
- Input Time Object
- Input URL Object
- Input Week Object