Analyse neuer Attribute von Formularen in HTML5

In diesem Artikel werden hauptsächlich die neuen Attribute von HTML5-Formularen ausführlich vorgestellt und eine Beispielanalyse beigefügt, die einfach und leicht verständlich ist. Freunde, die es brauchen, werfen wir einen Blick darauf

1 Das Formularattribut des Elements im Formular

In H5 können Sie das Formular an einer beliebigen Stelle auf der Seite platzieren und dann for Das Element gibt ein Formularattribut an, und der Attributwert ist die ID des Formulars, sodass das Element als zum angegebenen Formular gehörend deklariert werden kann

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

2. Innerhalb des Formulars Das Formaction-Attribut des Elements

in H4, die Formularübermittlungsmethode

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

sendet das gesamte Formular

in H5 können Sie die übermittelte JSP-Seite zu jedem Attribut des Formulars hinzufügen

<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. Das formmethod-Attribut des Elements innerhalb des Formulars

Sie können die Übermittlungsmethode für jedes Element des Formulars angeben

<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. Das formenctype-Attribut der Elemente im Formular

Das Gleiche wie oben, es funktioniert mit jedem Element, der Code ist abgekürzt

5. Das formtarget-Attribut von das Formular

Dasselbe wie oben, es funktioniert mit jedem Element, der Code ist abgekürzt

6. Das Autofokus-Attribut von Elementen

Fügen Sie das Autofokus-Attribut zu Textfeldern, Auswahlfeldern, Schaltflächensteuerungen usw. hinzu, damit diese automatisch den Fokus erhalten, wenn der Bildschirm geöffnet wird.

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

Nur ​​ein Steuerelement auf einer Seite kann das Autofokus-Attribut haben und kann nicht missbraucht werden

7 erforderliches Attribut

kann in den meisten Eingabeelementen verwendet werden. Wenn der Eingabewert leer ist, ist die Übermittlung nicht zulässig. Der Browser zeigt Textinformationen an, um den Benutzer zur Eingabe von Inhalten aufzufordern.

8. Labels-Attribut

kann allen Elementen des Formulars ein Label-Attribut hinzufügen. Der Attributwert ist ein NodeList-Objekt, das die an das Label gebundenen Elemente darstellt Element. Sammlung.

<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>

Wenn der Benutzer keinen Wert eingibt und auf „Überprüfen“ klickt, wird dynamisch ein Beschriftungselement neben dem Textfeld hinzugefügt. Das Beschriftungselement lautet „Bitte eingeben“. einen Namen“; Wenn der Benutzer etwas in das Textfeld eingibt, wird die Beschriftung mit dem Text „Bitte geben Sie Ihren Namen ein“ gelöscht.

9. Das Steuerattribut des Etiketts

Sie können ein Formularelement innerhalb des Etiketts platzieren und über das Steuerattribut des Etiketts auf das Formularelement zugreifen.

<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>

Öffnen Sie die Seite im Browser, klicken Sie auf die Schaltfläche „Standardwert festlegen“ und 231456 wird im Textfeld angezeigt.

10. Das Platzhalterattribut des Textfelds

Geben Sie Eingabeaufforderungsinformationen (grau) ein, wenn sich das Textfeld (Text oder Textbereich) im ausgewählten Zustand befindet

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

11. Kombinieren Sie das Listenattribut des Textfelds

mit dem neuen Datenlistenelement in h5, um ein Eingabeaufforderungsfeld zu erstellen

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>

Wenn Sie „Sie“ in das Textfeld eingeben, werden unten drei Spalten mit den Eingabeaufforderungen „Sie sind ein Mensch“, „Sie sind ein Schwein“ und „Sie sind ein Hund“ angezeigt . Wenn keine Schlüsselwörter vorhanden sind, wird keine Eingabeaufforderung angezeigt

12. Das Autocomplete-Attribut des Textfelds

autocomplete hat drei Werte: „on“, „off“ und „“ (nicht angegeben). Wenn nicht angegeben, wird der Standardwert des Browsers verwendet. Die Verwendungsmethode ist wie folgt

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

Wenn Sie etwas wie „Ich bin ein Mensch“ in das Textfeld eingeben und auf „Senden“ klicken, kehren Sie zur vorherigen Seite zurück und Geben Sie „Ich“ ein und die Meldung „Ich bin ein Mensch“ wird angezeigt.

13. Das Musterattribut des Textfelds

entspricht der Verwendung regulärer Ausdrücke direkt im HTML-Teil, um zu bestimmen, ob die Werteingabe den Anforderungen entspricht.

Bitte geben Sie den Inhalt ein: 5f8e73e983da88a4e1fe29bcfdda8e59

Dieser Code erfordert die Eingabe eines Großbuchstabens mit der Zahl drei Wenn die Buchstaben falsch eingegeben werden, erscheint die Meldung „Bitte stimmen Sie mit den Anforderungen überein (Google)“.

14. Das Attribut „selectionDirection“ des Textfelds

gilt für die Text- und Textbereichselemente der Eingabe, wenn der Benutzer einen Teil des Textes mit der Maus auswählt Zwei Elemente können verwendet werden, um die Auswahlrichtung zu ermitteln.

<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. Das unbestimmte Attribut des Kontrollkästchens

Für das Kontrollkästchen galt in der Vergangenheit nur das Auswahl und nicht ausgewählter Status: In HTML5 können Sie das unbestimmte Attribut für dieses Element in js verwenden, um den Status „nicht explizit ausgewählt“ des Kontrollkästchens anzugeben.

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

16. Das Höhenattribut und das Breitenattribut der Bild-Senden-Schaltfläche

• Höhe : Geben Sie die Höhe des Bildes in der Bildschaltfläche an;

• Breite: Geben Sie die Breite des Bildes in der Bildschaltfläche an; 🎜>

17. Das Maxlength-Attribut und das Wrap-Attribut des Textarea-Elements

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

maxlength: werden mit einem ganzzahligen Wert festgelegt und verwendet um die Textmenge zu begrenzen, die in die Textbereichselementnummer eingegeben werden kann.

• wrap: Der Attributwert kann als weich oder hart angegeben werden. Wenn das Attribut hart ist, wird das Formular gesendet, wenn die Eingabetaste nicht verwendet wird, der Text jedoch den angegebenen Bereich überschreitet eine Zeile und fügt automatisch ein Newline-Flag an der Newline hinzu.

Das obige ist der detaillierte Inhalt vonAnalyse neuer Attribute von Formularen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!