Detaillierte Einführung in die neuen Attribute von HTML5-Formularen

In diesem Artikel wird hauptsächlich das neue Attribut im HTML5-Format ausführlich vorgestellt und eine Beispielanalyse beigefügt, die einfach und leicht verständlich ist. Freunde, die es brauchen, schauen wir uns

1 an Suchen Sie irgendwo in H5 auf der Seite und geben Sie dann ein Formularattribut für das Element an. Der Attributwert ist die ID des Formulars, sodass Sie deklarieren können, dass das Element dem angegebenen Formular

2. Das Formaktionsattribut von Elementen innerhalb des Formulars

In H4 die Formularübermittlungsmethode

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

Gesamtes Formular einreichen

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

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

3. Formmethode von Elementen innerhalb des Formulars Attribute

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

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

4. formenctype-Attribut von Elementen im Formular

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

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

5. Das formtarget-Attribut des Formular

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

6. Das Autofokus-Attribut des Elements

wird dem Textfeld, dem Auswahlfeld und der

Schaltfläche

Steuerung usw. hinzugefügt. Autofokus-Attribut, wenn der Bildschirm geöffnet wird, erhält er automatisch den Fokus.

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

7 erforderliches Attribut

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

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.

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

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

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

Ö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

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

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

11. Kombinieren Sie das Listenattribut des Textfelds

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

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

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

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>

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

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

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

entspricht der direkten Verwendung des

regulären Ausdrucks

im HTML-Teil, um zu bestimmen, ob der Wert Die Eingabe entspricht den Anforderungen. 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.

15.

Das unbestimmte Attribut des Kontrollkästchens

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

für Kontrollkästchen In der Vergangenheit dort 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 anzuzeigen.

16. Das Attribut

Höhe
der Schaltfläche zum Senden des Bildes und das Attribut

Breite

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

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

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

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

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

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

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die neuen Attribute von HTML5-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!