HTML5 Form Attributes

HTML5 introduced two new attribute for form tag. one is autocomplete and another one is novalidate

autocomplete [Browser: IE9+, Opera, Firefox, Safari, Chrome]

This attribute is use to enable or disable autocomplete option for input fields and form tags. if autocomplete is on then the browser automatically fills he values which the user entered before.

<form action="?save=true" autocomplete="on"> ..... </form> 

novalidate [Browser: IE9+, Opera, Firefox, Chrome]

If you want to disable form field validation you can use novalidate attribute.

<form action="?save=true" novalidate> ..... </form> 

New attributes for input

autofocus [Browser: All latest browser]

This attribute use to autometically focus the input field when the page load

<input type="text" name="fname" autofocus>

form [Browser: All latest browser, except IE. ]

If you place an input type out side the form tag, still you can make the input as part of the form element. In the following example Last name will also be part of the above form.

<form action="?save=true" id="form1">
  First name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

formaction [Browser: All latest browsers. ]

Let say you have 2 submit buttons in single form and you want to submit the form to two differnt location. Here you can use formaction in one submit button and the other will work for the difault action set in form action tag.

<form action="?save=true">
....
....
  <input type="submit" value="Option1">
  <input type="submit" formaction="open2.php" value="Option2">
</form>  

formenctype [Browser: All latest browsers. ]

Same as formaction if you want to use 2 different encoding (normal and multipart/form-data ) then you can use formenctype.

<form action="?save=true">
.....
.....
  <input type="submit" value="Option1">
  <input type="submit" value="Option2" formenctype="multipart/form-data">
</form>

formmethod [Browser: All latest browsers. ]

Same as formaction and formenctype if you want to use both GET and POST method in a single form with 2 submit button then you can use formmethod.

<form action="?save=true" method="post" >
.....
.....
  <input type="submit" value="Option1">
  <input type="submit" value="Option2" formmethod="get" formaction="1.php">
</form>

formnovalidate [Browser: All latest browsers. Except Safari ]

This attributr is used to submit a from with 2 submit button one with validation and other without validation.

<form action="?save=true" method="post" >
.....
.....
  <input type="submit" value="Option1">
  <input type="submit" value="Option2" formnovalidate>
</form>

formtarget [Browser: All latest browsers.]

This attribute is used to set from target.

<form action="?save=true" method="post" >
.....
.....
  <input type="submit" value="Option1">
  <input type="submit" value="Option2" formtarget="_blank">
</form>

datalist [Browser: All latest browsers. Except Safari]

This attribute is used to set pre-defined options for an input element.

<input list="course">
<datalist id="course">
  <option value="HTML">
  <option value="CSS">
  <option value="jQuery">
  <option value="PHP">
  <option value="MySql">
</datalist>

multiple [Browser: All latest browsers.]

This attribute allow user to provide multiple email ids or select multiple images for input type file.

Select multiple images: <input type="file" name="myImage" multiple>

pattern [Browser: All latest browsers. Except Safari]

The pattern attribute specifies a regular expression that the <input> element's value is checked against. The pattern work for text, search, url, tel, email, and password.
In the following example, the input field will accept only 5 letters.

<input type="text" name="myField" pattern="[A-Za-z]{5}">

placeholder [Browser: All latest browsers.]

Display hint text inside the input fields.

<input type="text" name="fname" placeholder="First name">

required [Browser: All latest browsers. Except Safari]

validate an input type before submiting the form

<input type="text" name="fname" required>