As you read my previous article HTML 5 New Form Attributes: Part 1, we discussed some new attributes for <form> and <input>. Here I will cover the remaining input attributes for forms in HTML 5.
Min, Max and Step
The min, max and step attributes are used to specify restrictions for input types which contain numbers or dates. The min specifies the minimum value allowed for the input field, min attribute specifies the maximum value and step specifies the legal number intervals for the input field (suppose step="5", legal numbers is -5,0,5,10, etc). Browser support: Opera 9.5, Chrome 3.0.
The min, max, and step attributes works with date pickers, number and range input types. The below example shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9).
<html>
<body>
<form action="demo_form.asp" method="get">
Enter Points: <input type="number" name="points" min="0" max="10" step="3"/>
<input type="submit" />
</form>
</body>
</html>
Output
Enter Points:
Multiple
The multiple attribute specifies that user can select multiple values for an input field. The multiple attribute works with the email and file input types only. Browser support: Firefox 3.5, Chrome 3.0, Safari 4.0.
Example
<form action="demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>Try to select more than one file when browsing for files.</p>
Output
Select images:
Try to select more than one file when browsing for files.
Pattern
The pattern attribute allows you to specifies a pattern to validate an input field. The pattern is a regular expression. The pattern attribute works with the text, search, url, telephone, email, and password input types. Browser support: Opera 9.5, Chrome 3.0.
Example
<form action="demo_form.asp" method="get">
Enter Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
Output
Enter Country code:
Placeholder
The placeholder attribute provides a hint that describes the expected value of an input field. The placeholder attribute works with text, search, url, telephone, email, and password input types. Browser support: Chrome 3.0, Safari 3.0.
Example
<form action="demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search dotnetheaven" />
<input type="submit" />
</form>
Output
Required
The required attribute used to specifies that an input field must be filled before submitting. The required attribute works with text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file input types. Browser support: Opera 9.5, Chrome 3.0.
Example
<form action="demo_form.asp" method="get">
Enter Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
Output
Enter Name:
So this is all about New Form Attributes in HTML 5.