Introduction détaillée aux nouveaux attributs des formulaires HTML5

Cet article présente principalement le nouvel attribut dans le formulaire HTML5 en détail, et joint un exemple d'analyse, simple et facile à comprendre. Amis qui en ont besoin, jetons un coup d'oeil ensemble

1. L'attribut form de l'élément dans le formulaire

peut mettre le formulaire. sur la page en H5 n'importe où, puis spécifiez un attribut de formulaire pour l'élément, la valeur de l'attribut est l'identifiant du formulaire, afin que vous puissiez déclarer que l'élément est subordonné au formulaire spécifié

<form id="testform">
     <input type="text">
    </form>
    <textarea form="testform"></textarea>

2. L'attribut formaction des éléments du formulaire

En H4, la méthode de soumission du formulaire

<form action="1.jsp">
</form>

Soumettre l'intégralité du formulaire

En H5, vous pouvez ajouter la page jsp soumise à chaque attribut du formulaire

<form action="1.jsp">
     <input type="submit" action="1-1.jsp">提交到1页面</form>
     <input type="submit" action="1-2.jsp">提交到2页面</form>
     <input type="submit" action="1-3.jsp">提交到3页面</form>
    </form>

3. formmethod des éléments dans le formulaire Les attributs

peuvent spécifier la méthode de soumission pour chaque élément du formulaire

<form action="1.jsp">
     <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
     <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form>
    </form>

4. Attribut formenctype des éléments du formulaire

Comme ci-dessus, il fonctionne avec chaque élément, le code est abrégé

5. L'attribut formtarget de la forme

Comme ci-dessus, cela fonctionne avec chaque élément, Le code est abrégé

6. L'attribut autofocus de l'élément

est ajouté à la zone de texte, à la zone de sélection et au bouton contrôle etc. attribut de mise au point automatique, lorsque l'écran est ouvert, il sera automatiquement mis au point.

<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

Un seul contrôle sur une page peut avoir l'attribut autofocus et ne peut pas être abusé

attribut obligatoire

peut être utilisé dans la plupart des éléments d'entrée. Si la valeur d'entrée est vide, la soumission n'est pas autorisée. Le navigateur affichera des informations textuelles pour inviter l'utilisateur à saisir du contenu.

8. L'attribut labels

peut ajouter un attribut labels à tous les éléments du formulaire. La valeur de l'attribut est un objet NodeList, qui représente les éléments d'étiquette liés au formulaire. élément.

