---
title: "HTML 5 Form Attributes"  
description: "HTML 5 has included some new form related attribute that provide functionality only once possible with JavaScript.  Form Attributes:autocompletenova"  
author: "Anonymous User"  
published: 2011-07-22  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/579/html-5-form-attributes  
category: "html5"  
tags: ["html5"]  
reading_time: 5 minutes  

---

# HTML 5 Form Attributes

HTML 5 has included some new form related attribute that provide [functionality](https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery) only once possible with JavaScript.\

##### Form Attributes:

1. autocomplete
2. novalidate

##### Input attributes:

1. required
2. placeholder
3. pattern
4. multiple
5. min,max and step
6. list
7. [height and width](https://www.mindstick.com/forum/158660/what-is-the-css-property-used-to-specify-the-height-and-width-of-an-element)
8. autofocus
9. 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](https://www.mindstick.com/forum/158276/how-do-you-use-the-required-attribute-in-html5-to-make-form-fields-mandatory) specifies that an [input field](https://www.mindstick.com/forum/158095/how-to-update-the-knockout-js-input-field-from-a-content-script-on-chrome-extension) 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:

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/234aa581-b6a4-48c3-a14b-a8083545fee6.png)

##### 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.

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/a622dc70-38ec-4740-8a31-fee98cdd89ac.png)

##### pattern attribute

The pattern attribute specifies pattern to [validate input](https://www.mindstick.com/forum/158278/how-to-use-the-pattern-attribute-to-validate-input-fields-against-a-specific-regular-expression) 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](https://www.mindstick.com/forum/23174/error-message-the-page-you-are-requesting-cannot-be-served-because-of-the-extension-configuration) will show as shown below:

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/239f0149-344d-4388-8893-dde92aebc65a.png)

##### multiple attribute

The multiple attribute is used to add [multiple values](https://www.mindstick.com/forum/399/how-to-insert-multiple-values-selected-in-checkbox-in-database) 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>
```

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/65e59c2f-b90a-43c5-af92-70575c45f968.png)

##### 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.

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/27c6402e-4d91-4941-9e78-75c597a04155.png)

##### list attribute

The list [attribute](https://www.mindstick.com/articles/1043/html5-attributes) 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>
```

![HTML 5 Form Attributes](https://www.mindstick.com/mindstickarticle/569051bc-416a-4823-9917-8ac553eee9f3/images/8e66925b-75d6-434c-a7ab-47829cac82d4.png)

##### height and width attribute

The height and width [attribute](https://www.mindstick.com/articles/1043/html5-attributes) specifies of the image or element.

```
<img src="flower.gif" height="30" width="30" />
```

##### autofocus attribute

The autofocus [attribute](https://www.mindstick.com/articles/1043/html5-attributes) 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 |

---

Original Source: https://www.mindstick.com/articles/579/html-5-form-attributes

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.