Home > Article > Web Front-end > New elements and attributes for HTML5 forms

New elements and attributes for HTML5 forms

PHPzOriginal: 2017-03-12 15:56:091211browse

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>

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>

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>

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>

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：

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

Previous article：Recommend 15 excellent cross-platform mobile development toolsNext article：Recommend 15 excellent cross-platform mobile development tools

See more

New elements and attributes for HTML5 forms

Related articles