English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Some new form attributes have been added, form has added autocomplete and novalidate, input controls have added autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp)
HTML5 New attributes have been added to the <form> and <input> tags.
New attributes of <form>:
autocomplete
novalidate
New attributes of <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
The autocomplete attribute specifies that the form or input field should have an auto-complete feature.
When the user starts typing in the auto-complete field, the browser should display the filled options in the field.
Hint: The autocomplete attribute may be enabled in the form element but disabled in the input element.
Note: autocomplete applies to the <form> tag, as well as the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range, and color.
Enable autocomplete in HTML form (one input field closes autocomplete):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-"form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </<form> <p>Fill in and submit the form, then refresh the page to see how the content is automatically filled in.</p> <p>Notice that the autocomplete attribute of the form is "on" (open), but the e-mail automatically sets "off" (off).</p> </body> </html>Test See ‹/›
Tip: In some browsers, you may need to enable the auto-complete feature to make this attribute work.
The novalidate attribute is a boolean (boolean) attribute.
The novalidate attribute specifies that the form or input fields should not be validated when the form is submitted.
Submit form data without validation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-"form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </<form> <p><strong>Notice:</In Safari and Internet Explorer 9 Previous versions do not support the novalidate attribute.</p> </body> </html>Test See ‹/›
The autofocus attribute is a boolean attribute.
The autofocus attribute specifies that the field should automatically gain focus when the page is loaded.
Let the "First name" input field automatically focus when the page is loaded:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9Early versions of IE do not support the 'autofocus' attribute of the 'input' tag.</p> </body> </html>Test See ‹/›
The 'form' attribute specifies one or more forms to which the input field belongs.
Hint:To reference more than one form, use a space-separated list.
Input fields located outside the 'form' form refer to the HTML form (the input form is still part of the 'form' form):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </<form> <p>"Last name" field is not within the 'form' form, but it is also part of the 'form' form.</p> Last name: <input type="text" name="lname" form="form1"> <p><b>Attention:</b>IE does not support the 'form' attribute</p> </body> </html>Test See ‹/›
The 'formaction' attribute is used to describe the URL address to which the form is submitted.
The 'formaction' attribute will override the 'action' attribute of the '<form>' element.
Note: The 'formaction' attribute is used for 'type="submit"' and 'type="image"'.
The following HTML form contains two submit buttons with different addresses:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo-admin.php" value="submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9Early versions of IE do not support the 'formaction' attribute of the 'input' tag.</p> </body> </html>Test See ‹/›
The 'formenctype' attribute describes the data encoding of the form submitted to the server (only for form 'method="post"' forms)
The 'formenctype' attribute overrides the 'enctype' attribute of the 'form' element.
Main: This attribute is used in conjunction with 'type="submit"' and 'type="image"'.
The first submit button sends form data with default encoding, the second submit button uses "multipart/form-data" encoding format to send form data:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-post-enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Multipart/form-data submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9Early versions of IE do not support the 'formenctype' attribute of the 'input' tag.</p> </body> </html>Test See ‹/›
The formmethod attribute defines the method of form submission.
The formmethod attribute overrides the method attribute of the <form> element.
Note: This attribute can be used with type="submit" and type="image".
Example of redefining the form submission method:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo-form.php value="Use POST to submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9And earlier IE versions do not support the formmethod attribute of the input tag.</p> </body> </html>Test See ‹/›
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 formnovalidate attribute overrides the novalidate attribute of the <form> element.
Note: The formnovalidate attribute is used together with type="submit
Form with two submit buttons (with and without validation):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate="formnovalidate" value="Do not validate submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9And earlier IE versions, or Safari, do not support the formnovalidate attribute of the input tag.</p> </body> </html>Test See ‹/›
The formtarget attribute specifies a name or a keyword to indicate where the form data should be displayed after submission.
The formtarget attribute overrides the target attribute of the <form> element.
Note: The formtarget attribute is used in conjunction with type="submit" and type="image".
A form with two submit buttons, displayed in different windows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Normal Submit"> <input type="submit" formtarget="_blank" value="Submit to a new page"> </<form> <p><strong>Notice:</strong>Internet Explorer 9and earlier IE versions do not support the formtarget attribute of the input tag.</p> </body> </html>Test See ‹/›
The height and width attributes specify the height and width of the image for the image type <input> tags.
Note: The height and width attributes are only applicable to the image type <input> tags.
Hint:Images usually specify both height and width attributes. If the image is set to height and width, the space required by the image It will be retained when loading the page. If these attributes are not present, The browser does not know the size of the image and cannot reserve Appropriate space. The image loading process can change the layout effect of the page. (even though the image has been loaded).
A submit button image was defined using the height and width attributes:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </<form> </body> </html>Test See ‹/›
The list attribute specifies the datalist for the input field. The datalist is a list of options for the input field.
Predefined <input> values in <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </<form> <p><strong>Attention:/strong>Internet Explorer 9(earlier IE versions), Safari does not support the datalist tag.</p> </body> </html>Test See ‹/›
The min, max, and step attributes are used to specify 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.
<input> element minimum and maximum value settings:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> Input 1980-01-01 date before: <input type="date" name="bday" max="1979-12-31><br> Input 2000-01-01 date after: <input type="date" name="bday" min="2000-01-02><br> quantity (in1and5): <input type="number" name="quantity" min="1" max="5><br> <input type="submit"> </<form> <p><strong>Attention:/strong>Internet Explorer 9Early versions of IE and Firefox do not support the max and min attributes of the input tag./p> <p><strong>Attention:/strong> In Internet Explorer 10The max and min attributes do not support input of dates and times, IE 10 These input types are not supported./p> </body> </html>Test See ‹/›
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:
Upload multiple files:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> Select image: <input type="file" name="img" multiple> <input type="submit"> </<form> <p>Try to select one or more images./p> <p><strong>Attention:/strong> Internet Explorer 9Early versions of IE do not support the multiple attribute of the input tag./p> </body> </html>Test See ‹/›
The pattern attribute describes a regular expression used to validate the value of the <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 globally title The attribute describes the pattern.
The following example shows a text field that can only contain three letters (no numbers or special characters):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/title>
</head>
<body>
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3" title="Three letter country code">
<input type="submit">
</<form>
<p><strong>Attention:/strong> Internet Explorer 9Early versions of IE or Safari do not support the pattern attribute of the input tag./p>
</body>
</html>Test See ‹/›The placeholder attribute provides a hint (hint) that describes the expected value of the input field.
A brief hint is displayed on the input field before the user enters a value.
Note: The placeholder attribute is applicable to the following types of <input> tags: text, search, url, telephone, email, and password.
Input field prompt text t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="Submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9and earlier IE versions do not support the placeholder attribute of the input tag.</p> </body> </html>Test See ‹/›
The required attribute is a boolean attribute.
The required attribute specifies that the input field must be filled out before submission (cannot be empty).
Note:The required attribute is applicable to the following types of <input> tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file.
Input field cannot be empty:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9and earlier IE versions, or Safari, do not support the required attribute of the input tag.</p> </body> </html>Test See ‹/›
The step attribute specifies the valid numeric intervals for the input field.
If step="3If "", then a valid number is -3,0,3,6 and
Tip: The step attribute can be used with The max and min attributes create an area value.
Note: The step attribute is used with the following type types: number, range, date, datetime, datetime-local, month, time, and week.
Specify the input step length as3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title>/title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </<form> <p><strong>Notice:</strong>Internet Explorer 9or earlier IE versions, or Firefox does not support the step attribute of the input tag.</p> </body> </html>Test See ‹/›
| Tag | Description |
| <form> | Define a form |
| <input> | Define an input field |