This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.
Smartphone icons created by Freepik - Flaticon
This chapter describes the different types for the HTML element.
Here are the different input types you can use in HTML:
Tip: The default value of the attribute is "text".
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.
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:
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).
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>
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"> </form>
This is how the HTML code above will be displayed in a browser:
If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.
Radio buttons let a user select ONLY ONE of a limited number of choices:
<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form>
This is how the HTML code above will be displayed in a browser:
<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:
defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
This is how the HTML code above will be displayed in a browser:
<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form>
<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form>
You can also use the and attributes to add restrictions to dates:
<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>
<form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form>
<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form>
<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
The following example displays a numeric input field, where you can enter a value from 1 to 5:
<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
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:
<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
The defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the , , and attributes:
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
The is used for search fields (a search field behaves like a regular text field).
<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
The <input type="search"> defines a text field for entering a search string.
Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.
Tip: Always add the <label> tag for best accessibility practices!
The is used for input fields that should contain a telephone number.
<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>
Note: this form cannot take the 10 digit phone number patern commonly used throughout North America and the English speaking Caribbean.
<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form>
<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form>
<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form>
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |