WWW W3schools Com HTML HTML - Form - Input - Types Asp
WWW W3schools Com HTML HTML - Form - Input - Types Asp
Dark mode
Dark code
HTML CSS JAVASCRIPT SQL
<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="text">
<input type="time">
<input type="url">
<input type="week">
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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Username:
Password:
The characters in a password field are masked (shown as asterisks or circles).
The formhandler is typically a server page with a script for processing input data.
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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit
If you omit the submit button's value attribute, the button 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="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Try it Yourself »
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">
</form>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit Reset
If you change the input values and then click the "Reset" button, the formdata will be
reset to the default values.
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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
HTML
CSS
JavaScript
Checkboxes let a user select ZERO or MORE options of 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>
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Try it Yourself »
This is how the HTML code above will be displayed in a browser:
Click Me!
Depending on browser support, a color picker can show up in the input field.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Try it Yourself »
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Try it Yourself »
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>
Try it Yourself »
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime‐local" id="birthdaytime" name="birthdaytime">
</form>
Try it Yourself »
Depending on browser support, the email address can be automatically validated when
submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match
email input.
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Try it Yourself »
Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
</form>
Try it Yourself »
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Try it Yourself »
A hidden field lets web developers include data that cannot be seen or modified by
users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the
form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible
(and can be edited) using any browser's developer tools or "View Source" functionality.
Do not 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>
Try it Yourself »
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Try it Yourself »
You can also set restrictions on what numbers are accepted.
The following example displays 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>
Try it Yourself »
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
checked Specifies that an input field should be preselected 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>
Try it Yourself »
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Try it Yourself »
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Try it Yourself »
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>
Try it Yourself »
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Try it Yourself »
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when
submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match
url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Try it Yourself »
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Try it Yourself »
HTML Exercises
Exercise:
In the form below, add an input field for text, with the name "username" .
<form action="/action_page.php">
< >
</form>
Submit Answer »
Start the Exercise
<input type=""> Specifies the input type to display
❮ Previous Next ❯
ADVERTISEMENT
COLOR PICKER
Get certified
by completing
a HTML
course today!
school
w3 s
2
02
CE
TI 2
R
FI .
ED
Get started
ADVERTISEMENT
Report Error
Spaces
Upgrade
Newsletter
Get Certified
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 19992023 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.