The <form> Element
The HTML <form> element is used to create
an HTML form for user input:
<form>
form elements
</form>
The <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.
The <input> Element
The HTML <input> element isthe 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 type="text'> Displaysa single-line
text input field
<input Displays a radio button
type="radio'> (for selecting one of
many choices)
<input Displays a checkbox
type='checkbox'> (for selecting zero or
more of many choices)
<input Displays a submit
type='submit"> button (for submitting
the form)
<input Displaysa clickable
type="button"'> button
Text Fields
The <input type="text"> definesa
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>
The <label> Element
Notice the use of the <label> element in the
example above.
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 asradio 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
radiobutton.
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="CSS">
<label for="css">CSS</label>
<br>
<input type="radio!"
id="javascript"
name="fav_language"
value="JavaScript">
<label
for="javascript">JavaScript</labe
l>
</form>
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="vehiclel!" name="vehicle1!
value="Bike">
<label for="vehiclel"> 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 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>
The Name Attribute for
<input>
Notice that each input field must have a name
attribute to be submitted.
If the name attribute is omitted, the value of the
input field will not be sent at all.
Example
This example will not submit the value of the
"First name" input field:
<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>
