Hello

This blog is in continuation with my previous blog about the html5 input attributes. Here is the link: html5 new input attribute

1)FORMMETHOD

This attribute is used for submiting data to the given action url overriding the method attribute. See the below example to understand the concept

Eg.

<form action="#" method="get">

   <span style="Display:block;">First name:</span>
   <input type="text" name="fname">
  <span style="Display:block;">Last name:</span>
  <input type="text" name="lname">
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="#" value="Submit using POST">
</form>

Note: The formmethod attribute of the input tag is not supported in IE 9 and earlier versions.

2)FORMNOVALIDATE

 This attribute is used when we want a partuicular input element should not be validated when we submit the data. Difference between novalidate attribute and formnovalidate is that the novalidate attribute is used within form element and formnovalidate attribute is used within input element.

See the below example to understand the concept

Eg: A form with two submit buttons (with and without validation):

<span style="Display:block;">Name:</span>
<input type="text" name="Name">
 <input type="submit" value="Submit">
 <input type="submit" formnovalidate value="Submit without validation">

Note: The formnovalidate attribute of the input tag is not supported in IE9 and earlier versions, or in Safari.

3)FORMTARGET

Using this attribute we can specify that where to display the data that is received after submitting the form. This attribute override target attribute of form element is such a way that the target attribute is used within form element and formtarget is used within input element.

See the below example to understand the concept

Eg.

    <span style="Display:block;">Name:</span>
    <input type="text" name="Name">
    <input type="submit" value="Submit">
    <input type="submit" formtarget="_blank" value="Submit to a new window/tab">

Note: The formtarget attribute of the input tag is not supported in IE9 and earlier versions.

4)HEIGHT AND WIDTH

 Sometimes the webpage flicker while loading images so to resolve this problem we use height and width attribute of an input element.See the below example to understand the concept

Eg.

<span style="Display:block;">Name:</span>
<input type="text" name="Name">
<input type="image" src="img.png" alt="Submit" width="48" height="48">

5)LIST

List attributes is a type of input attribute which uses datalist element.Datalist element is used when we want a predefined list of options for an input element. See the below example to understand the concept

Eg:

  <form>
    <input list="browsers" name="browser">
    <datalist id="browsers">
    <option value="ie">IE</option>
    <option value="FF">FF</option>
    <option value="GC">GC</option>
    <option value="opera">opera</option>
    </datalist>
    <input type="submit">
   </form>

Note: The datalist tag is not supported in IE9 and earlier versions, or in Safari.