1. Introduction au formulaire
Form <form> est l'une des formes les plus interactives des pages Web. Il reçoit des données utilisateur via divers formulaires, y compris des cases de liste déroulante, des boutons radio, des cases à cocher et des zones de texte. Cet article présente principalement des propriétés et des méthodes couramment utilisées sous des formes.
JavaScript peut être très pratique pour faire fonctionner des formulaires, tels que l'obtention de données de formulaire pour une vérification efficace, l'attribution automatique des valeurs aux champs de formulaire, le traitement des événements de formulaire, etc.
À l'heure actuelle, chaque formulaire est analysé dans un objet, c'est-à-dire des objets de formulaire. Ces objets peuvent être référencés via la collection Document.Forms. Par exemple, une forme avec un attribut NAMA de Form1 peut être utilisée
Copiez le code comme suit: document.forms ["form1"]
Non seulement cela, vous pouvez également vous référer aux objets de formulaire via l'index du formulaire dans le document. Par exemple
Copiez le code comme suit: document.forms [1]
Représente le deuxième objet de forme dans le document de référence
Ce qui suit est un élément de formulaire qui contient plusieurs éléments de formulaire, chaque élément a une balise d'étiquette, liée à l'élément, de sorte qu'en cliquant sur le texte, vous pouvez le définir et le sélectionner dans la table, améliorant l'expérience utilisateur.
La copie de code est la suivante:
<form méthode = "post" name = "myform1" action = "addinfo.aspx">
<p> <étiquette pour = "name"> Veuillez saisir votre nom: </ label> <br> <entrée type = "text" name = "name" id = "name"> </p>
<p> <étiquette pour = "passwd"> Veuillez saisir votre mot de passe: </ label> <br> <entrée type = "mot de passe" name = "passwd" id = "passwd"> </p>
<p> <étiquette pour = "Color"> Veuillez sélectionner votre couleur préférée: </ label> <br>
<select name = "colore" id = "couleur">
<Option Value = "Red"> Red </opoption>
<Option Value = "Green"> Green </ Option>
<Option Value = "Blue"> Blue </ Option>
<Option Value = "Yellow"> Yellow </ Option>
<option value = "cyan"> Qing </ Option>
<option valeur = "violet"> violet </opoption>
</lect> </p>
<p> Veuillez sélectionner votre sexe: <br>
<input type = "radio" name = "sexe" id = "mâle" value = "mâle"> <étiquette pour = "mâle"> mâle </ labe> <br>
<input type = "radio" name = "sexe" id = "feme" value = "feme"> <label for = "feme"> femelle </ labe> </p>
<p> Qu'aimez-vous faire: <br>
<input type = "checkbox" name = "hobby" id = "book" value = "book"> <label for = "book"> Reading </ Label>
<input type = "checkbox" name = "hobby" id = "net" value = "net"> <étiquette pour = "net"> sur Internet </ labe>
<input type = "checkbox" name = "hobby" id = "sleep" value = "sleep"> <étiquette pour = "sleep"> sleep </ labe> </p>
<p> <étiquette pour = "commentaires"> Je veux laisser un message: </bablow> <br> <textarea name = "commentaires" id = "commentaires" cols = "30" rows = "4"> </ textarea> </p>
<p> <input type = "soumi" name = "btnsubmit" id = "btnsubmit" value = "soumi">
<input type = "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</ form>
Habituellement, chaque élément de formulaire doit avoir des attributs de nom et d'ID, le nom est utilisé pour remettre le serveur, et l'ID est utilisé pour la liaison et le filtrage des fonctions.
2. Éléments d'accès sous la forme
Les éléments du formulaire, que ce soit des zones de texte, des boutons radio, des boutons déroulants, des boîtes de liste déroulante ou d'autres contenus, sont inclus dans la collection d'éléments de la forme. Vous pouvez utiliser la position de l'élément dans la collection ou l'attribut de nom de l'élément pour obtenir une référence à l'élément.
La copie de code est la suivante:
var oform = document.forms ["form1"] // obtenez le formulaire
var etextform = oform.Elements [0]; // Obtenez le premier élément
var etextpasswd = oform.elements ["passwd"] // Obtenez l'élément avec l'attribut de nom Passwd
Citez la méthode la plus efficace et la plus intuitive:
Copiez le code comme suit: var ethtcomments = OForm.Elements.comments; // Obtenez l'élément avec les commentaires d'attribut de nom
3. Propriétés et méthodes publiques
Tous les éléments de la forme (sauf des éléments cachés) ont certaines propriétés et méthodes communes. Voici quelques listes couramment utilisées
La copie de code est la suivante:
var oform = document.forms ["form1"]; // Obtenez le formulaire
var ImageStComments = OForm.Elements.comments; // Obtenez l'élément avec les commentaires d'attribut de nom
alerte (Oform.Type); // Afficher le type d'élément
var etextpasswd = OForm.Elements ["passwd"]; // Obtenez l'élément avec l'attribut de nom Passwd
foxtpasswd.focus (); // se concentrer sur des éléments spécifiques
4. Soumission des formulaires
La soumission dans le formulaire est remplie via des boutons ou des images avec des fonctions de bouton
La copie de code est la suivante:
<input type = "soumi" name = "btnsubmit" id = "btnsubmit" value = "soumis">
<input type = "image" name = "picsUbmit" id = "picsSubmit" src = "soumid.jpg">
Lorsque l'utilisateur appuye sur Entrée ou clique sur l'un des boutons, le formulaire peut être soumis sans code supplémentaire. Vous pouvez utiliser l'attribut Action sous forme pour détecter s'il faut soumettre.
Copiez le code comme suit: <form metheth = "post" name = "form1" action = "javaScript: alert ('soumit')"> </ form>
Les utilisateurs peuvent cliquer à plusieurs reprises sur le bouton Soumettre pendant le processus de soumission car la vitesse du réseau est trop lente. Il s'agit d'un énorme fardeau sur le serveur et peut être interdit d'utiliser l'attribut désactivé. Par exemple:
Copiez le code comme suit: <entrée type = "bouton" value = "soumettre" />