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 ;
  

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

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

window.addEventListener("load", function () {
  var form = document.forms["myForm"];
  if (form["lastName"].autofocus !== true) {
    form["lastName"].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;
  }
}