HTML Input Types
This chapter describes the different types for the HTML <input> element.
HTML Input Types
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">Input Type: submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example:
<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>Input Type: reset
<input type="reset"> defines a reset button that will reset all form values to their default values:
Example:
<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">
<input type="reset" value="Reset">
</form>Input Type: radio
<input type="radio"> defines a radio button.
Radio buttons let a user select only one of a limited number of choices:
Example:
<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>Input Type: checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select zero or more options from a limited number of choices.
Example:
<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>