HTML5 new form attributes

HTML5's <form> and <input> tags add several new attributes.

<form>New attributes: autocomplete novalidate

<input>New properties:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

<form> / <input> autocomplete attribute
The autocomplete attribute specifies that the form or input field should have autocomplete functionality.
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 <form> tags, as well as the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range and color.
Example
Turn on autocomplete in HTML form (turn off autocomplete for an input field):

##<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>

##<form> novalidate attribute
A boolean attribute of novalidate attribute.novalidate attribute specification Form or input fields should not be validated when submitting a form. Example
No need to verify submitted form data

<form action="demo-form.php" novalidate>

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

## <input type="submit">

</form>

<input> autofocus attribute
The autofocus attribute is a boolean attribute.
The autofocus attribute specifies that the field automatically gains focus when the page is loaded. .
Example
Let the "First name" input input field automatically focus when the page loads:

##First name:<input type="text" name ="fname" autofocus>

##<input> form attributeThe form attribute specifies the one to which the input field belongs or multiple forms. Tip: If you need to reference more than one form, use a space-separated list.
Example
The input field located outside the form form references the HTML form (the input form is still part of the form form):



<input> formaction attributeThe 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 HTMLform form contains two submit buttons with different addresses:

<

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 as admin">

##</form>

##<input> formenctype Attributes

The formenctype attribute describes the data encoding of the form submitted to the server (only for method="post" forms in the form form)The formenctype attribute overrides the enctype attribute of the form element. Main: This attribute is used 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" encoding format:




<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="Submit as Multipart/form-data">

</form>

##<input> formmethod attribute The formmethod attribute defines how the form is submitted. The formmethod attribute overrides the method attribute of the <form> element.
Note: This attribute can be used with type="submit" and type="image".
Example
Redefine form submission method example:

##<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-post.php"

## value="Submit using POST"> ;

##</form>

##<input> formnovalidate attribute

novalidate attribute is a boolean attribute.

novalidate This attribute describes that the <input> element does not need to be validated when the form is submitted. The formnovalidate attribute will override the novalidate attribute of the <form> element. Note: The formnovalidate attribute is used with type="submit

Example

Forms with two submit buttons (with and without validation) :




<form action="demo-form.php">

## E-mail: < ;input type="email" name="userid"><br>

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

<input type="submit" formnovalidate value="Submit without validation">

</form>

#<input> formtarget attribute The formtarget attribute specifies a name or a keyword to indicate the display after the form submission data is received.
The formtarget attribute overrides the target attribute of the <form> element.
Note: The formtarget attribute is used with type="submit" and type="image".
Example
Two submit buttons Forms, displayed in different windows:

##<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 as normal">

< ;input type="submit" formtarget="_blank"

## value="Submit to a new window">

##</ form>

##<input> height and width attributes

height and width attributes specify the <input> for image type ; 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:


##<input type="image" src="img_submit.gif " alt="Submit" width="48" height="48">

# #<input> list attribute

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

Instance

Predefined<input> value in <datalist>:#<input list="browsers"> ;

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

## <option value="Chrome">

<option value="Opera">

<option value="Safari">

##</datalist>

#<input> min and max attributes

min, max and step attributes are used to specify limits (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. Example

<input> Element minimum and maximum value settings:

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

##<input type="date" name="bday " min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

< ;input> multiple attribute

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.Example
Upload multiple files:


Select images: <input type="file" name="img" multiple>

<input> pattern attribute
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.
Tip: It is used by the global title attribute to describe the pattern.
Example
The following example shows a text field that can only contain three letters (excluding numbers and special characters):

##Country code: <input type= "text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

##<input> placeholder attributeThe placeholder attribute provides a hint describing the value expected by 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 t:

<input type="text" name="fname" placeholder="First name">

<input> required attributerequired attribute is a boolean attribute.required attribute must be specified in Fill in the input fields before submitting (cannot be empty).
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 fields that cannot be empty:

Username: <input type="text" name="usrname" required>

<input> step attributeThe 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 used with the max and min attributes to create a range value.
Note: The step attribute is the same as The following types are used together: number, range, date, datetime, datetime-local, month, time and week.
Example
The input step is specified as 3:

<input type="number" name="points" step="3">

##<output> Element
HTML5 also introduces a new element <output> to represent different types of output results, such as output written by a script.

You can also use the for attribute to specify the relationship between the output element and other elements in the document that affect the calculation (for example, as an input source or parameter). The value of the for attribute is a space-separated list of IDs of other elements.

placeholder attribute
HTML5 introduces a new attribute called placeholder. This attribute on the <input> and <textarea> elements provides the user with a hint as to what can be entered in the field. Placeholder characters cannot contain carriage returns or line feeds.
The following is the simple syntax of the placeholder attribute:

##<input type="text" name="search" placeholder="search the web"/>

This attribute is only supported by the latest versions of Mozilla, Safari and Chrome browsers.

required attributeNow, we don’t need to use JavaScript to handle client-side validations such as empty text boxes that can never be submitted, because HTML5 introduces a new attribute called required Attributes can be used as follows, which will ensure that the input box has a value:

<input type="text" name="search" required/>

This attribute is only supported by the latest versions of Mozilla, Safari and Chrome browsers.

Instance 1:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="demo-form.php" id="form1">
      First name: <input type="text" name="fname"><br>
      <input type="submit" value="提交">
  </form>
   <p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>
    Last name: <input type="text" name="lname" form="form1">
   <p><b>注意:</b> IE不支持form属性</p>
</body>
</html>

Instance 2:

<!doctype html>
<html>
    <head> 
    <meta charset="utf-8"> 
    <title>php.cn</title> 
</head>
    
<body>
  <form action="" 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>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>
</body>
</html>