Cet article vous montre les exemples du contrôle du formulaire JS pour votre référence. Le contenu spécifique est le suivant
Exemple 1: itéré à travers tous les contrôles de la forme
<script type = "text / javascript"> // transf la fonction de formulaire getValues () {var f = document.forms [0]; // Obtenir des éléments de formulaire var = F.Elements; // obtient tout le tableau de contrôle var str = ''; // Split String // Loop Traversal pour (var i = 0; i <elements.length; i ++) {var e = elements [i]; // Contrôle de courant Str + = E.Value; // Valeur de contrôle divisée str + = '/ n'; // séparateur divisé} alerte (str); // Affichez le résultat avec une boîte d'invite} </ script> <form> zone de texte: <input type = "text" name = "mytex SELECT == </ Option> <Option Value = "1"> 1 </ Option> <Option Value = "2"> 2 </ Option> </ SELECT> <br/> <entrée type = "Button" Value = "GetValues ()" /> </ Form>Exemple 2: Accès à un contrôle spécifique via le nom de contrôle
<script type = "text / javascript"> // accéder à un contrôle spécifique via la fonction de nom de contrôle getFormDom () {var f = document.forms [0]; // Get Form Dom var MyText = F.MyText; // Get Control Dom par nom // Invite le nom de contrôle et la valeur alerte (mytext.name + ":" + mytext.value); } </ script> <form> Boîte de texte: <input type = "text" name = "mytexExemple 3: Obtenez le nombre de zones de texte dans le formulaire
<script type = "text / javascript"> // Obtenez le nombre de zones de texte dans la fonction de formulaire getInputCount () {var f = document.forms [0]; // Obtenez les éléments de formulaire DOM VAR = F.Elements; // obtient tout le nombre de Var Count = 0; // stat le nombre total // Traversal de boucle pour (var i = 0; i <elements.length; i ++) {// le contrôle actuel var e = éléments [i]; // est-ce une zone de texte if (e.tagname == 'input' && e.type == 'text') {count ++; // Le nombre total est ajouté en soi}} // Utiliser la boîte d'invite pour afficher l'alerte de résultat ("La zone de texte a un total de:" + Count + "S"); } </ script>Exemple 4: Méthode de soumission pour modifier le formulaire
L'attribut de méthode spécifie la méthode HTTP (get ou post) utilisée lors de la soumission d'un formulaire. Lorsque vous utilisez GET, les données du formulaire sont visibles dans la barre d'adresse de la page et le message est plus sécurisé car les données soumises dans la barre d'adresse de la page sont invisibles.
<script type = "text / javascript"> // modifie la fonction de méthode de soumission de formulaire modifiedMethod () {var f = document.forms [0]; // Obtenez la méthode Form Dom var = F.MyMethod.Value; // Méthode sélectionnée F.Method = Méthode; // Modifiez la méthode de soumission sélectionnée // Utilisez la zone d'invite pour afficher l'alerte de résultat ("La méthode de soumission actuelle du formulaire:" + méthode); } comment </ form>Exemple 5: Spécifiez dynamiquement les attributs d'action du formulaire
L'attribut d'action définit l'action effectuée lorsque le formulaire est soumis.
Il est courant de soumettre des formulaires à un serveur pour utiliser le bouton Soumettre.
En règle générale, les formulaires sont soumis aux pages Web sur le serveur Web.
Si l'attribut d'action est omis, l'action sera définie sur la page actuelle.
<script type = "text / javascript"> // spécifie dynamiquement l'attribut d'action de la fonction de formulaire modifyAction () {var f = document.forms [0]; // Obtenez le formulaire DOM var newUrl = f.newurl.value; // Méthode sélectionnée f.action = newUrl; // Modifiez l'adresse d'action du formulaire soumis // Utilisez la zone d'invite pour afficher l'alerte de résultat ("L'action actuelle du formulaire:" + f.action); } </ script> <formulaire méthode = "post"> Veuillez sélectionner la méthode de soumission: <input type = "text" name = "newUrl" /> <br/> <input type = "Button" value = "Modify Soumider Action" onClick = "modifyAction ()" /> </ form>Exemple 6: Contrôle de focus sélectif dynamique
<script type = "text / javascript"> // La première zone de radio est la fonction focus focusit () {var f = document.forms [0]; // Obtenez le formulaire DOM var myradio = f.myradio; // Obtenez Radio Box Myradio [0] .focus (); // La première zone de radio obtient une mise au point} </ script> <form> Text Box: <input type = "text" name = "mytex == </ option> <option value = "1"> 1 </ option> <option value = "2"> 2 </ option> </lect> <br/> <input type = "Button" value = "La première zone de radio est le focus" onClick = "focusit ()" /> </orm>Exemple 7: Initialisez les valeurs de tous les contrôles sous la forme à l'état initial
<script type = "text / javascript"> // initialisez les valeurs de tous les contrôles dans la forme à la fonction d'état initial init () {var f = document.forms [0]; // obtient le formulaire dom f.reset (); // Utilisez la fonction reset ()} </cript>Exemple 8: Lot Ajouter une explication à tous les contrôles de formulaire
<script type = "text / javascript"> // lot une description de tous les contrôles de formulaire batchcomment () {var f = document.forms [0]; // Obtenir des enfants de Dom var = F.ChildNodes; // Obtenez tous les éléments enfants de la forme var newarr = []; // définir le nouveau tableau des éléments var j = 0; // Définissez l'indice pour un nouveau tableau d'éléments // boucle via des éléments enfants pour (var i = 0; i <enfants.length; i ++) {var e = enfants [i]; // élément enfant actuel newarr [j ++] = e; // Ajouter au nouveau tableau // Déterminez s'il s'agit d'un contrôle if (e.tagname == 'input' || e.tagname == 'select') {// Ajouter un nœud avec du texte description var text = document.createExtNode ("cet élément est requis"); newarr [j ++] = texte; // Ajouter des nœuds pour le nouveau tableau}} // effacer le contenu de formulaire existant f.innerhtml = ''; // Description du lot pour (var i = 0; i <newarr.length; i ++) {// ajouter des éléments anciens et des nœuds de description dans la forme f.appendChild (newarr [i]); }}} </ script>Exemple 9: Utilisez des contrôles cachés pour ajouter des paramètres au formulaire
<Script Type = "Text / JavaScript"> // Fonction Fonction ShowParams () {// Définissez la valeur de la variable cachée. Cette valeur peut également être spécifiée via la valeur de la valeur de la balise Document.Forms [0] .myHidden.value = 'Je suis caché'; // Définir la variable d'épissage des caractères var str = 'Les paramètres soumis par le formulaire incluent:'; // Paramètre de division de l'année Str + = '/ N Année:' + Document.Forms [0] .myyear.Value; // Paramètre Nom Split Str + = '/ n Nom:' + document.forms [0] .myname.value; // Paramètre caché Split Str + = '/ nHide Variable:' + document.forms [0] .myHidden.Value; alerte (str); // Affichez la valeur du caractère} </ script> <form> <entrée type = "HIDDEN" name = "MyHidden" /> Année: <Select Name = "Myyear"> <Option Value = "2012"> 2012 </ Option> <Option Value = "2013"> 2013 </ Option> <Option Value = "2014"> 2014 </popoption> </lect> <br/> <br/> NAME: <PORT TYPE = " name = "myname" /> <br/> <br/> <input type = "Button" value = "soumi" onclick = "showParams ();" /> </ form>Exemple 10: cochez toutes les cases
<script type = "text / javascript"> // coche toutes les fonctions CheckAll (c) {// obtenez toutes les cases var ar arr = document.getElementsByName ('myName'); if (c) {// sélectionnez toutes les cases de cocher pour (var i = 0; i <arr.length; i ++) {arr [i] .checked = true; // select}} else {// sinon, ne sélectionnez pas tout // transférer toutes les cases pour (var i i = 0; i <arr.length; i ++) {arr [i]. Vos intérêts: <br> <input type = "checkbox" name = "myall" onclick = "checkall (this.checked)" /> sélectionnez all <br> <input type = "checkbox" name = "myname" /> Sélectionnez tout <entrée type = "checkbox" name = "MyName" /> SELECT TOUT <entrée type = "Checkbox" name = "MyName" />Exemple 11: définissez des styles accrocheurs pour les commandes de mise au point du formulaire
<script type = "text / javascript"> function init () {var f = document.forms [0]; // Obtenir des éléments de formulaire var = F.Elements; // obtient tous les tableaux de contrôle var str = ''; // chaînes divisées // Transfert de boucle pour (var i = 0; i <elements.length; i ++) {var e = elements [i]; // Contrôle actuel e.onfocus = function () {// Définissez le rappel de style pour focus // Modifiez la bordure en rouge this.style.border = '1px solide rouge'; } e.onblur = function () {// Appelant la focalisation this.style.border = ''; // Restaurez le style de bordure d'origine}}}} </dcript>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.