<script type="text/javascript">
        window.onload = function () {
         var text = document.getElementById(&#39;text&#39;);
            var btn = document.getElementById(&#39;btn&#39;);
            var form = document.getElementById(&#39;form&#39;);
            btn.onclick = function() {
                if (text.value.trim() =="") {
                 //alert(text.labels.length)
                 if(text.labels.length==1) {
                  var label = document.createElement("label");
                  label.setAttribute("for","text");
                  form.insertBefore(label,btn);
                  text.labels[1].innerHTML = "请输入姓名";
                  text.labels[1].setAttribute(
               "style","font-size:9px;color:red");
                 }
                }
                else if(text.labels.length>1)
                 form.removeChild(text.labels[1]);
                }
        }
 </script>
    <form id="form"> 
     <label id="label" for="text">姓名：</label>
     <input id="text">
     <input id="btn" type="button" value="验证">
    </form>

Lorsque l'utilisateur ne saisit aucune valeur et clique sur Vérifier, un élément d'étiquette sera ajouté dynamiquement à côté de la zone de texte. L'élément d'étiquette est "Veuillez entrer. un nom"; Lorsque l'utilisateur entre quelque chose dans la zone de texte, l'étiquette avec le texte "Veuillez entrer votre nom" sera supprimée.

9. L'attribut de contrôle de l'étiquette

Vous pouvez placer un élément de formulaire à l'intérieur de l'étiquette et accéder à l'élément de formulaire via l'attribut de contrôle de l'étiquette.

<script type="text/javascript">
        function setValue() {
         console.log(1);
         var label =document.getElementById("label");
         var textbox = label.control;
         textbox.value = "231456"
        }
         </script>
             <form>
     <label id="label">
      邮编：
      <input id="txt_zip" maxlength="6">
      <small>请输入6位数字</small>
     </label>
     <input type="button" value="设置默认值" onclick="setValue()">
    </form>

Ouvrez la page dans le navigateur, cliquez sur le bouton « Définir la valeur par défaut » et 231456 s'affichera dans la zone de texte.

10. L'attribut d'espace réservé de la zone de texte

Saisissez les informations d'invite (gris) lorsque la zone de texte (texte ou zone de texte) est dans l'état sélectionné

<input type="text" palceholder="hahah">

11. Combinez l'attribut list de la zone de texte

avec le nouvel élément datalist dans h5 pour créer une boîte d'invite

text:<input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none";将datalist元素设置为不显示 -->
    <datalist id="greetings" style="display:none">
     <option value="你是人">你是人</option>
     <option value="你是猪">你是猪</option>
     <option value="你是狗">你是狗</option>
    </datalist>

Lorsque vous entrez « vous » dans la zone de texte, trois colonnes d'invites « Vous êtes un humain », « Vous êtes un cochon » et « Vous êtes un chien » apparaîtront ci-dessous. . S'il n'y a pas de mots-clés, aucune invite n'apparaîtra

12. L'attribut de saisie semi-automatique de la zone de texte

autocomplete a trois valeurs : "on", "off". , et "" (non spécifié). Si elle n'est pas spécifiée, la valeur par défaut du navigateur est utilisée. La méthode d'utilisation est la suivante

<input type="text" name="greeting" list="greetings" autocomplete="on">

Lorsque vous entrez quelque chose comme "Je suis un humain" dans la zone de texte et cliquez sur Soumettre, revenez à la page précédente et entrez " "Je" apparaîtra et vous demanderez "Je suis un être humain".

13. L'attribut pattern de la zone de texte

équivaut à utiliser directement l'expression régulière dans la partie html pour déterminer si la valeur l’entrée répond aux exigences.

Veuillez saisir le contenu : 5f8e73e983da88a4e1fe29bcfdda8e59

Ce code nécessite la saisie d'un chiffre trois majuscule lettres, si elles sont mal saisies, l'invite « Veuillez être cohérent avec ce qui a été demandé (Google) » apparaîtra.

14. L'attribut selectionDirection de la zone de texte

est destiné aux éléments de saisie text et textarea lorsque l'utilisateur sélectionne une partie du texte avec la souris dans ceux-ci. deux éléments, il peut être utilisé. Cet élément permet d'obtenir le sens de sélection.

<script type="text/javascript">
        function alertSelectionDirection() {
         var control = document.forms[0][&#39;text&#39;];
         var Direction = control.selectionDirection;
         alert(Direction);
        }
 </script>
 <form>
     <input type="text" name="text">
     <input type="button" value="惦记我" onclick="alertSelectionDirection()" >
        </form>

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

pour la case à cocher Dans le passé, il y avait n'étaient que des états sélectionnés et non sélectionnés. En HTML5, vous pouvez utiliser l'attribut indéterminé sur cet élément dans js pour indiquer l'état "non explicitement sélectionné" de la case à cocher.

  <script>
        var cb = document.getElementById("cb");
        //将indeterminate的属性设置为true
        cb.indeterminate = true;
        </script>
        <input type="checkbox" indeterminate id="cb">indeterminate属性测试

16. L'attribut hauteur du bouton de soumission de l'image et l'attribut largeur

• hauteur : Précisez la hauteur de l'image dans le bouton image

• width:指定图片按钮中图片的宽度；

<input type="image" src="img/2.png" width="23" height="23">

17. textarea元素的maxlength属性与wrap属性

• maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。

• wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。

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!