Utilisation de JavaScript et de formulaires

Javascript porte de nombreux chapeaux. Vous pouvez utiliser JavaScript pour créer des effets spéciaux. Vous pouvez utiliser JavaScript pour rendre vos pages HTML «plus intelligentes» en exploitant ses capacités de prise de décision. Et vous pouvez utiliser JavaScript pour améliorer les formulaires HTML. Cette dernière application revêt une importance particulière. De tous les chapeaux que JavaScript peut porter, ses fonctionnalités de traitement de forme sont parmi les plus recherchées et utilisées.

Rien ne fait plus peur au cœur d'un éditeur Web que ces trois lettres: CGI. CGI (qui signifie interface de passerelle commune) est un mécanisme permettant de transporter en toute sécurité des données d'un client (un navigateur) vers un serveur. Il est généralement utilisé pour transférer des données d'un formulaire HTML vers le serveur.

Avec JavaScript à vos côtés, vous pouvez traiter des formulaires simples sans appeler le serveur. Et lorsque la soumission du formulaire à un programme CGI est nécessaire, vous pouvez demander à JavaScript de prendre en charge toutes les exigences préliminaires, telles que la validation des entrées pour vous assurer que l'utilisateur a marqué chaque i. Dans cette colonne, nous examinerons de près la connexion au formulaire JavaScript, y compris comment utiliser l'objet de formulaire JavaScript, comment lire et définir le contenu du formulaire et comment déclencher des événements JavaScript en manipulant les contrôles de formulaire. Nous verrons également comment utiliser JavaScript pour vérifier l'entrée de formulaire et envoyer le formulaire à un programme CGI.

Apprendre JavaScript

Cet article fait partie de l'archive de contenu technique JavaWorld. Vous pouvez en apprendre beaucoup sur la programmation JavaScript en lisant les articles de la série JavaScript , gardez simplement à l'esprit que certaines informations sont probablement obsolètes. Voir «Utilisation des objets intégrés de JavaScript» et «Débogage de programmes JavaScript» pour plus d'informations sur la programmation avec JavaScript.

Créer le formulaire

Il existe peu de différences entre un formulaire HTML simple et un formulaire amélioré par JavaScript. Le principal étant qu'un formulaire JavaScript repose sur un ou plusieurs gestionnaires d'événements, tels que onClick ou onSubmit. Ceux-ci invoquent une action JavaScript lorsque l'utilisateur fait quelque chose dans le formulaire, comme cliquer sur un bouton. Les gestionnaires d'événements, qui sont placés avec le reste des attributs dans les balises de formulaire HTML, sont invisibles pour un navigateur qui ne prend pas en charge JavaScript. En raison de cette caractéristique, vous pouvez souvent utiliser un formulaire pour les navigateurs JavaScript et non JavaScript.

Les objets de contrôle de formulaire typiques - également appelés "widgets" - incluent les éléments suivants:

  • Zone de texte pour saisir une ligne de texte
  • Bouton poussoir pour sélectionner une action
  • Boutons radio pour faire une sélection parmi un groupe d'options
  • Cases à cocher pour sélectionner ou désélectionner une seule option indépendante

Je ne prendrai pas la peine d'énumérer tous les attributs de ces contrôles (widgets), et comment les utiliser en HTML. La plupart des références sur HTML vous fourniront les détails. Pour une utilisation avec JavaScript, vous devez toujours vous rappeler de fournir un nom pour le formulaire lui-même et chaque contrôle que vous utilisez. Les noms vous permettent de référencer l'objet dans votre page améliorée par JavaScript.

