– Les formulaires –

 

Les formulaires sont le second moyen de passer d’une page à l’autre à l’intérieur d’un site web. La différence avec les liens hypertextes est qu’ici on va demander à l’utilisateur d’interagir avec le site afin d’envoyer des informations d’une page à l’autre, à l’aide de champs.

Un formulaire inclus dans une page web permet à l’utilisateur de saisir des données, faire des choix, … Il existe deux possibilités:

  • pour envoyer au serveur web les données saisies par l’utilisateur
  • pour passer en arguments à une fonction Javascript les données saisies par l’utilisateur une même page peut contenir plusieurs formulaires mais on ne peut pas imbriquer un formulaire dans un autre

Une même page peut contenir plusieurs formulaires bien sûr, simplement on ne peut pas les imbriquer les uns dans les autres.

Ils sont enclenchés à l’aide de la balise <form> et se terminent avec la balise </form>

<form action=’fichier2.php’ method=’get’>…</form>

On distingue 2 éléments dans notre balise form, deux paramètres obligatoires:

  • action: page sur laquelle l’utilisateur va arriver en validant le formulaire
  • method: méthode utilisée pour transférer les informations
    • GET: les paramètres sont envoyés concaténés à la fin de l’urlU
    • POST: les paramètres sont envoyés dans un flux indépendant entre le navigateur et le serveur web

L’action sera déclenchée par le clic sur le bouton de type « submit ».

– Les éléments du formulaire –

 

Un formulaire se démarre par une balise <form> et se termine par </form>. Mais si on a besoin de ces balises, elles ne servent presque à rien en résumé. Elles sont juste là pour encadrer le formulaire et lui donner une place. Ce qui importe, ce sont les champs que vous allez trouver à l’intérieur du formulaire. Il y en a de très nombreux, chacun avec ses spécificités. Le principe général que l’on retrouvera sera néanmoins le suivant:

Chaque élément de notre formulaire aura un paramètre(ou attribut) name, et la plupart peuvent avoir un attribut value.

L’attribut name va permettre de passer l’information entre les pages, car sur la page d’arrivée on utilisera ce name pour récupérer l’information. value est utilisé pour pré-rentrer une valeur pour un champ donné, ce qui est très utilisé lors des modifications d’informations.

Voici une liste des éléments que vous pouvez trouver dans un formulaire:

<textarea rows= »R » cols= »C »>valeur par défaut</textarea>

Cet élément correspond à une zone de texte qui fait R lignes de haut et C colonnes de large. Il est possible de lui mettre une valeur par défaut que l’on insère entre les balises d’ouverture et de fermeture. C’est une des rares balises 

<input type= »text »>

Cet élément correspond à un champ texte. C’est le champ le plus utilisé dans les formulaires HTML, et celui qui sera affiché par défaut si votre navigateur de m… (spoiler: IE) ne reconnaît pas votre champ.

Il peut avoir pas mal de paramètres:

  • size= »N » de N caractères de large
  • value= »toto » avec « toto » comme valeur par défaut
  • maxlength= »N »saisie limitée à N caractères
  • disabled: empêche d’écrire dans le champ
  • placeholder: place un texte d’aide dans le champ

<input type= »password »>

Ce champ fonctionnera exactement comme le précédent, à la différence près que les caractères entrés seront affichés sous forme d’étoiles ou de points (enfonction du navigateur)

<input type= »checkbox »>

Cet élément affiche une case à cocher. Elle prend une valeur par défaut si elle est cochée (on). Elle accepte un attribut checked pour indiquer qu’elle est cochée par défaut. Chaque checkbox aura un attribut name différent, pour bien indiquer leur indépendance.

<input type= »radio »>

Cet élément affiche un bouton radio. Les boutons radios correspondent à une liste de choix que l’on peut faire, comme par exemple pour le sexe d’une personne, ou son statut marital. C’est pourquoi plusieurs boutons radios relatant la même information auront le même attribut name, mais des valeurs différentes.

<select name= « sel » >  <option VALUE= »toto1″>texte1</option>…</select>

Cet élément affiche un menu déroulant, qui permet à l’utilisateur de sélectionner une ou plusieurs options (en cas d’attribut multiple). La balise <select> permet d’ouvrir la liste tandis que la balise </select> la ferme. Chaque élément de la liste sera présenté grâce à la balise <option>.

Ainsi l’attribut name sera mis dans la balise <select> car c’est l’information qui sera passée, mais les valeurs que le champ peuvent prendre sont inscrites dans les options.

Il est possible de distinguer différents sous-groupes d’options grâce à la balise <optgroup>

<input type= »hidden » name= »arg » value= »val »>

Cet élément un peu particulier va créer un paramètre qui sera passé avec le formulaire, sans avoir besoin de l’interaction de l’utilisateur. Il aura obligatoirement un attribut name et un attribut value.

<input type= »button » value= »toto » onclick= »action() »>

Cet élément affiche un bouton qui va permettre de valider le formulaire. Ces boutons sont utilisés principalement avec javascript car ils déclenchent une action (ici grâce à l’élément onclick).

<input type= »submit » value= »toto »>

Cet élément affiche un bouton de soumission qui va permettre de valider le formulaire en cliquant dessus.

<input type= »reset » value= »RAZ »>

Cet élément affiche un bouton qui va réinitialiser le formulaire quand on va cliquer dessus sans recharger la page.

<input type= »number » >

Cet élément affiche un champ texte au format nombre

<input type= « range » >

Cet élément affiche une règle de défilement pour définir les valeurs d’un champ

<input type= « color » >

Cet élément affiche une palette de couleurs

<input type = »tel »>

Cet élément affiche un numéro de telephone

<input type= »url »>

Cet élément affiche un champ texte au format URL

<input type= « email » >

Cet élément affiche un champ texte au format email

<input type= « date » >

Cet élément affiche un champ texte au format date

<input type= « file » >

Cet élément affiche un champ fichier. Attention il faut un formulaire de type POST avec l’attribut enctype= »multipart/form-data » pour pouvoir l’utiliser.