HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

<form> element is used to create an HTML form for user input: <form>. form elements. </form>

<form> 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.

<input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute.

<input type="text">

<input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button">

All the different input types are covered in this chapter: HTML Input Types.

<input type="text">

A form with input fields for text: <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> This is how the HTML code above will be displayed in a browser:

The form itself is not visible. Also note that the default width of an input field is 20 characters.

<label> element in the example above.

<label> tag defines a label for many form elements.

<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.

<label> 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 <label>

<label> tag should be equal to the id attribute of the <input> element to bind them together.