Concepts de base des formulaires

Prenons l'exemple suivant d'un formulaire de recherche de livre, d'abord affiché en HTML, puis tel qu'il apparaît dans un navigateur.

<html>
     <body>
       <form action="http://www.books.com/search.asp" method="get">
         Author:
         <input type="text" name="book_author">
         <p>
         Title:
         <input type="text" name="book_title">
         <p>
         Language:
         <select name="book_language">
         <option value="lang_0" selected>English</option>
         <option value="lang_1">French</option>
         <option value="lang_2">German</option>
         <option value="lang_3">Spanish</option>
         </select>
         <p>
         Format:
         <input type="checkbox" name="book_format" value="format_pb">Paperback
         <input type="checkbox" name="book_format" value="format_hc">Hardcover
         <input type="checkbox" name="book_format" value="format_ab">Audiobook
         <p>
         Reader Age:
         <input type="radio" name="reader_age" value="age_inf">Infant
         <input type="radio" name="reader_age" value="age_teen">Teenager
         <input type="radio" name="reader_age" value="age_adult" checked>Adult
         <p>
         <input type="submit" value="Search">
       </form>
     </body>
   </html>

Formulaire de recherche de livre dans un navigateur

Un formulaire contient un certain nombre de champs. Par exemple, la première balise <input> dans le formulaire d'exemple définit un champ nommé « book_author ». Notez que le nom d'un champ est généralement différent de ce que l'utilisateur voit dans un navigateur. Par exemple, le champ « book_author » s'appellera « Auteur » dans le navigateur, et non pas « book_author ».

Un champ peut être défini par plusieurs balises. Par exemple, le champ « book_format » est défini par trois balises <input> dans l'exemple de formulaire. Les balises qui utilisent le même nom de champ et ont le même type de champ (champ de texte, case d'option, case à cocher, etc.) définissent le même champ.

Un champ peut se voir attribuer une ou plusieurs valeurs. Par exemple, le champ « book_format » peut se voir attribuer la valeur « format_pb » pour sélectionner le format Livre de poche. Notez que, comme le nom du champ, la valeur attribuée à un champ est généralement différente de ce que l'utilisateur voit dans un navigateur. Par exemple, l'utilisateur voit le texte « Livre de poche » et non pas la valeur « format_pb » lorsqu'il choisit le format Livre de poche. Selon le type de champ, certains champs peuvent se voir attribuer plusieurs valeurs en même temps. Par exemple, comme le champ « book_format » est une case à cocher, nous pourrions attribuer la valeur « format_pb » et la valeur « format_hc » au champ « book_format » pour sélectionner à la fois le format Livre de poche et le format Relié.

La plupart des champs ont une valeur par défaut. La valeur par défaut est celle qui est initialement attribuée au champ dans le formulaire. Par exemple, le champ « book_language » a la valeur par défaut « lang_0 » en raison de l'attribut « selected ».

Un formulaire est soumis en envoyant les valeurs actuelles des champs au site web. Seuls les champs qui ont une ou plusieurs valeurs actuelles sont envoyés. Par exemple, si aucune des cases à cocher du champ « book_format » dans l'exemple de formulaire n'est cochée, aucune valeur n'est envoyée pour ce champ.

Dans un navigateur, la soumission d'un formulaire se fait généralement lorsque l'utilisateur clique sur un bouton d'envoi. Il existe deux types de boutons d'envoi : les boutons d'envoi normaux et les boutons d'envoi d'image. Les boutons d'envoi normaux sont définis en utilisant une balise <button>ou une balise <input>, dans les deux cas avec l'attribut « type » défini sur « submit ». Si un bouton d'envoi normal a un nom de champ et une valeur, ce champ est envoyé avec la valeur spécifiée lorsque l'on clique sur le bouton.

Les boutons d'envoi d'image sont définis en utilisant une balise <input> avec l'attribut « type » défini sur « image ». Un bouton d'envoi d'image définit deux champs nommés « button name.x » et « button name.y », où le nom du bouton est le nom contenu dans l'attribut « name » de la balise <input>. Si la balise <input> n'a pas d'attribut « name », les champs sont nommés « x » et « y ». Lorsqu'on clique sur un bouton d'envoi d'image, ces deux champs se voient attribuer les coordonnées x et y de la position dans l'image où la souris a été cliquée. Certains sites web l'utilisent pour créer des cartes d'image avec un comportement différent selon l'endroit où l'utilisateur clique.

Certains formulaires utilisent JavaScript. Par exemple, la balise <form> peut avoir un attribut « onsubmit » qui contient du code JavaScript à exécuter avant que le formulaire ne soit envoyé. De même, une balise <input> peut avoir un attribut « onclick » qui contient du code JavaScript à exécuter lorsque l'utilisateur clique sur le champ. Le robot exécute automatiquement ce code JavaScript.

Pour des raisons de performance, vous pouvez décider d'ignorer l'exécution JavaScript lors de l'envoi du formulaire. Pour ce faire, vous devez désactiver l'option « Exécuter JavaScript » dans les options de l'étape d'envoi du formulaire.