Analyse des nouveaux attributs des formulaires en HTML5

Cet article présente principalement en détail les nouveaux attributs des formulaires HTML5 et joint des exemples d'analyse, simples et faciles à comprendre. Amis qui en ont besoin, jetons un oeil

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

En H5, vous pouvez mettre le formulaire n'importe où sur la page. , puis pour L'élément spécifie un attribut de formulaire, et la valeur de l'attribut est l'identifiant du formulaire, afin que l'élément puisse être déclaré comme appartenant au formulaire spécifié

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

2. Au sein du formulaire L'attribut formaction de l'élément

en H4, la méthode de soumission du formulaire

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

soumet 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. L'attribut formmethod de l'élément au sein du formulaire

Vous pouvez 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. L'attribut formenctype des éléments du formulaire

Comme ci-dessus, l'effet est sur chaque élément, le code est abrégé

5. L'attribut formtarget de la forme

Le même que ci-dessus, l'effet est sur chaque élément, le code est abrégé

L'attribut autofocus des éléments

Ajoutez l'attribut de mise au point automatique aux zones de texte, aux zones de sélection, aux commandes de boutons, etc., et ils obtiendront automatiquement le focus lorsque l'écran est ouvert.

<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

Entrez 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 des expressions régulières directement dans la partie html pour déterminer si la valeur saisie répond aux exigences.

Veuillez saisir le contenu : 5f8e73e983da88a4e1fe29bcfdda8e59

Ce code nécessite la saisie d'un chiffre trois majuscules 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 n'y en avait que sélection et état non sélectionné, en HTML5, vous pouvez utiliser l'attribut indéterminé sur cet élément en 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 de hauteur et l'attribut de largeur du bouton de soumission d'image

• hauteur : Spécifiez la hauteur de l'image dans le bouton image

• largeur : Spécifiez la largeur de l'image dans le bouton image

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

17. L'attribut maxlength et l'attribut wrap de l'élément textarea

• maxlength : défini avec une valeur entière, utilisé pour limiter la quantité de texte pouvant être saisie dans le numéro d'élément textarea.

• wrap : La valeur de l'attribut peut être spécifiée comme douce ou dure. Lorsque l'attribut est dur, le formulaire est soumis lorsque la touche Entrée n'est pas utilisée mais que le texte dépasse la plage spécifiée. une ligne et s'enroule automatiquement ajoutera un indicateur de nouvelle ligne à la nouvelle ligne.

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!