HTML Forms
HTML forms are one of the main points of interaction between a user and a web site. They are used to collect user input, such as text, choices, and files.
The <form> Element
The <form> element is a container for different types of input elements. The form data is most often sent to a server for processing.
Example: A Simple Form
html
<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>Common Input Types
The <input> element is the most versatile form element. Its behavior changes based on its type attribute.
Example: Radio Buttons
Radio buttons let a user select ONE of a limited number of choices.
html
<p>Choose your favorite Web language:</p>
<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>Example: Checkboxes
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
html
<p>I have a:</p>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">Bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">Car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">Boat</label>Test Yourself with an Exercise
Which input type allows a user to select only one of a limited number of choices?