HTML Input Types: This chapter describes the various sorts for the HTML <input> element.
In HTML <input type=” “> is a significant element of HTML form. The “type” attribute of input element can be different sorts, which defines data field. For example, <input type=”text” name=”name”> gives a text box.
In this tutorial, you will learn-
In this article, you will learn-
- 1 HTML Input Types
- 2 Input Type Text
- 3 Text field
- 4 Input Type Password
- 5 Info Type Submit
- 6 Submit Button
- 7 Input Type Reset
- 8 Reset Button
- 9 Input Type Radio
- 10 Radio Buttons
- 11 Input Type Checkbox
- 12 Checkboxes
- 13 Input Type Button
- 14 Input Button
- 15 Input Type Color
- 16 Show a Color Picker
- 17 Input Type Date
- 18 Date Field
- 19 Date Field Restrictions
- 20 Input Type Datetime-local
- 21 Input Type Email
- 22 Email Field
- 23 Input Type File
- 24 File upload
- 25 Input Type Hidden
- 26 A Hidden Field (look in source code)
- 27 Input Type Month
- 28 Input Type Number
- 29 Number Field
- 30 Input Restrictions
- 31 Input Type Range
- 32 Input Type Search
- 33 Search Field
- 34 Input Type Tel
- 35 Telephone Field
- 36 Input Type Time
- 37 Show a Time Input Control
- 38 Input Type Url
- 39 Display a URL Input Field
- 40 Input Type Week
- 41 Display a Week Input Control
HTML Input Types
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">
Tip: The default value of the type attribute is “text”.
Input Type Text
<input type="text">
defines a single-line text input field:
Example
<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>
<!DOCTYPE html> <html> <body> <h2>Text field</h2> <p>The <strong>input type="text"</strong> defines a one-line text input field:</p> <form action="/action_page.php"> <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"><br><br> <input type="submit" value="Submit"> </form> <p>Note that the form itself is not visible.</p> <p>Also note that the default width of a text field is 20 characters.</p> </body> </html>
This is how the HTML code above will be displayed in a browser:
Text field
The input type=”text” defines a one-line text input field:
Note that the form itself is not visible.
Also note that the default width of a text field is 20 characters.
Input Type Password
<input type="password">
defines a password field:
Example
<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>
Info Type Submit
<input type=”checkbox”> defines a catch for submitting form data to a form-handler.
The form-handler is normally a server page with a script for processing input data.
The form-handler is determined 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="Salman"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Khan"><br><br> <input type="submit" value="Submit"> </form>
This is how the HTML code above will be displayed in a browser:
Submit Button
The input type=”submit” defines a button for submitting form data to a form-handler:
If you click “Submit”, the form-data will be sent to a page called “/action_page.php”.
On the off chance that you omit the submit catch’s value attribute, the catch will get a default text:
Example
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Salman"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Khan"><br><br> <input type="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="Salman"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Khan"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>
This is how the HTML code above will be displayed in a browser:
Reset Button
The input type=”reset” defines a reset button that resets all form values to their default values:
If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.
Assuming you change the input values and, snap the “Reset” button, the form data will be reset to the default values.
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>
This is how the HTML code above will be displayed in a browser:
Radio Buttons
The input type=”radio” defines a radio button:
Choose your favorite Web language:
Input Type Checkbox
<input type="checkbox">
defines a checkbox.
Checkboxes let a user select ZERO or MORE choices of a limited number of decisions.
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>
This is how the HTML code above will be displayed in a browser:
Checkboxes
The input type=”checkbox” defines a checkbox:
Input Type Button
<input type="button">
defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:
Input Button
Input Type Color
The <input type="color">
is used for input fields that ought to contain a color.
Depending upon browser support, a color picker can appear in the input field.
Example
<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form>
Show a Color Picker
The input type=”color” is used for input fields that should contain a color.
Note: type=”color” is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).
Input Type Date
The <input type="date">
is used for input fields that ought to contain a date.
Depending upon browser support, a date picker can appear in the input field.
Example
<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form>
Date Field
The input type=”date” is used for input fields that should contain a date.
Note: type=”date” is not supported in Safari or Internet Explorer 11 (or earlier).
You can likewise use the min and max attributes to add limitations to dates:
Example
<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form>
Date Field Restrictions
Use the min and max attributes to add restrictions to dates:
Note: type=”date” is not supported in Safari or Internet Explorer 11 (or earlier).
Input Type Datetime-local
The <input type="datetime-local">
determines a date and time input field, with no time zone.
Depending upon browser support, a date picker can appear in the input field.
Example
<form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
Input Type Email
The <input type="email">
is used for input fields that ought to contain an email address.
Depending upon browser support, the email address can be automatically approved when submitted.
Some cell phones perceive the email type, and add “.com” to the keyboard to coordinate with email input.
Example
<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form>
Email Field
The input type=”email” is used for input fields that should contain an e-mail address:
Input Type File
The <input type="file">
defines a file-select field and a “Browse” button for file uploads.
Example
<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form>
File upload
Show a file-select field which allows a file to be chosen for upload:
Input Type Hidden
The <input type="hidden">
defines a hidden input field (not noticeable to a user).
A hidden field let web developers incorporate data that can’t be seen or modified by users when a form is submitted.
A hidden field frequently stores what database record that should be updated when the form is submitted.
Note: While the value isn’t shown to the user in the page’s substance, it is apparent (and can be edited) using any browser’s developer tools or “View Source” usefulness. Try not to use hidden inputs as a form of security!
Example
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form>
A Hidden Field (look in source code)
Note: The hidden field is not shown to the user, but the data is sent when the form is submitted.
Input Type Month
The <input type="month">
allows the user to choose a month and year.
Depending upon browser support, a date picker can appear in the input field.
Example
<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
Input Type Number
The <input type="number">
defines a numeric input field.
You can likewise set limitations on what numbers are acknowledged.
The accompanying example shows a numeric input field, where you can enter a value from 1 to 5:
Example
<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
Number Field
The input type=”number” defines a numeric input field.
You can use the min and max attributes to add numeric restrictions in the input field:
Input Restrictions
Here is a list of some common input restrictions:
Attribute | Description |
---|---|
checked | Specifies that an input field should be pre-selected when the page loads (for type=”checkbox” or type=”radio”) |
disabled | Specifies that an input field should be disabled |
max | Specifies the maximum value for an input field |
maxlength | Specifies the maximum number of character for an input field |
min | Specifies the minimum value for an input field |
pattern | Specifies a regular expression to check the input value against |
readonly | Specifies that an input field is read only (cannot be changed) |
required | Specifies that an input field is required (must be filled out) |
size | Specifies the width (in characters) of an input field |
step | Specifies the legal number intervals for an input field |
value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
Input Type Range
The <input type="range">
defines a control for entering a number whose exact value isn’t significant (like a slider control). Default range is 0 to 100. Nonetheless, you can set limitations on what numbers are acknowledged with the min, max, and step attributes:
Example
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
Input Type Search
The <input type="search">
is used for search fields (a search field behaves like a regular text field).
Example
<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
Search Field
The input type=”search” is used for search fields (behaves like a regular text field):
Input Type Tel
The <input type="tel">
is used for input fields that should contain a telephone number.
Example
<form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>
Telephone Field
The input type=”tel” is used for input fields that should contain a telephone number:
Input Type Time
The <input type="time">
allows the user to choose a time (no time zone).
Depending upon browser support, a time picker can appear in the input field.
Example
<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form>
Show a Time Input Control
The input type=”time” allows the user to select a time (no time zone):
If the browser supports it, a time picker pops up when entering the input field.
Note: type=”time” is not supported in Safari or Internet Explorer 12 (or earlier).
Input Type Url
The <input type="url">
is used for input fields that ought to contain a URL address.
Depending upon browser support, the url field can be automatically approved when submitted.
Some cell phones perceive the url type, and adds “.com” to the console to coordinate with url input.
Example
<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form>
Display a URL Input Field
The input type=”url” is used for input fields that should contain a URL address:
Input Type Week
The <input type="week">
allows the user to choose a week and year.
Depending upon browser support, a date picker can appear in the input field.
Example
<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form>
Display a Week Input Control
The input type=”week” allows the user to select a week and year.
If the browser supports it, a date picker pops up when entering the input field.
Note: type=”week” is not supported in Firefox, Safari or Internet Explorer 11 (or earlier).
HTML Input Type Attribute
Tag | Description |
<input type=””> | Specifies the input type to display |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.