HTML5 new form attributes

In this blog I will share the details about Html5 new form attributes. There are 14 new attributes that we’ll be looking at in this article

1. placeholder
It allows us to set placeholder text, right inside the text field. e.g. first name. It should only be used for short descriptions. For longer titles one should use the title attribute. HTML4 and HTML5 is when the field is empty and current focus is on other element then placeholder attribute value is visible inside the textbox, once user focus is set on this field the text this value will disappear. I still remember i have done this fuctionality using javascript.

2. autofocus
autofocus does exactly what it’s says. It automatically focuses that field when the page is rendered. Autofocus is something that we have used in javaScript for in the past to put the focus on first field of the page, but activity is dependent on javascript so javascript must be loaded. It’s a boolean attribute and is implemented as follows:
All modern browsers support the attribute and, like placeholder, browsers that don’t support simply ignore it :(

3. autocomplete
autocomplete attribute allows users complete forms based on earlier input. This attribute is there science IE5, but has finally been put as a part of HTML5. The default state for for this attribute is set to “on”. It means we dont have to use this explicitly untill its required.

4. required
This attribute explain what is expected, I still remember that i have used jquery validation plugin for same reason. Adding this attribute means enforce user to enter the data for mandetory field. In most of the modern browser it shows the popup icon that shows error message, In safari browser it onlys puts focus on field where as it doest not show’s error message like other browsers.

5. pattern
Its awsome feature, most of the developers would be happy because of this feature. It allows user to add javascript regular expression or current field.

It specifies a JavaScript regular expression for the field’s value to be checked against. pattern makes it easy for us to implement specific validation for product codes, invoice numbers, and so on. The possibilities for pattern are wide-ranging, and this is just one simple example using a product number.
Product Number:

6. list
The list attribute enables the user to associate a list of options with a particular field. These are predefined options value of the list attribute must be the same as the ID of a datalist element. The datalist element is new in HTML5 and represents a predefined list of options for form controls. It works in a similar way to the in-browser search boxes that autocomplete as you type.

This attribute allows user to upload multiple files using input type file html elememnt.

8. novalidate
As name says, If you add this attribute for form tag, it says no validation is required for this form.

9. formnovalidate
We can add this attribute to input type submit or image, on submit event it will enforce to validate the form for required element.

10. form
Classic feature, we can add form attribute inside elements like input type submit, select, text,etc. Using form means that the element doesn’t need to be a child of the associated form and can be moved away from it in the source.

11. formaction , 12. formenctype 13. formmethod 14. formtarget
We can add these attributes for input type elements, if available then these values will have preference otherwise form tag values will be used.

Share this nice post: