HTML5 new form properties

Several new properties have been added to the <form> and <input> tags of HTML5.

<form> new attribute:

autocomplete

novalidate

<input> new attribute:

autocomplete

autofocus

form

formaction

formenctype

form method

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

<form> / <input> autocomplete Property

The autocomplete attribute specifies that the form or input field should have auto-completion.

When the user starts typing in the auto-complete field, the browser should display the filled-in options in that field.

Hint: The autocomplete attribute may be turned on in the form element and turned off in the input element.

Note : autocomplete applies to <form> tags, as well as the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range and color.

Instance

Open autocomplete in the HTML form (an input field closes autocomplete ):
Run the program and try it out


Tip : In some browsers, you may need to enable auto-completion for this property to take effect.

<form> novalidate Property

A boolean attribute of the novalidate attribute.

The novalidate attribute specifies that the form or input field should not be validated when the form is submitted.

Instance

No need to validate submitted form data

Run the program and try it out

<input> autofocus Property


The autofocus property is a boolean property.

The autofocus attribute specifies that the domain automatically gets focus when the page loads.

Instance

Let the "message" input input field automatically focus when the page loads:

Run the program and try it out

You can change autofocus to the name input input field and compare the results of the two runs to see what is different.

<input> form Property

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

Tip : To reference more than one form, use a space-separated list.

Instance

The input field outside the form forms references the HTML form (the input form still belongs to part of the form):

Run the program and try it out

Note : IE does not support the form attribute.

<input> form action Property

 The form action attribute is used to describe the URL address of the form submission.

 The formaction attribute overrides the action attribute in the <form> element.

Note: The formaction attribute is used for type="submit" and type="image".

Instance

The following HTML form contains a submit button for two different addresses:

One of the above programs will be submitted to the demo.php page, and one will be submitted to the admin.php page.

<input> form enctype Property


The form enctype attribute describes the data encoding that the form submits to the server (only for the method="post" form in the form form)

The form enctype attribute overrides the enctype attribute of the form element.

Main : This attribute is used with type="submit" and type="image".

Instance

The first submit button has the default encoding to send the form data, and the second submit button sends the form data in the "multipart/form-data" encoding format:

Run the program and try it out

<input> form method Property

The formmethod attribute defines how the form is submitted.

The formmethod property overrides the method property of the <form> element.

Note : This property can be used with type="submit" and type="image".

Instance

Redefine the form submission method instance:

The above code is passed to a page in get mode, and the re-definition submission method is re-formed in the form method, and submitted to the emo-post.php page in post mode.

<input> formnovalidate Property

The novalidate attribute is a boolean attribute.

The novalidate attribute describes that the <input> element does not need to be validated when the form is submitted.

The form no validate attribute overrides the no validate attribute of the <form> element.

Note : The form no validate attribute is used with type="submit

Instance
Two submit button forms (use and not apply validation):
Run the program and try it out

<input> form target Property

The form target attribute specifies a name or a keyword to indicate the presentation after the form submission data is received.

 The formtarget attribute overrides the target attribute of the <form> element.

Note : The form target attribute is used with type="submit" and type="image".

Instance

Two submit button forms, displayed in different windows:

Run the program and try it out

<input> height and width properties

The height and width properties specify the image height and width for the <input> tag of the image type.

Note: The height and width properties only apply to <input> tags of type image.

Tip : Images usually specify both height and width properties. If the image is set to height and width, the space required for the image is preserved when the page is loaded. Without these attributes, the browser does not know the size of the image and cannot reserve the appropriate space. The image will change the page layout effect during the loading process (although the image is loaded).

Instance
An image submit button is defined, using the height and width properties:
Run the program and try it out

<input> list Property

The list attribute specifies the datalist of the input field. The datalist is a list of options for the input field.

Instance
Predefine the <input> value in <datalist>:
Run the program and try it out

<input> min and max properties

The min, max, and step attributes are used to specify qualifications (constraints) for input types that contain numbers or dates.

Note : The min, max, and step attributes apply to the following types of <input> tags: date pickers, number, and range.

Instance
<input> Element minimum and maximum settings:

Run the program and try it out

Note : In Internet Explorer 9 and earlier versions of IE, Firefox does not support the max and min properties of the input tag.

Note : The date and time are not supported in the max and min properties in Internet Explorer 10, and are not supported by IE 10.


<input> multiple Property


The multiple attribute is a boolean attribute.

The multiple attribute specifies that multiple values ​​can be selected in the <input> element.

Note : The multiple attribute applies to the following types of <input> tags: email and file. : email, and file.

Instance

Upload multiple files:

Run the program and try it out

<input> pattern Property

The pattern attribute describes a regular expression used to validate the value of an <input> element.

Note: The pattern attribute applies to the following types of <input> tags: text, search, url, tel, email, and password.

Hint: It is used to describe the mode in the global title attribute.

Tip: You can learn about regular expressions in our JavaScript tutorials.

Instance

The following example shows a text field that can only contain three letters (without numbers and special characters):
Run the program and try it out

<input> placeholder Property

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

A short prompt is displayed on the input field before the user enters the value.

Note : The placeholder attribute applies to the following types of <input> tags: text, search, url, telephone, email, and password.

Instance

Input field hint text:

Run the program and try it out

<input> required Property

The required attribute is a boolean attribute.

The required attribute specifies that the input field must be filled in before submission (not null).

Note: The required attribute applies to the following types of <input> tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.

Instance

Input field that cannot be empty:

Run the program, do not fill out the submission to see

<input> step Property

The step attribute specifies a legal number interval for the input field.

If step="3", the legal number is -3, 0, 3, 6, etc.

Tip : The step attribute can create a region value with the max and min properties.

Note : The step attribute is used with the following type types: number, range, date, datetime, datetime-local, month, time and week.

Instance

The input step size is specified as 3:

Run the program and try it out

Note : Internet Explorer 9 and earlier versions of IE, or Firefox does not support the step attribute of the input tag.

HTML5 <input> tag

     label     description
    <form>Define a form form
    <input>Define an input field


Last Updated: 2018-07-06 12:32:44 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :