créer un formulaire

Interactions hommes - machines (IHM)

python

Les formulaires permettent d'étendre les possibilités d'action des personnes qui consultent un document HTML. Ils offrent la possibilité d'introduire des zones de saisie de texte, des listes de choix et des boutons de commandes. Les résultats obtenus pourront être envoyés par courrier électronique ou traités directement par des commandes JavaScript.


Création d'un formulaire

La balise form

Un formulaire est toujours défini entre les balises <form> et </form>.
La balise <form> est accompagnée des attributs :

  • name : pour donner un nom au formulaire
  • ACTION : URL qui indique le traitement à effectuer avec le contenu; on peut donner l'adresse d'un script CGI, le nom d'une commande JavaScript ou une adresse d'E-Mail.
  • METHOD : pour indiquer la méthode de traitement qui sera GET ou POST; GET convient au transfert de données en quantité limitée vers un script CGI; POST est souvent utilisé pour l'envoi par E-Mail.

Entre les balises <form> et </form> on peut intégrer du code HTML classique ainsi que les différents objets destinés à recevoir les actions de l'utilisateur.

La balise input

La balise input permet de recevoir les saisies de l'utilisateur sous plusieurs formes. L'attribut type permet de préciser cette forme. L'attribut name permet de nommer le composant.

  • Ligne de saisie
    Elle correspond au type text. Elle peut être accompagnée des attributs size pour définir la taille de la ligne en caractères et MAXLENGTH pour définir le nombre maximal de caractères à saisir.
    Exemple : 
    <input type="text" name="ligne1" size="8" MAXLENGTH="10">
  • Boutons-"radio"s
    Ils correspondent au type "radio". Ils sont accompagnés de l'attribut value. Lorsque plusieurs boutons "radio"s ont le même nom (attribut name), ils fonctionnent de manière conjointe; si l'un est sélectionné, les autres sont désélectionnés.
    Exemple : 
    <input type="radio" name="sexe" value="masculin">Monsieur</input>
<input type="radio" name="sexe" value="féminin">Madame</input>
  • Cases à cocher
    Elles correspondent au type checkbox. Elles sont accompagnées de l'attribut value.
    Exemple : 
    <input type=checkbox name="couleur" value="bleu">Bleu</input>
<input type="checkbox" name="couleur" value="rouge">Rouge</input>
  • Boutons d'envoi ou d'annulation Ils correspondent aux types submit et reset. Ce sont des boutons à cliquer : submit permet de déclencher l'action définie dans la balise form, reset permet d'effacer le contenu du formulaire. L'attribut value permet d'indiquer le texte affiché sur le bouton.
    Exemple : 
    <input type="submit" value="Envoyer"></input>
<input type="reset" value="Annuler"></input>
  • Boutons de commandes
    Ils correspondent au type BUTTON. L'attribut value permet d'indiquer le texte affiché sur le bouton. L'attribut onclick permet de lui associer une commande JavaScript qui sera exécutée lorsque l'utilisateur appuie sur le bouton.
    Exemple : 
    <input name="bouton1" type="button" value="Vérifier" 
onclick="alert('Bonjour.')"> </input>

La balise TEXTAREA

La balise textarea permet d'insérer une zone de saisie de texte à plusieurs lignes. Le texte contenu entre les balises textarea et /textareaest reproduit dans dans la zone de saisie.
La balise textarea admet les attributs suivants :

  • name : nom
  • rows : hauteur en nombre de lignes
  • cols : largeur en nombre de colonnes

Exemple :

<textarea name="zonetexte" rows="10" cols="30>
Donnez votre opinion dans cette zone.
</textarea>

La balise select

La balise select permet d'insérer une liste de sélection. Elle est associée à la balise option qui permet d'indiquer les différents choix proposés par la liste.
La balise select admet les attributs name pour le nom et size pour le nombre de lignes affichées.
La balise optionadmet l'attribut selectED pour indiquer l'item présélectionné.
Exemple de liste de sélection : 

<select name="listechoix" size="4">
<option>Lundi</option>
<option>Mardi</option>
<option>Mercredi</option>
<option>Jeudi</option>
<option selectED>Vendredi</option>
<option>Samedi</option>
</select>


Exemples

Un début de QCM

Nous allons réaliser un formulaire contenant une question et proposant 4 réponses. L'appui sur le bouton "Vérifier" permettra d'effectuer un contrôle de la réponse.
On utilise le code suivant :

<form name="qcm1">
<B>Question :</B>
Quelle est la mesure des angles d'un triangle équilatéral ?
<B>Réponses :</B>
<input type="radio" name="choix" value=30>30°</input>
<input type="radio" name="choix" value=45>45°</input>
<input type="radio" name="choix" value=60>60°</input>
<input type="radio" name="choix" value=90>90°</input>
<input type="button" name="bouton" value="Vérifier"
  onclick="if (document.qcm1.choix[2].checked) {alert('Bonne réponse.')}
  else {alert('Réponse fausse.')}">
</input>
</form>

Lorsque l'utilisateur clique sur le bouton "Vérifier",  il provoque l'évènement onclick qui déclenche l'exécution du code JavaScript associé. Celui-ci indique que :
- si le bouton radio de numéro 2 (on commence la numérotation à 0) est sélectionné, on utilise la méthode alert de la fenêtre pour afficher un message indiquant 'Bonne réponse.'
- sinon on affiche une fenêtre de message indiquant 'Réponse fausse.'.

Créer une liste de liens

Le formulaire suivant met en oeuvre une liste déroulante proposant des liens vers différents sites WEB.
On utilise le code suivant : 

<form name="listeliens">
Sélectionnez votre moteur de recherche :
<select name="choix" size=2>
<option value="http://www.altavista.com" selectED>AltaVista</A>
<option value="http://www.yahoo.fr">Yahoo</option>
<option value="http://www.lycos.com">Lycos</option>
</select>
<input type="button" name="bouton" value="GO" 
 onclick="location.href=
 document.listeliens.choix[document.listeliens.choix.selectedIndex].value"}
</form>

Lorsque l'utilisateur clique sur le bouton "Vérifier",  il provoque l'évènement onclick qui déclenche l'exécution du code JavaScript associé. Celui-ci provoque un changement de l'URL de la fenêtre en utilisant la propriété value de l'option sélectionnée. 
Le changement d'URL est obtenu en modifiant la propriété location.href de la fenêtre. Dans le cas d'utilisation de cadres, on pourra utiliser parent.frames[i].location.href où i est le numéro du cadre visé.
Le numéro de l'option sélectionnée est obtenu grâce à la propriété selectedIndex de la liste.

A faire vous même (Niveau 1) :

Votre mission consiste à créer pour votre site une page permettant à un visiteur de se tester sur l'histoire de l'informatique qui se trouve sur votre site.

A faire vous même (Niveau 2) :

Votre mission, si vous l'acceptez, consiste à créer pour votre site une page permettant à un visiteur de se tester sur l'histoire de l'informatique qui se trouve sur votre site et lui permettre d'entrer en contact avec vous par E-Mail en indiquant :

  • ses nom et prénom
  • sa tranche d'âge, à choisir dans une liste
  • son adresse électronique
  • une évaluation générale, à sélectionner avec des boutons-"radio" dans une échelle allant de 'Excellent' à 'Nul'
  • une opinion générale sur votre site et son contenu, sous forme de texte libre.