Nouveaux éléments et attributs pour les formulaires HTML5-Tutoriel H5-php.cn

Nouveaux éléments et attributs pour les formulaires HTML5

PHPz

Libérer： 2017-03-12 15:56:09

original

1274 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!