Home > DeveloperSection > Articles > HTML 5 Form Attributes

HTML 5 Form Attributes


HTML5 HTML5 
Ratings:
0 Comment(s)
 4484  View(s)
Rate this:

HTML 5 Form Attributes

HTML 5 has included some new form related attribute that provide functionality only once possible with JavaScript.

Form Attributes:

1.       autocomplete

2.       novalidate

Input attributes:

1.       required

2.       placeholder

3.       pattern

4.       multiple

5.       min,max and step

6.       list

7.       height and width

8.       autofocus

9.       form overrides

autocomplete attribute

autocomplete attribute determines whether a form or some of its element will be offering similar values previously entered in the same form field.

<form action="Default.aspx" method="get" autocomplete="on"> <!--using autocomplete attribute-->

<input type="text" name="val"/>

E-mail: <input type="email" name="email" autocomplete="off">

<input type="submit">

</form>

novalidate attribute

novalidate attribute will not be validate the entire form or certain elements of the form.

<form action="Default.aspx" method="get" novalidate="novalidate"> <!--using novalidate attribute-->

    <input type="email" name="email" />

    <input type="submit" />

</form>

required attribute

The required attribute specifies that an input field must be filled out before submitting.

<form action="Default.aspx" method="get">

    <table width="300">

        <tr>

            <td>

                User ID:

            </td>

            <td>

                <input type="text" name="usr_name" required="required" /> <!--using required attribute -->

            </td>

        </tr>

        <tr>

            <td>

                User Password:

            </td>

            <td>

                <input type="password" name="usr_name" required="required" />

            </td>

        </tr>

        <tr>

        <td colspan="2" align="center">

        <input type="submit" value="Submit" />

        </td>

        </tr>

    </table>

    </form>

When I will click on button without fill textboxes message will show as shown below:

HTML 5 Form Attributes

placeholder attribute

The placeholder attribute provides a hint that describes the expected value of an input field.

<form action="Default.aspx" method="get">

    <table width="300">

        <tr>

            <td>

                User ID:

            </td>

            <td>

                <input type="text" name="id"  placeholder="Enter Id" />  <!--using placeholder attribute -->

            </td>

        </tr>

        <tr>

            <td>

                User Password:

            </td>

            <td>

                <input type="text" name="pass"  placeholder="Enter Password" />

            </td>

        </tr>

        <tr>

        <td colspan="2" align="center">

        <input type="submit" value="Submit" />

        </td>

        </tr>

    </table>

    </form>

We can see placeholder attribute provides a hint that describes the textboxes.

HTML 5 Form Attributes

pattern attribute

The pattern attribute specifies pattern to validate input filed.

<body>

    <form action="Default.aspx" method="get">

    Contact number:

    <input type="text" name="country_code" pattern="[0-9]{10}" title="Enter ten digit number" /> <!--using pattern attribute -->

    <input type="submit" value="Submit" />

    </form>

</body>

We can see in screenshot if I am trying to enter text in textbox and click on button then error message will show as shown below:

HTML 5 Form Attributes

multiple attribute

The multiple attribute is used to add multiple values for input field.

<body>

    <form action="Default.aspx" method="get">

    Select Files:<input type="file" name="file" multiple="multiple" /><!--using multiple attribute-->

    <input type="submit" value="Submit" />

    </form>

</body>

HTML 5 Form Attributes

min, max and step attribute

The min and max attribute indicate allowed range of the values for the element. The step attribute indicates the granularity that is expected of the value, by limiting the allowed values.

HTML 5 Form Attributes

list attribute

The list attribute is used to identify an element that lists predefined options suggested to the user.

<body>

    Enter your favorite Crickter

    <input type="text" id="Cricktername" list="name">

    <datalist id="name">

        <option value="Sachin Tendulkar" />

        <option value="Virender Shewag" />

        <option value="M S Dhoni" />

        <option value="Yuvraj Singh" />

        <option value="Suresh Raina" />

        <option value="Yusuf Pathan" />

    </datalist>

</body>

HTML 5 Form Attributes

height and width attribute

The height and width attribute specifies of the image or element.

<img src="flower.gif" height="30" width="30" />

autofocus attribute

The autofocus attribute specifies which element will get focus when page will load.

<input type="text" name="user_id"  autofocus="autofocus"/>

form overrides

attribute in submit

attribute in form

overrides

formaction

action

overrides the form action attribute

formenctype

enctype

overrides the form enctype attribute

formmethod

method

overrides the form method attribute (get / post)

formnovalidate

novalidate

overrides the form novalidate attribute

formtarget

target

overrides the form target attribute

 

Browsers support

attribute

IE

Firefox

Opera

Chrome

Safari

autocomplete

8.0

3.5

9.5

3.0

4.0

autofocus

no

no

10.0

3.0

4.0

form overrides

no

no

10.5

no

no

list

no

no

9.5

no

no

min, max, step

no

no

9.5

3.0

no

multiple

no

no

11.0

3.0

4.0

novalidate

no

no

9.0

no

no

pattern

no

no

9.5

3.0

3.0

placeholder

no

no

11.0

3.0

3.0

required

no

no

9.0

no

no

 


Don't want to miss updates? Please click the below button!

Follow MindStick