Verstehen der Grundlagen von JavaScript-Formularen_Javascript-Tipps

HTMLFormElement erbt HTMLElement und seine einzigartigen Eigenschaften und Methoden sind:

• acceptCharset: Der Zeichensatz, den der Server verarbeiten kann, entspricht der Accept-Charset-Funktion von HTML
• Aktion: Die URL zum Empfangen der Anfrage, was der Aktionsfunktion in HTML entspricht.
• Elemente: eine Sammlung aller Steuerelemente im Formular (HTMLCollection)
• enctype: angeforderter Kodierungstyp
• Länge: die Anzahl der Steuerelemente im Formular
• Methode: Der Typ der zu sendenden HTTP-Anfrage, normalerweise get oder post
• Name: der Name des Formulars
• reset(): Setzt alle Formularfelder auf Standardwerte zurück
• submit(): Senden Sie das Formular ab
• Ziel: Fenstername, der zum Senden von Anfragen und Empfangen von Antworten verwendet wird
  

Die Referenz des Formularelements kann getElementById oder der numerische Index oder Namenswert in document.forms sein

1. Senden Sie das Formular ab

Es gibt drei Arten von Schaltflächen zum Absenden von Formularen:

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

Durch das Senden des Formulars mit der oben genannten Methode wird das Übermittlungsereignis ausgelöst, bevor die Browseranforderung an den Server gesendet wird, sodass die Formulardaten überprüft und das übermittelte Formular ermittelt werden kann Formular abschicken:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

Darüber hinaus können Sie das Formular auch senden, indem Sie die Methode „submit()“ über ein JS-Skript aufrufen. Durch den Aufruf von „submit()“ zum Senden des Formulars wird das Submit-Ereignis nicht ausgelöst.

var form = document.getElementById("myForm");
form.submit();

Wenn nach dem ersten Absenden des Formulars längere Zeit keine Antwort erfolgt, werden Benutzer ungeduldig und klicken häufig mehrmals auf die Schaltfläche „Senden“, was dazu führt, dass das Formular wiederholt gesendet wird. Daher sollte die Schaltfläche „Senden“ deaktiviert werden oder verwenden Sie onsubmit nach dem ersten Absenden des Formulars. Das Ereignis verhindert nachfolgende Aktionen.

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

2. Formular zurücksetzen

Formular zurücksetzen sollte Eingabe oder Schaltfläche verwenden:

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

Wenn der Benutzer auf die Schaltfläche „Zurücksetzen“ klickt, um das Formular zurückzusetzen, wird das Rücksetzereignis ausgelöst und der Rücksetzvorgang kann bei Bedarf abgebrochen werden: ​​

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

Darüber hinaus können Sie das Formular auch zurücksetzen, indem Sie die Methode reset() über ein JS-Skript aufrufen. Wenn die Methode reset() zum Zurücksetzen des Formulars aufgerufen wird, wird das Reset-Ereignis ausgelöst.

var form = document.getElementById("myForm");
form.reset();

3. Formularfelder

Jedes Formular verfügt über ein Elementattribut, das eine Sammlung aller Formulare (Felder) im Formular ist:

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

Wenn mehrere Formularsteuerelemente einen Namen verwenden (Optionsfeld), wird eine nach diesem Namen benannte NodeList zurückgegeben:

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

Namen sind alle farbig. Beim Zugriff auf Elemente["Farbe"] wird NodeList zurückgegeben:

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

Allgemeine Formularfeldattribute

• deaktiviert: Boolescher Wert, der angibt, ob das aktuelle Feld deaktiviert ist; Formular: Zeiger auf das Formular, zu dem das aktuelle Feld gehört: schreibgeschützt;
• Name: der Name des aktuellen Feldes
• readOnly: Boolescher Wert, der angibt, ob das aktuelle Feld schreibgeschützt ist; tabIndex: gibt die Schaltnummer (Tab) des aktuellen Feldes an;
• Typ: der Typ des aktuellen Feldes;
• Wert: Der Wert des aktuellen Feldes, das an den Server übermittelt wird. Bei Dateifeldern ist dieses Attribut schreibgeschützt und enthält den Pfad der Datei auf dem Computer;
• Die Schaltfläche „Senden“ kann nach dem Absenden des Formulars über das Submit-Ereignis deaktiviert werden, das Onclick-Ereignis kann jedoch nicht verwendet werden, da es bei Onclick in verschiedenen Browsern einen „Zeitunterschied“ gibt Methoden für freigegebene Formularfelder
• focus():
  
aktiviert das Feld, damit es auf Tastaturereignisse reagieren kann;

blur():

verliert den Fokus und wird selten verwendet;

• Sie können die Methode focus() zum Ladeereignis der Listening-Seite hinzufügen:

  需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

  在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

  autofocus
  如：

  <input type="text" name="lastName" autofocus>
  

  或者检测是否设置了该属性，没有的话再调用focus()方法：

  window.addEventListener("load", function () {
    var form = document.forms["myForm"];
    if (form["lastName"].autofocus !== true) {
      form["lastName"].focus();
    };
  });
  

  共有的表单字段事件

  除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

  blur： 当前字段失去焦点时触发；
  change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
  focus：当前字段获得焦点时触发；
  如：
  

  var form = document.forms["myForm"];
  var firstName = form.elements["firstName"];
  
  firstName.addEventListener("focus", handler);
  firstName.addEventListener("blur", handler);
  firstName.addEventListener("change", handler);
  
  function handler() {
    switch (event.type) {
      case "focus":
        if (firstName.style.backgroundColor !== "red") {
          firstName.style.backgroundColor = "yellow";
  
        };
        break;
      case "blur":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
      case "change":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
    }
  }
  

  以上就是本文的全部内容，希望对大家的学习有所帮助。