HTML5 Form Attributes

One challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.

If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.

As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.

New form attributes:

• autocomplete
• novalidate

New input attributes:

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height and width
• list
• min, max and step
• multiple
• pattern (regexp)
• placeholder
• required

A Better Way

HTML5 now introduces a new form attribute that allows you to associate any orphaned form control with any <form> element on the page. You can read up on this technique on the WHATWG HTML5 spec in the section Association of Controls and Forms, but here’s how this is done

1. <form id="contact_form" method="get">  
2.   
3.     <label>Name:</label>  
4.     <input type="text" id="name" name="name">  
5.   
6.     <label>Email:</label>  
7.     <input type="email" id="email" name="email">  
8.   
9.     <input type="submit" id="submit" value="SEND">  
10.   
11. </form>  
12.   
13. <textarea id="comments" form="contact_form"></textarea>  

Notice two things:

1. The <textarea> element is outside the <form> element (i.e. it’s a sibling, not a child)
2. The <textarea> element has a form attribute with a value that’s equal to the id of the form with which I want it to be associated

It Overrides the Default Behaviour

With this attribute, you can actually override the default form control association behaviour. For example, if there are two forms on a page, you can “steal” a form control from form #2 and make it submit along with form #1.

This would happen even if the form control is nested inside of form element #2. And as a result, form #2 would not submit the “stolen” form control’s data. So the form attribute will override what would naturally happen.

auto-complete Attribute

          The auto-complete attribute specifies that the form or input field should have an autocomplete function.

Note: 
The auto-complete attribute works with <form>, and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.

When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Example

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

auto-focus Attribute

The autofocus attribute specifies that a field should automatically get focus when a page is loaded.

Example

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form Attribute

The form attribute specifies one or more forms the input field belongs to.

Note: The form attribute works with all <input> types.

The form attribute must refer to the id of the form it belongs to:

Example

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

hjgkj