La forme typique ressemble à ceci. Remarquez que j'ai fourni les attributs NAME = pour tous les contrôles de formulaire, y compris le formulaire lui-même:

 Enter something in the box:

  • FORM NAME = "myform" définit et nomme le formulaire. Ailleurs dans le JavaScript, vous pouvez référencer ce formulaire par le nom myform . Le nom que vous donnez à votre formulaire dépend de vous, mais il doit être conforme aux règles de dénomination des variables / fonctions standard de JavaScript (pas d'espaces, pas de caractères étranges sauf le trait de soulignement, etc.).
  • ACTION = "" définit la manière dont vous souhaitez que le navigateur gère le formulaire lorsqu'il est soumis à un programme CGI exécuté sur le serveur. Comme cet exemple n'est pas conçu pour soumettre quoi que ce soit, l'URL du programme CGI est omise.
  • METHOD = "GET" définit la méthode que les données sont transmises au serveur lorsque le formulaire est soumis. Dans ce cas, l'atttibute est gonflé car l'exemple de formulaire ne soumet rien.
  • INPUT TYPE = "text" définit l'objet de la zone de texte. Il s'agit du balisage HTML standard.
  • INPUT TYPE = "button" définit l'objet bouton. Il s'agit du balisage HTML standard à l'exception du gestionnaire onClick.
  • onClick = "testResults (this.form)" est un gestionnaire d'événements - il gère un événement, dans ce cas en cliquant sur le bouton. Lorsque vous cliquez sur le bouton, JavaScript exécute l'expression entre guillemets. L'expression dit d'appeler la fonction testResults ailleurs sur la page et de lui passer l'objet de formulaire actuel.

Obtenir une valeur à partir d'un objet de formulaire

Essayons d'obtenir des valeurs à partir d'objets de formulaire. Chargez la page, puis tapez quelque chose dans la zone de texte. Cliquez sur le bouton et ce que vous avez saisi s'affiche dans la boîte d'alerte.

Liste 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Voici comment fonctionne le script. JavaScript appelle la fonction testResults lorsque vous cliquez sur le bouton dans le formulaire. La fonction testResults reçoit l'objet de formulaire à l'aide de la syntaxe this.form (le mot clé this fait référence au contrôle de bouton; le formulaire est une propriété du contrôle de bouton et représente l'objet de formulaire). J'ai donné l'objet sous forme le nom formulaire dans la fonction TestResult, mais vous pouvez tout vous nommer comme.

La fonction testResults est simple - elle copie simplement le contenu de la zone de texte dans une variable nommée TestVar. Notez comment le contenu de la zone de texte a été référencé. J'ai défini l'objet de formulaire que je voulais utiliser (appelé formulaire ), l'objet dans le formulaire que je voulais (appelé inputbox ) et la propriété de cet objet que je voulais (la propriété value ).

En savoir plus sur JavaWorld

Vous voulez plus de tutoriels et d'actualités sur la programmation? Recevez la newsletter JavaWorld Enterprise Java dans votre boîte de réception.

Définition d'une valeur dans un objet de formulaire

La propriété value de la zone d'entrée, illustrée dans l'exemple ci-dessus, est à la fois lisible et inscriptible. Autrement dit, vous pouvez lire tout ce qui est tapé dans la boîte et vous pouvez y réécrire des données. Le processus de définition de la valeur dans un objet de formulaire est juste l'inverse de sa lecture. Voici un court exemple pour illustrer la définition d'une valeur dans une zone de texte de formulaire. Le processus est similaire à l'exemple précédent, sauf que cette fois, il y a deux boutons. Cliquez sur le bouton "Lire" et le script lit ce que vous avez tapé dans la zone de texte. Cliquez sur le bouton "Ecrire" et le script écrit une phrase particulièrement sinistre dans la zone de texte.

Liste 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Lorsque vous cliquez sur le bouton "Lire", JavaScript appelle la fonction readText, qui lit et affiche la valeur que vous avez entrée dans la zone de texte.
  • Lorsque vous cliquez sur le bouton "Ecrire", JavaScript appelle la fonction writeText, qui écrit "Passez une bonne journée!" dans la zone de texte.

Lire d'autres valeurs d'objet de formulaire

La zone de texte est peut-être l'objet de formulaire le plus courant que vous lirez (ou écrivez) à l'aide de JavaScript. Cependant, vous pouvez utiliser JavaScript pour lire et écrire des valeurs à partir de la plupart des autres objets (notez que JavaScript ne peut actuellement pas être utilisé pour lire ou écrire des données à l'aide de la zone de texte du mot de passe). En plus des zones de texte, JavaScript peut être utilisé avec:

  • Zone de texte masquée (TYPE = "hidden").
  • Bouton radio (TYPE = "radio")
  • Case à cocher (TYPE = "checkbox")
  • Zone de texte ()
  • Listes ()

Utilisation des zones de texte masquées

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Les zones de texte sont utilisées pour la saisie de texte sur plusieurs lignes. La taille par défaut de la zone de texte est de 1 ligne par 20 caractères. Vous pouvez modifier la taille à l'aide des attributs COLS et ROWS. Voici un exemple typique de zone de texte avec une zone de texte de 40 caractères de large sur 7 lignes:

Vous pouvez utiliser JavaScript pour lire le contenu de la zone de texte. Cela se fait avec la propriété value. Voici un exemple: