search

Home >Web Front-end >H5 Tutorial >Organize common attributes and new attributes of forms in HTML5_html5 tutorial skills

Organize common attributes and new attributes of forms in HTML5_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:46:001693browse

HTML5 new form attributes
HTML5's

and tags have added several new attributes.
New attribute:
autocomplete
novalidate
New attributes:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step


/ autocomplete attribute
The autocomplete attribute specifies that the form or input field should have autocomplete function.
When the user starts typing in the autocomplete field, the browser should display the options to fill in the field.
Tip: The autocomplete attribute may be turned on in the form element but turned off in the input element.
Note: autocomplete works with tags, as well as the following types of 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):

XML/HTML CodeCopy content to clipboard
  1. <form action="demo-form.php " autocomplete="on">
  2. First name:<input type= "text" name="fname"><br>
  3. Last name: <input type= "text" name="lname"><br>
  4. E-mail: <input type="email" name="email" autocomplete="off"><br>
  5. <input type="submit" >
  6. form>


novalidate attribute
A boolean attribute of the novalidate attribute. The
novalidate attribute specifies that the form or input fields should not be validated when submitting the form.
Example
No need to verify submitted form data

XML/HTML CodeCopy content to clipboard
  1. <form action="demo-form.php " novalidate>
  2. E-mail: <input type="email" name="user_email">
  3. <input type="submit" >
  4. form>


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 field automatically focus when the page loads:

XML/HTML CodeCopy content to clipboard
  1. First name:<input type= "text" name="fname" autofocus>


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.
Instance
The input field located outside the form refers to the HTML form (the input form is still part of the form):

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

XML/HTML CodeCopy content to clipboard
  1. <form action="demo-form.php">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit"><br>  
  5.   <input type="submit" formaction="demo-admin.php"  
  6.   value="Submit as admin">  
  7. form>  


formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。
实例
第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

XML/HTML Code复制内容到剪贴板
  1. <form action="demo-post_enctype.php" method="post">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   <input type="submit" value="Submit">  
  4.   <input type="submit" formenctype="multipart/form-data"  
  5.   value="Submit as Multipart/form-data">  
  6. form>  


formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的的method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
实例
重新定义表单提交方式实例:

XML/HTML Code复制内容到剪贴板
  1. <form action="demo-form.php" method="get">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit">  
  5.   <input type="submit" formmethod="post" formaction="demo-post.php"  
  6.   value="Submit using POST">  
  7. form>  


formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用
实例
两个提交按钮的表单(使用与不适用验证 ):

XML/HTML Code复制内容到剪贴板
  1. <form action="demo-form.php">  
  2.   E-mail: <input type="email" name="userid"><br>  
  3.   <input type="submit" value="Submit"><br>  
  4.   <input type="submit" formnovalidate value="Submit without validation">  
  5. form>  

formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 元素的target属性.
注意: formtarget 属性与type="submit" 和 type="image"配合使用.
实例
两个提交按钮的表单, 在不同窗口中显示:

XML/HTML Code复制内容到剪贴板
  1. <form action="demo-form.php">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit as normal">  
  5.   <input type="submit" formtarget="_blank"  
  6.   value="Submit to a new window">  
  7. form>  


height 和 width 属性
height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
实例
定义了一个图像提交按钮, 使用了 height 和 width 属性:

XML/HTML Code复制内容到剪贴板
  1. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">  

list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
OperaSafariChromeFirefoxInternet Explorer
实例
在 中预定义 值:

XML/HTML Code复制内容到剪贴板
  1. <input list="browsers">  
  2.   
  3. <datalist id="browsers">  
  4.   <option value="Internet Explorer">  
  5.   <option value="Firefox">  
  6.   <option value="Chrome">  
  7.   <option value="Opera">  
  8.   <option value="Safari">  
  9. datalist>  

min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range。
实例

XML/HTML Code复制内容到剪贴板
  1. <input> Element minimum and maximum value settings:
  2. Enter a date before 1980-01-01:
  3. <input type="date" name="bday" max="1979-12-31">
  5. Enter a date after 2000-01-01:
  6. <input type="date" name="bday" min="2000-01-02">
  8. Quantity (between 1 and 5):
  9. <input type="number" name="quantity" min="1" max="5">


multiple attribute
The multiple attribute is a boolean attribute. The
multiple attribute specifies that multiple values ​​can be selected in the element.
Note: The multiple attribute applies to the following types of tags: email and file. : email, and file.
Example
Upload multiple files:

XML/HTML CodeCopy content to clipboard
  1. Select images: <input type= "file" name="img" multiple>


pattern attribute
The pattern attribute describes a regular expression used to validate the value of the element.
Note: The pattern attribute applies to the following types of tags: text, search, url, tel, email, and password.
Tip: It is used with 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):

XML/HTML CodeCopy content to clipboard
  1. Country code: <input type= "text" name="country_code" pattern="[A-Za-z]{3}" title=" Three letter country code">


placeholder attribute
The placeholder attribute provides a hint describing the expected value of the input field.
A brief prompt is displayed on the input field before the user enters a value.
Note: The placeholder attribute applies to the following types of tags: text, search, url, telephone, email and password.
Example
input field prompt text t:

XML/HTML CodeCopy content to clipboard
  1. <input type="text" name="fname" placeholder="First name"> 


required attribute
required attribute is a boolean attribute.
required attribute specifies that the input field must be filled in before submission (cannot be empty).
Note: The required attribute applies to the following types of tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.
Instance
Input field that cannot be empty:

XML/HTML CodeCopy content to clipboard
  1. Username: <input type="text" name="usrname" required>


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.
Tip: 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.
Instance
specifies that the input step is 3:

XML/HTML CodeCopy content to clipboard
  1. <input type="number" name="points" step="3"> 


element
HTML5 also introduces a new element 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 and