HTML 5 has included some new form related attribute that provide functionality only once possible with JavaScript.
Form Attributes:
- autocomplete
- novalidate
Input attributes:
- required
- placeholder
- pattern
- multiple
- min,max and step
- list
- height and width
- autofocus
- form overrides
autocomplete attribute
autocomplete attribute determines whether a form or some of its element will be offering similar values previously entered in the same form field.
<form action="Default.aspx" method="get" autocomplete="on"> <!--using autocomplete attribute-->
<input type="text" name="val"/>
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>
novalidate attribute
novalidate attribute will not be validate the entire form or certain elements of the form.
<form action="Default.aspx" method="get" novalidate="novalidate"> <!--using novalidate attribute-->
<input type="email" name="email" />
<input type="submit" />
</form>
required attribute
The required attribute specifies that an input field must be filled out before submitting.
<form action="Default.aspx" method="get">
<table width="300">
<tr>
<td>
User ID:
</td>
<td>
<input type="text" name="usr_name" required="required" /> <!--using required attribute -->
</td>
</tr>
<tr>
<td>
User Password:
</td>
<td>
<input type="password" name="usr_name" required="required" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
When I will click on button without fill textboxes message will show as shown below:
placeholder attribute
The placeholder attribute provides a hint that describes the expected value of an
input field.
<form action="Default.aspx" method="get">
<table width="300">
<tr>
<td>
User ID:
</td>
<td>
<input type="text" name="id" placeholder="Enter Id" /> <!--using placeholder attribute -->
</td>
</tr>
<tr>
<td>
User Password:
</td>
<td>
<input type="text" name="pass" placeholder="Enter Password" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
We can see placeholder attribute provides a hint that describes the textboxes.
pattern attribute
The pattern attribute specifies pattern to validate input filed.
<body>
<form action="Default.aspx" method="get">
Contact number:
<input type="text" name="country_code" pattern="[0-9]{10}" title="Enter ten digit number" /> <!--using pattern attribute -->
<input type="submit" value="Submit" />
</form>
</body>
We can see in screenshot if I am trying to enter text in textbox and click on button then error message will show as shown below:
multiple attribute
The multiple attribute is used to add multiple values for input field.
<body>
<form action="Default.aspx" method="get">
Select Files:<input type="file" name="file" multiple="multiple" /><!--using multiple attribute-->
<input type="submit" value="Submit" />
</form>
</body>
min, max and step attribute
The min and max attribute indicate allowed range of the values for the element. The step attribute indicates the granularity that is expected of the value, by limiting the allowed values.
list attribute
The list attribute is used to identify an element that lists predefined options suggested to the user.
<body>
Enter your favorite Crickter
<input type="text" id="Cricktername" list="name">
<datalist id="name">
<option value="Sachin Tendulkar" />
<option value="Virender Shewag" />
<option value="M S Dhoni" />
<option value="Yuvraj Singh" />
<option value="Suresh Raina" />
<option value="Yusuf Pathan" />
</datalist>
</body>
height and width attribute
The height and width attribute specifies of the image or element.
<img src="flower.gif" height="30" width="30" />
autofocus attribute
The autofocus attribute specifies which element will get focus when page will load.
<input type="text" name="user_id" autofocus="autofocus"/>
form overrides
|
attribute in submit |
attribute in form |
overrides |
|
formaction |
action |
overrides the form action attribute |
|
formenctype |
enctype |
overrides the form enctype attribute |
|
formmethod |
method |
overrides the form method attribute (get / post) |
|
formnovalidate |
novalidate |
overrides the form novalidate attribute |
|
formtarget |
target |
overrides the form target attribute |
Browsers support
|
attribute |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
autofocus |
no |
no |
10.0 |
3.0 |
4.0 |
|
form overrides |
no |
no |
10.5 |
no |
no |
|
list |
no |
no |
9.5 |
no |
no |
|
min, max, step |
no |
no |
9.5 |
3.0 |
no |
|
multiple |
no |
no |
11.0 |
3.0 |
4.0 |
|
novalidate |
no |
no |
9.0 |
no |
no |
|
pattern |
no |
no |
9.5 |
3.0 |
3.0 |
|
placeholder |
no |
no |
11.0 |
3.0 |
3.0 |
|
required |
no |
no |
9.0 | no | no |
Leave Comment