<!–
main_leaderboard, all: [728,90][970,90][320,50][468,60]
–>
HTML Form Elements
In this chapter, you will find a detailed description of all HTML form elements.
It represents a section of the document that contains interactive controls for submitting information.
- HTML Form Elements:
- The HTML <form> Elements:
- <input> Element:
- The <select> Element:
- A <button> Element:
- <datalist> Element:
- The <label> Element:
- <fieldset> and <legend> Elements:
- The <textarea> Element:
- <output> Element:
- The <Checkbox> Element:
- Example of HTML Form:
- HTML Form Elements:
- Importance of HTML Form Elements:
The HTML <form> Elements
In HTML, a <form> element may contain one or more of the following elements:
<input> Element:
<Input> is one of the most commonly used form elements.
It depends on the type attribute whether the input element is displayed in a different way.
Example:
In this chapter HTML Input Types, you will find a description of all the different values of the type attribute.
The <select> Element
The <select> element has a drop-down list generated by <select> element:
Example:
An option that may be chosen is specified by the <option> element.
The drop-down list’s first item is always picked by default.
Add the selected attribute to the option to create a pre-selected option:
Example:
Visible Values:
To set the number of viewable values, just use size attribute:
Example:
Permit multiple selections:
To provide the user the option of choosing more than one value, utilise the multiple property. see an example of HTML form elements below:
Example:
A <button> Element:
An element with the <button> attribute specifies a button that can be clicked when it comes to HTML form elements:
Example:
A browser will render the HTML code above as follows:
Note: It is always important to mention the type attribute for the button element when we talk about HTML form elements. The default button element may differ between browsers.
<datalist> Element:
<Input> elements can be associated with a list of predefined options by including the <datalist> element in HTML form elements.
When users input data, they will be presented with a drop-down list of predefined options.
List attributes of <input> elements should point to id attributes of <datalist> elements.
Example:
The <label> Element
In HTML, the <label> element specify labels for a variety of form elements.
It’s handy for screen-readers, because it reads out loud the label when the user focuses on the <input> element.
Users who have trouble clicking on tiny areas (like radio buttons or checkboxes) might also benefit from the <label> element since it toggles the radio button or checkbox when the user clicks its content.
To connect them, the for property of the <label> tag must match the id attribute of the <input> element.
The following example shows the working of <label> element:
Example:
<fieldset> and <legend> Elements:
When you use a <fieldset>, you can group relevant data in a form.
The <legend> element determines a <fieldset> caption.
Example:
A browser will render the HTML code above as follows:
The <textarea> Element
<Textarea> can be utilized to characterize multi-line input fields (a text area) in HTML form elements :
Example:
The rows property indicates the number of lines that will be displayed in a text area.
The visible width of a text section is determined by the cols attribute.
The following is how a browser will see the HTML code previously mentioned:
CSS can also be used to indicate the size of the text area:
Example:
<output> Element:
An <output> element displays the outcome of a calculation (such as the result of a script).
Below is an example of HTML form elements:
Example:
The <Checkbox> Element:
Multiple options can be checked by using the checkbox control.
The following is an example of how the checkbox element work:
Example:
Example of HTML Form
The following is an example of a standard registration form as it comes to HTML form elements:
Example:
CSS can also be applied to the the form here is how we can do that:
Example:
HTML Form Elements
| Tag | Overview |
|---|---|
| <label> | Provides a label for an <input> element in HTML form elements. |
| <fieldset> | In a form, related elements are grouped together. |
| <form> | Creates a HTML form to receive user input. |
| <legend> | Adds a caption to a <fieldset>. |
| <select> | Creates a drop-down list. |
| <optgroup> | Drop-down list containing related options. |
| <option> | Provides a drop-down list with an option. |
| <datalist> | Provides a list of predefined input control options. |
| <output> | Calculates the result. |
| <button> | Sets a clickable button. |
| <input> | Establishes an input control. |
| <textarea> | An input control that supports multiple lines. (text area) |
Check out our HTML Tag Reference for a more comprehensive listing of all the HTML tags.
Importance of HTML Form Elements
HTML form elements play a crucial role in facilitating interaction between users and web pages. The following are some reasons why they are important:
- Data Collection: HTML forms enable collection of user input in a structured way, which can be used for diverse purposes such as surveys, feedback, and user registration.
- User Interaction: Forms provide a platform for users to input data and make selections, allowing them to interact with web pages.
- Validation: HTML form elements can be used to validate user input, ensuring that the data entered is accurate and in the correct format, leading to fewer errors and better user experience.
- Accessibility: Form elements improve web page accessibility by providing labels and descriptions for input fields that can be read by assistive technologies such as screen readers.
- Security: HTML forms can be used to submit sensitive information such as credit card details and passwords. Form elements can implement security measures like encryption and server-side validation to ensure that this data is handled securely.
