New elements and attributes for HTML5 forms-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

New elements and attributes for HTML5 forms

PHPz

Mar 12, 2017 pm 03:56 PM

html5 form

1, tagcontrolAttribute

In HTML5, you can place a form element inside the tag, and pass the tag's control attribute to access the form element.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9     function setValue(){10         var label=document.getElementById("label");11         var textbox=label.control;12         textbox.value=510006;13     }14 </script>15     <form>16     <label id="label">17     邮编：18         <input id="txt_zip" maxlength="6">19         <small>请输入六位数字</small>20     </label>21     <input type="button" value="设置默认值" onclick="setValue()">22     </form>23 </body>24 </html>

Copy after login

Text boxplaceholder attribute

placeholder refers to when the text box is not entered Input prompt displayed in status . When the text box is in an uninput state and does not obtain the cursor focus, the input prompt text is blurred.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Placehoder属性</title> 6 </head> 7 <body> 8     <input type="text" placeholder="请输入用户名"> 9 </body>10 </html>

Copy after login

Text boxlistAttribute

In HTML5, a list is added for the single-line text box Attribute, the value of this attribute is the id of a certain datalist element. The datalist element is also a new element in HTML5. This element is similar to a selection box, but when the value the user wants to set is not within the selection list, the user is allowed to enter it by himself. The datalist element itself is not displayed, but is displayed as a prompt for input when the text box gains focus.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>List属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" list="zkdir">10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

Copy after login

Text box AutoComplete property

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>文本框AutoComplete属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" autocomplete="on" list="zkdir"> <!--autocomplete有两个值：on&off，不填写取决于当前浏览器的默认值-->10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

Copy after login

Text box The pattern attribute

The Selection

Direction attribute of the text box

The indeterminate attribute of the check box

image submission

The height property and width property of button

The above is the detailed content of New elements and attributes for HTML5 forms. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn