HTML Forms
An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for
user input:
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
The <input> Element
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 Displays a single-line text input field
type="text">
<input Displays a radio button (for selecting
type="radio"> one of many choices)
<input Displays a checkbox (for selecting
type="checkbox"> zero or more of many choices)
<input Displays a submit button (for
type="submit"> submitting the form)
<input Displays a clickable button
type="button">
Text Fields
The <input type="text"> defines a single-line input field for
text input.
Example
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:
First name:
Last name:
The <label> Element
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 who have difficulty
clicking on very small regions (such as radio 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 equal to
the id attribute of the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices.
Example
A form with 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="C
SS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" val
ue="JavaScript">
<label for="javascript">JavaScript</label>
</form>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
--------------------------------------------------------------------------
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" valu
e="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" valu
e="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" valu
e="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
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 <input type="submit"> 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:
<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>
This is how the HTML code above will be displayed in a browser:
First name:
J ohn
Last name:
Doe