HTML5 new form attributes

HTML5 new form attributes

HTML5's <form> and < Several new attributes have been added to the input> tag.

##<form> New attributes:

autocomplete
novalidate

##<input>New attribute:

autocomplete

#< ;form> / <input> autocomplete attribute

autocomplete

The attribute specifies that the form or input field should have the autocomplete function.

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

Tip: The autocomplete attribute may be turned on in the form element and turned off 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.

##Example

Open in HTML form autocomplete (an input field turns off autocomplete):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" autocomplete="on">
    姓名:<input type="text" name="fname"><br/>
    留言<input type="text" name="content"><br/>
    E-mail: <input type="email" name="email" autocomplete="off"><br>
    <input type="submit">
</form>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>
</body>
</html>

Run the program and try it

##Tips

: In some browsers, you may need to enable autocomplete for this attribute to take effect.

<form> novalidate attributeA boolean attribute of the novalidate attribute.

novalidate Property specifies that form or input fields should not be validated when submitting the form.

ExampleNo need to verify the submitted form data

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" novalidate>
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>
<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>
</body>
</html>

Run the program to try it

<input> autofocus attributeThe autofocus attribute is a boolean attribute.

The autofocus attribute specifies that the field is automatically obtained when the page is loaded. focus.

ExampleLet the "Message" input field be automatically focused when the page loads:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="fname" ><br>
    留言: <input type="text" name="content" autofocus><br>
    <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>
</body>
</html>

Run the program to try For a moment

You can change autofocus to the name input field and compare the results of the two runs to see if there are any differences

##<input> ; form attribute

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

Tip: If you need to reference more than one form, use a space-separated list.

Example

The input field located outside the form refers to the HTML form (the input form is still part of the form):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" id="form1">
    姓名: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
</form>
<p> "留言" 字段没有在form表单之内，但它也是form表单的一部分。</p>
留言: <input type="text" name="lname" form="form1">
</body>
</html>

Run the program and try it

Note: IE does not support the form attribute

##<input> formaction attribute

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

The formaction attribute will override the action attribute in the <form> element.

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

Example

The following HTML form contains Submit buttons with two different addresses:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="demo.php">
    姓名: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="admin.php" value="提交">
</form>
</body>
</html>

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

##< ;input> formenctype attribute

formenctype

The attribute describes the data encoding of the form submitted to the server (only for the method="post" form in the form form)

formenctype

The attribute overrides the enctype attribute of the form element.

Main

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
</body>
</html>

Run the program and try it

<input> formmethod attribute

formmethod The attribute defines how the form is submitted.

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

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

Example

Redefine the form submission method Example:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>


<form action="" method="get">
     姓名: <input type="text" name="fname"><br>
    密码: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

</body>
</html>

The above code is passed into a page in get mode. One is to reuse the formmethod method to redefine the submission method and submit it to the emo-post.php page in post method

<input> formnovalidate attribute

The novalidate attribute is a boolean attribute.

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

The formnovalidate attribute will override the novalidate attribute of the <form> element.

Note: The formnovalidate attribute is used together with type="submit

Example

Form with two submit buttons (using and not applicable validation):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>
</body>
</html>

Run the program to try Look

<input> formtarget attribute

The formtarget attribute specifies a name or a keyword to indicate that the form is submitted after the data is received

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

Note: The formtarget attribute cooperates with type="submit" and type="image" use.

Example

Form with two submit buttons, displayed in different windows:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action=" ">
     作者姓名: <input type="text" name="fname"><br>
     书本名: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
</body>
</html>

Run the program and try it

<input> height and width attributes

height and width attributes are specified for image type <input> The image height and width of the label.

Note: The height and width attributes are only applicable to <input> tags of image type.

Tip: Images usually specify both height and width attributes. If an image has a height and width set, the space required by the image will be preserved when the page loads. Without these attributes, the browser does not know the size of the image and cannot reserve appropriate space. The image will cause the page layout effect to change during the loading process (even though the image has been loaded).

Example

Defines an image submit button, using the height and width attributes:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg"  alt="Submit" width="100" height="80">
</form>
</body>
</html>

Run the program and try it out

<input> list attribute

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

Example

Predefine the <input> value in <datalist>:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="" method="post">
    <input list="browsers" name="">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit">
</form>
</body>
</html>

Run the program and try it

##<input> min and max attributes

The min, max and step attributes are used for inputs containing numbers or dates. Types specify limits (constraints).

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

Example

##<input> Element minimum and maximum value settings:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    输入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>
    输入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>
    数量 (在1和5之间):
    <input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit">
</form>
</body>
</html>

Run the program and try it

Note: Internet Explorer 9 and earlier IE versions and Firefox do not support the max and min attributes of the input tag.

Note: The max and min attributes do not support date and time input in Internet Explorer 10. IE 10 does not support these input types.

##<input> multiple attributeThe multiple attribute is a boolean attribute.

multiple attribute specification< Multiple values can be selected within the ;input> element.

Note

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

ExampleUpload multiple files:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    选择图片: <input type="file" name="img" multiple>
    <input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
</body>
</html>

Run the program and try it

<input> pattern attribute 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.

Tips: is used for global title The attribute describes the pattern.

Tip: You can learn about regular expressions in our JavaScript tutorial

ExampleThe following example shows a text field that can only contain three letters (excluding numbers and special characters):

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    请输入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>
</body>
</html>

Run the program to try it

<input> placeholder attribute

The placeholder attribute provides a hint describing the expected value of the input field.

A brief prompt will be displayed on the input field before the user enters a value.

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

Example

Input field prompt text:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名：<input type="text" name="fname" placeholder="请输入你的姓名"><br>
    密码：<input type="text" name="lname" placeholder="请输入你的密码"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

Run the program and try it

<input> required attribute

The required attribute is a boolean attribute.

The required attribute specifies that the input field must be filled in before submission (cannot be 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.

Example

Input field that cannot be empty:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    姓名: <input type="text" name="usrname" required>
    <input type="submit">
</form>
</body>
</html>

Run the program, do not fill in and submit it to see

<input> step attribute

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

If step="3", the legal numbers are -3,0,3,6, etc.

Tips: The step attribute can be created with the max and min attributes A range value.

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

Example

The input step is specified as 3:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<form action="">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>
</body>
</html>

Run the program and try it

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

HTML5 <input> tag

## <form> <input>

## Tag	Description
Define a form form
Define an input field

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="" autocomplete="on"> 姓名:<input type="text" name="fname"><br/> 留言<input type="text" name="content"><br/> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> <p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p> <p>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p> </body> </html>

submit Reset Code

Automatic operation

HTML5 new form attributes

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]