Comprendre les bases de JavaScript Forms_Javascript Tips

HTMLFormElement hérite de HTMLElement, et ses propriétés et méthodes uniques sont :

• acceptCharset : Le jeu de caractères que le serveur peut gérer, équivalent à la fonctionnalité accept-charset du HTML
• action : L'URL pour recevoir la requête, qui est équivalente à la fonctionnalité d'action en HTML.
• éléments : une collection de tous les contrôles du formulaire (HTMLCollection)
• enctype : type d'encodage demandé
• longueur : le nombre de contrôles dans le formulaire
• méthode : Le type de requête HTTP à envoyer, généralement obtenir ou publier
• nom : le nom du formulaire
• reset() : Réinitialise tous les champs du formulaire aux valeurs par défaut
• submit() : Soumettre le formulaire
• cible : nom de la fenêtre utilisée pour envoyer des requêtes et recevoir des réponses
  

Obtenir la référence de l'élément de formulaire peut être getElementById, ou il peut s'agir de l'index numérique ou de la valeur du nom dans document.forms

1. Soumettez le formulaire

Il existe trois types de boutons pour soumettre des formulaires :

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

La soumission du formulaire dans la méthode ci-dessus déclenchera l'événement de soumission avant que la demande du navigateur ne soit envoyée au serveur, afin que les données du formulaire puissent être vérifiées et que le formulaire soumis puisse être déterminé. Par exemple, le code suivant peut empêcher le formulaire. formulaire d'être soumis :

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

De plus, vous pouvez également soumettre le formulaire en appelant la méthode submit() via un script js. L'appel de submit() pour soumettre le formulaire ne déclenchera pas l'événement de soumission.

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

S'il n'y a pas de réponse pendant une longue période après avoir soumis le formulaire pour la première fois, les utilisateurs deviendront impatients et cliqueront souvent plusieurs fois sur le bouton Soumettre, ce qui entraînera la soumission répétée du formulaire. Par conséquent, le bouton Soumettre doit être désactivé. ou utilisez onsubmit après avoir soumis le formulaire pour la première fois. L'événement empêche les actions ultérieures.

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

2. Réinitialiser le formulaire

Le formulaire de réinitialisation doit utiliser une saisie ou un bouton :

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

Lorsque l'utilisateur clique sur le bouton de réinitialisation pour réinitialiser le formulaire, l'événement de réinitialisation sera déclenché et l'opération de réinitialisation pourra être annulée si nécessaire : ​​

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

De plus, vous pouvez également réinitialiser le formulaire en appelant la méthode reset() via un script js. Lorsque la méthode reset() est appelée pour réinitialiser le formulaire, l'événement reset sera déclenché.

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

3. Champs du formulaire

Chaque formulaire possède un attribut d'éléments, qui est une collection de tous les formulaires (champs) du formulaire :

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

Si plusieurs contrôles de formulaire utilisent un seul nom (bouton radio), une NodeList nommée d'après ce nom sera renvoyée :

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

les noms sont tous en couleur. Lors de l'accès aux éléments["color"], NodeList est renvoyé :

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

Attributs courants des champs de formulaire

• disabled : valeur booléenne, indiquant si le champ actuel est désactivé
• formulaire : pointeur vers le formulaire auquel appartient le champ courant : lecture seule ;
• nom : le nom du champ actuel
• readOnly : valeur booléenne, indiquant si le champ actuel est en lecture seule ;
• tabIndex : indique le numéro de commutation (onglet) du champ actuel
• type : le type du champ actuel
• value : La valeur du champ actuel soumis au serveur. Pour les champs de fichiers, cet attribut est en lecture seule et contient le chemin du fichier sur l'ordinateur
  ;

Le bouton de soumission peut être désactivé après la soumission du formulaire via l'événement submit, mais l'événement onclick ne peut pas être utilisé car il existe un "décalage horaire" dans onclick dans différents navigateurs

Méthodes de champs de formulaire partagés

• focus() : active le champ pour qu'il puisse répondre aux événements du clavier ;
• blur() : perd la concentration et se déclenche rarement ;
  

Vous pouvez ajouter la méthode focus() sur l'événement load de la page d'écoute :

window.addEventListener("load", function () {
  document.forms["myForm"].elements["lastName"].focus();
});

需要注意，第一个表单字段是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;
  }
}

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