HTML5 was introduced with new types for <input> tag. These new types allow better input control & eases the code validation without writing regular expressions every time.
Let's peek into the new <input> types along with the quick demo codes that show how better can you do with them.
Input Type: color
The ‘color’ type is used for input fields that should contain color.
For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Select your favourite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
Select your favourite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>
</html>
Executing the above code would result the following:
Input Type: date
The ‘date’ type allows user to select a date. You can select the date from the scroll down calendar that pops up when clicked on the field.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Select your Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
Select your Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Executing the above code with date type will result the following:
Input Type: datetime
The ‘datetime’ type allows you to select a date and time along with the time zone.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
When is the party? (date and time): <input type="datetime" name="partytime">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
When is the party? (date and time): <input type="datetime" name="partytime">
<input type="submit">
</form>
</body>
</html>
The above code after execution shows as follows:
Input Type: datetime-local
This input type allows you to choose date and time but no time zone. If no time zone is to be displayed, it is better to use ‘datetime-local’ type in the input form.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Birthday (date and time): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
Birthday (date and time): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
</body>
</html>
Google Chrome can differentiate the both ‘datetime’ and ‘datetime-local’ types but Firefox and IE 11 cannot render the difference between these two input types.
Executing the above code results:
This input type is not compatible with the IE.
The above code looks like as follows when executed:
Note: type="email" is not supported in Internet Explorer 9 and earlier versions.
Input Type: month
The ‘month’ type allows users to select month and year from the drop down calendar.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
When is your birthday? (month and year): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
When is your birthday? (month and year): <input type="month" name="bdaymonth">
<input type="submit">
</form>
</body>
</html>
The above give the following result:
Input Type: number
The ‘number’ input type is used where the fields should contain numbers. The range of numbers between which the user should opt one can be defined by using ‘min’ and ‘max’ attributes.The following are the attributes that can be used to specify restrictions:
min – To specify a minimum value in the range.
max – To specify a maximum value in the range.
step – To specify the jump interval of numbers.
value – To specify a default value.
For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Work experience (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
<p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
This type is not compatible with IE 9 or later versions.<html>
<body>
<form>
Work experience (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
<p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
When executed, it shows the result as follows:
Note: type="number" is not supported in Internet Explorer 9 and earlier versions.
Input Type: range
The ‘range’ input type allows to choose the range of numbers between the specified end points.The difference between setting a range with ‘number’ type and ‘range’ type is that you are allowed to choose the range with a slider when using ‘range’ type where as you are allowed to choose a number from the dropdown list of range when using ‘number’ type.
For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Rate amfastech: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
<html>
<body>
<form>
Rate amfastech: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Result for above code:
Note: type="range" is not supported in Internet Explorer 9 and earlier versions.
Input Type: search
The ‘search’ field can be used to create custom search engines for your website.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form action="http://www.amfastech.com/?q">
Search amfastech: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form action="http://www.amfastech.com/?q">
Search amfastech: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
</body>
</html>
Result:
Result:
Input Type: url
The ‘url’ type allows input in URL format.For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Add your blog's URL here: <input type="url" name="blog"><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form>
Add your blog's URL here: <input type="url" name="blog"><br>
<input type="submit">
</form>
</body>
</html>
Result:
Result:
Post a Comment