Typically, the user input is transmitted to a server for further processing.
The HTML <form> element is employed to generate an HTML form for user input:
| <form> . form elements . </form> |
The <form> element serves as a container for various types of input elements, including text fields, checkboxes, radio buttons, submit buttons, and more.
All the distinct form elements are discussed in detail in this chapter: HTML Form Elements.
The HTML <input> element stands out as the most commonly utilized form element.
An <input> element can manifest in numerous formats, contingent upon the type attribute.
Here are several examples:
|
Type |
Description |
|
<input type=”text”> |
Presents a single-line text input field |
|
<input type=”radio”> |
Presents a radio button (for selecting one of many choices) |
|
<input type=”checkbox”> |
Presents a checkbox (for selecting zero or more of many choices) |
|
<input type=”submit”> |
Presents a submit button (for submitting the form) |
|
<input type=”button”> |
Prsents a clickable button |
The <input type=”text”> specifies a single-line input field designed for textual input.
Example
A form featuring text input fields:
| <form> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname”> </form> |
Notice the utilization of the <label> element in the example above.
The <label> tag is employed to define a label for numerous form elements.
It proves beneficial for screen-reader users, as the label is audibly read aloud when the user focuses on the input element.
Moreover, the <label> element aids users who may struggle to click on very small areas, such as radio buttons or checkboxes, as clicking the text within the <label> element toggles the associated radio button or checkbox.
To link them together, the for attribute of the <label> tag should match the id attribute of the <input> element.
The <input type=”radio”> creates a radio button.
Radio buttons enable users to choose ONE option from a set of limited choices.
Example
A form featuring radio buttons:
| <p>Choose your favorite Web language:</p> <form> <input type=”radio” id=”html” name=”fav_language” value=”HTML”> <label for=”html”>HTML</label><br> <input type=”radio” id=”css” name=”fav_language” value=”CSS”> <label for=”css”>CSS</label><br> <input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”> <label for=”javascript”>JavaScript</label> </form> |
The <input type=”checkbox”> creates a checkbox.
Checkboxes enable users to select ZERO or MORE options from a finite set of choices.
Example
A form featuring checkboxes:
| <form> <input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”> <label for=”vehicle1″> I have a bike</label><br> <input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car”> <label for=”vehicle2″> I have a car</label><br> <input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Boat”> <label for=”vehicle3″> I have a boat</label> </form> |
The <input type=”submit”> creates a button to submit the form data to a form-handler.
Usually, the form-handler refers to a file on the server containing a script to process input data.
The form-handler’s location is specified in the form’s action attribute.
Example
A form featuring a submit button:
| <form action=”/action_page.php”> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” name=”fname” value=”John”><br> <label for=”lname”>Last name:</label><br> <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br> <input type=”submit” value=”Submit”> </form> |
It’s important to note that each input field must include a name attribute to be submitted.
If the name attribute is left out, the value of the input field won’t be sent.
Example
In this example, the value of the “First name” input field will not be submitted:
| <form action=”/action_page.php”> <label for=”fname”>First name:</label><br> <input type=”text” id=”fname” value=”John”><br><br> <input type=”submit” value=”Submit”> </form> |
