home

HTML5 Form Attributes

Form attributes are very useful things and its reduce code gives the usability and interaction, writing lines of code its effects on the application like loads slow, connectivity and security and more. Without using form attributes we can validate any kind of forms buts its needs to write numbers of JavaScript lines code.

<autocomplete>
<autofocus>
<form>
<formaction>
<enctype>
<method>
<formnovalidate>
<target>
<height and width>
<list>
<multiple>
<pattern>
<placeholder>
<required>

HTML5 autocomplete Attribute

html5 autocomplete attribute helps you to fill web forms, any purpose anywhere registering with your credentials once it’s done it has been sent to servers or stores in the database, again you want to register with same details by the times its helps, its works like cookies, the data list follow you the time.

Note:-it has two types autocomplete="on" and autocomplete="off"

<input type="text" name="first_name"  autocomplete="on">
<input type="text" name="last_name"  autocomplete="off">
HTML5 autocomplete Online Demo

HTML5 autofocus Attribute

It might simple but its required everywhere in the application forms, when the page load mouse picker point out the first autofocus input box, please check the below example code and also screen shot.

<input type="text" name="first_name" autofocus >
<input type="text" name="last_name">
HTML5 autofocus Online Demo

HTML5 form Attribute

HTML4 form element used to collect user input it’s like a container to collect all the form elements in a place.
The html5 form attribute is used to associate an input, select, or textarea element with a form.

<input type="button" name="sort-l-h" form="sort">

HTML5 form action Attribute

Form action attributes Specifies an address (url) where to submit the default submitting page. Based on the action page can load to next page.

Note:-Any kind of button it can input or image anywhere its works.

<input type="submit" value="Submit" formaction="process.php">

HTML5 form enctype Attribute

formenctype details how the form data is encoded with the POST method type and Specifies the encoding of the submitted data (default: is url-encoded).

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

HTML5 form method Attribute

Specifies the HTTP(GET, POST, PUT, DELETE) method used when submitting the form.

Note:- default: GET

<input type="submit" value="Submit" formmethod="GET">

HTML5 form novalidate Attribute

Specifies that the browser should not validate the form.

HTML5 form target Attribute

Specifies the target of the address(window) in the action attribute.
Please find the below simple example code.

Note:- default: _self

<input type="submit" value="Submit" formtarget="_self">

HTML5 height and width Attribute

Coming soon

HTML5 list Attribute

List attributes enables the users to get the related data in the result, it's associated with users, when you going to search or filter in the search box its help to find out you result, search keywords needs to match.
See the example code

<label>Countries list:
<datalist id="count_list">
  <option value="US">Blackberry</option>
  <option value="UK">Blackcurrant</option>
  <option value="France">Blueberry</option> <option value="india">Blueberry</option>
</datalist>
If other, please specify:
<input type="text" name="countries" list="count_list">
</label>
HTML5 list Online Demo

HTML5 min and max Attribute

Coming soon.

HTML5 multiple Attribute

Simple definition this boolean attribute specifies that multiple options can be selected at once.

Note:- hold down the Ctrl Button select multiple values at once

Please check the Multiple attribute example code

<select multiple>
  <option value="us">United states</option>
  <option value="uk">United kingdom</option>
  <option value="ch">China</option>
  <option value="ind">India</option>
</select>
HTML5 multiple Online Demo

HTML5 regexp Attribute

Coming soon.

HTML5 placeholder Attribute

placeholder is used to validate input, no need javascript or any another programming language to validate forms, when user click on the input box the text(placeholder text) will hide and its allow to enter your credentials.

<input  type="text" name="first_name" placeholder="Enter First  name">
<input type="text" name="last_name"  placeholder="Enter Last name">
HTML5 Placeholder Online Demo

HTML5 required Attribute

The required attribute is nothing but validator, it validates the inputs weathers it has values or not. The required attribute is a boolean attribute. When specified, the element is required. This is mandatory fields in the form.
Please go throw the below example code

User Name: <input id="username" type=user name required name=un required> 
Password:<input id="password" type=password required name=pa required>
HTML5 required Online Demo
User Name: Password:

HTML5 Pattern Attribute

The pattern attribute specifies a JavaScript regular expression for the field’s value to be checked against. It makes it easy for us to implement specific validation for product codes, invoice numbers, and country codes and more.
Follow the below example code

Country code: <input type="text"  name="country_code"  pattern="[A-Za-z]{3}"  title="Three letter country  code">
HTML5 pattern Online Demo
Country code: 
HTML5 step Online Demo
Country code: