recherche

Maison >interface Web >Tutoriel H5 >Nouveaux éléments et attributs pour les formulaires HTML5

Nouveaux éléments et attributs pour les formulaires HTML5

PHPz
PHPzoriginal
2017-03-12 15:56:091351parcourir

1. balise control attribut

En HTML5, vous pouvez placer un élément de formulaire à l'intérieur de la balise et transmettre le contrôle de la balise. attribut pour accéder à l’élément de formulaire. 


 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>

Zone de texteattribut d'espace réservé

espace réservé signifie que lorsque la zone de texte est dans le uninput statestatus . Lorsque la zone de texte est dans un état de non-saisie et n'a pas le focus du curseur, le texte de l'invite de saisie est flou. 


 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>

Zone de texte

listeattribut

En HTML5, une zone de texte sur une seule ligne a été ajoutée Un attribut de liste dont la valeur est l'identifiant d'un élément datalist. L'élément datalist est également un élément

nouvellement ajouté dans HTML5. Cet élément est similaire à une zone de sélection, mais lorsque la valeur que l'utilisateur souhaite définir n'est pas dans la liste de sélection, l'utilisateur est autorisé à la saisir lui-même. L'élément datalist lui-même n'est pas affiché, mais est affiché comme une invite de saisie lorsque la zone de texte obtient le 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>

Propriété de saisie semi-automatique de la zone de texte


 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>

L'attribut motif de la zone de texte

L'attribut Sélection

Direction

de la zone de texte

L'attribut indéterminé de la case à cocher

image Soumettre l'attribut

hauteur

du bouton et l'attribut largeur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Recommander 15 excellents outils de développement mobile multiplateformesArticle suivant：Recommander 15 excellents outils de développement mobile multiplateformes

Articles Liés

Voir plus