Loading lesson path
Concept visual
Start at both ends
This chapter describes the different types for the HTML <input> element.
Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date">
Formula
< 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">
The default value of the type attribute is "text".
<input type="text">
Formula
defines a single - line text input field<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:
<input type="password"> defines a password field
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form> This is how the HTML code above will be displayed in a browser:
The characters in a password field are masked (shown as asterisks or circles).
<input type="submit">
Formula
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:<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:
If you omit the submit button's value attribute, the button will get a default text:
<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"> </form>
<input type="reset"> defines a reset button that will reset all form values to their default values:
<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> This is how the HTML code above will be displayed in a browser:
Formula
If you change the input values and then click the "Reset" button, the form - data will be reset to the default values.<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
Formula
< 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> This is how the HTML code above will be displayed in a browser: