11-22-24
An HTML form is used to collect user input. The user input is most often sent to a server for processing.
The <input type="text"> defines a single-line input field for text input.
If you click the "Submit' button, the form-data will be sent to a page called "/action_page.php".
This is how the HTML code above will be displayed in a browser:
The HTML <form> element is used to create an HTML form for user input:
The <form> elements is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, ect.
Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.
The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. Here are some examples:
| Type | Description |
|---|---|
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choies) |
| <input type="checkbox"> | Displays a checkbox (for selecting zero or many choices) |
| <input type="submit"> | Displays a submit button (for submitting the form) |
| <input type="button"> | Displays a clickable button |
Notice the use of the <label> element in the example above. The <label> tag defines a label for many form elements. The <label> 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 <label> element also helps users focuses on the input element. The <label> element also helps users who have difficulty on very small regions (such as buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox. The for attribute of the <label> tag should be eaqual to the id attribute of the <input> element to bind them together.
The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.
Choose your favorite Web language:
The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Notice that each input field must have a name attribute to be submitted. If the name attribute is onitted, the value of the input field will not be sent at all.