HTML 5 input types and attributes: A complete guide
Are you bored by using old HTML form input type 'text’? HTML 5 introduce new input types and attributes that provides better user experience and reduce usage of JavaScript. This article will describe the HTML 5 input types and attributes.
Let’s start with input types.
HTML5 input types
- number :- The number type allows only numeric inputs. The interesting feature about number input type is, your keyboard/keypad will display numeric values in mobile device and in computer you can’t even type any single alphabet. Thus, user can also not mistakenly enter text.
<input type="number"/>- color :- User can now choose color from color picker. The input type color display rectangular box with default color black on screen. When you click on this box the color picker will open where you can select your color. The color picker displayed in mobile is different layout from computer.
<input type="color"/>- email :- The email input type creates input field that only accept email addresses that matches with its pre-defined email pattern. Email validation done automatically. You can also add multiple email addresses by using "multiple" attribute.
<input type="email"/>
<input type="email" multiple/>- url :- It allows user to enter URL. It matches ser url with pre-defined url pattern, if not matched then alert message will display automatically. It is used for web address. For example,https://geeksforgeeks.org
<input type="url"/>- tel :- Using tel input type user can enter telephone number. Like number, tel input type also do ot allowed to enter text in field.
<input type="tel"/>- range :- The range input type allows user to enter numeric values within specific range. It creates slider on screen. The min, max, value and step are key attributes. The min and max attributes specifies minimum (1) and maximum (100) limit of input. The value specifies the initial state of range, by default it is set to middle. The step specifies granularity, by default value is 1. The type range is used for volume sliding, price filter r brightness setting.
<input type="range" min="0" max="100"/>- search :- The search input type creates search box with clear "×" button. User can enter search string and also clear it and again enter string.
<input type="search"/>- date :- The date input type creates a drop-down box. When user clicks on this drop-down box a year calendar will display and user can select date from it and also clear the selected date. The date is display in "dd/mm/yyyy" format (01/02/2026).
<input type=date/>- month :- The month input type creates drop-down box that display only month and year in calendar. The month and year display in "mmmm/yyyy" format(e.g:- June,2025).
<input type="month"/>- week :- The week input type allows user to set week in input field. When user selects week in calendar, in input field it display week number and year (e.g. :- week 02, 2026).
<input type="week"/>- time :- The time input type allows user to set time in input field. It display time in list form when user clicks on drop-down. In mobile phones, it display clock. User can set time by manually (typing) or selecting from list (computer) and setting in clock (mobile). In input field the time display in "hh:mm AM/PM" format.
<input type="time"/>Sample example of HTML 5 input types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 input types</title>
</head>
<body>
<form>
number:- <br><input type="number"/><br/>
color:- <br><input type="color"/><br/>
email:- <br><input type="email"/><br/>
url:- <br><input type="url"/><br/>
Telephone:- <br><input type="tel"/><br/>
Range:- <br><input type="range"/><br/>
search:- <br><input type="search"/><br/>
Date:- <br><input type="date"/><br/>
Month:- <br><input type="month"/><br/>
Week:- <br><input type="week"/><br/>
Time:- <br><input type="time"/><br/>
Datetime-local:- <br><input type="datetime-local"/><br/>
<input type="submit"/>
</form>
</body>
</html>
output image:-
HTML5 validation attributes
HTML5 introduce some key attributes for validation of input fields at client side. These attributes checks user input without using JavaScript code.
- required :- The required attribute checks weather the input field is filled or empty before the form submission.
<input type="text" name="firstname" required/>
The output image shows that the required attribute do not allow an input field to remain blank.
- pattern :- The pattern attribute defines regular expression and ensure that the user input is must be matches with that pattern. You can use title attribute with pattern attribute to notify user in which format the input must be entered.
<input type="tel" pattern="[0-9]{5}-[0-9]{5}"/>
The both output image shows that the specified pattern only allowed numeric values between 0–9 in group of 5-5 numbers seperated by “-” .
- minlength and maxlength :- Used for text based input fields (text, email, url, search, tel,...). These two attributes sets minimum and maximum limit of characters in input field.
<input type="search" minlength="2" maxlength="10"/>
The search input field with minlength and maxlength attributes allow user to enter characters with minimum limit of 2 and maximum limit of 10 .
- min and max :- Used for numeric input field (number, range) and date/time (date, time, week, month...) fields. User can input value between or equal to the specified min and max values.
<input type="number" min="2" max="10"/>
The both output image shows that the number value must be less than or equal to 2 and greater than or equal to 10.
- step :- The step attribute specifies legal number intervals. For example, if step value is 2, then input field allows only even numbers (2,4,6,8...) or 0. The step attribute is used with input types number.
<input type="number" name="even_no"
step="2">
HTML5 input user experience attributes
- placeholder :- It gives hint to user that which type of content should be entered.
<input type="text" name="firstname" placeholder="firstname"/>
The placeholder text display in light grey font and it disappears when user starts writing.
- autofocus :- When page loads the cursor automatically places on specified input field and allow user to immediately to start typing. The autofocus field looks different from other input fields, it’s borders appears highlighted.
<input type="text" autofocus/>
- multiple :- Allows multiple user inputs. Used for file and email input types.
<input type="email" multiple/>
In above first 3 output images shows email input field without using multiple attribute. These examples consider 2 email addresses as single email that’s why it is not accept ‘,’ , space and ofcourse two ‘@’ , because in single email address they are not allowed.
Get Frontend Writing’s stories in your inbox
Join Medium for free to get updates from this writer.
The 4th output image shows that the email input field uses multiple attribute, which accept more than one email addresses seperated by comma.
- readonly :- User can’t write in field, only read the content in input field.
<input type="text" value ="this is readonly" readonly/>
In output the input field is looks like another input fields but user can’t edit or alter the text in input field.
- disabled :- This attribute creates disabled input field and its text and background color is different from another fields. It restricts user from writing.
<input type ="text" value ="disable field" disabled/>
User can’t do anything with this disabled text and input field.
- autocomplete :- The autocomplete attribute provide typing suggestions when user starts typing in input field. The suggestions are based on previous data entries. This attribute have mainly 2 values: on and off . There is also third value option which is type of value in which you can specify specific tokens (email, name, street-address,etc...). to help browser to offer more relevant auto-fill suggestions. The default value is "on". This attribute is used to save user time and reduce errors.
<input type="text" autocomplete="on"/>
When user clicks on Telephone input field the list of auto-fill suggestions will display telephone numbers that is previously entered by the user.
- list :- This attribute connects <datalist> element to the input element to display drop-down list when user types text and user can also selects data from drop-down list. Unlike, <select> element, here user can enter data that is not specified in list.
<input list="fruits" id="fruits-name" name="fruits-name">
<datalist id="fruits">
<option value="Apple">
<option value="Mango">
<option value="Strawberry">
</datalist>The value of list attribute of <input> element and id attribute of <datalist> element must be same.
The first output image shows that when user clicks on drop-down arrow the pre-defined fruit list will display. User can select from it or enter own input.
The second output image shows that user can enter own input too.
After user’s manual input submission, the third output image shows user entered input also appears at the end of pre-defined fruit list. Both are seperated by horizontal line.
