Cours gratuit : Cours de HTML - Les formulaires



Contenu du cours
  • I. Généralités
    1. Fonctionnement général

  • II. La balise <form>
    1. Où se place-t-elle?
    2. Fonction
    3. Attributs
    4. Exemples

  • III. la balise <input>
    1. Introduction
      1. Fonction
      2. Attributs généraux
    2. Types de balises <input>
      1. Champ de saisie
      2. Case à cocher
      3. Bouton radio
      4. Attacher un fichier
      5. Cacher des données
      6. Mot de passe
    3. Soumettre et mettre à zéro des données
      1. Soumission de données
      2. Réinitialisation d'un formulaire

  • IV. la balise <textarea>
    1. Fonction
    2. Attributs

  • V. Liste de choix, la balise <select>
    1. Fonctionnement
    2. Attributs de la balise <select>
    3. Balises <optgroup> et <option>
      1. Introduction
      2. Balise <option>
      3. Balise <optgroup>

  • VI. Autres éléments de formulaire
    1. La balise <label>
      1. Fonction
      2. Attributs
      3. Exemple
    2. La balise <button>
      1. Fonction
      2. Attributs
      3. Exemple
    3. Exercice : Créations de formulaires
  • _______________________

    Cette création est mise à disposition par le professeur Gilles Chagnon sous un contrat Creative Commons.

    I. Généralités

    1. Fonctionnement général

    Dans les premiers temps du Web, l'information ne circulait quasiment que dans un seul sens : du serveur vers l'internaute. Il n'existait alors aucun retour de l'utilisateur vers le serveur : l'arrivée des formulaires a comblé cette lacune. Un formulaire doit recueillir des informations de l'utilisateur, puis les transférer au serveur, qui à son tour doit les traiter. Or le traitement de cette information sur le serveur est effectué par des scripts (comprendre "petit programme généralement interprété") écrits en langage C, Perl ou ASP. Nous sortons ici du cadre de notre cours HTML statique : nous ne traiterons pas ici le côté traitement-serveur, cette partie est prévue plus tard dans l'année.

    II. La balise <form>

    1. Où se place-t-elle?

    Un formulaire débute par la balise <form> (et finit donc par </form>). Ce conteneur contient toutes les autres balises du formulaire. Il peut contenir aussi d'autres balises : <p>, <table>, etc., permettant la présentation du formulaire.

    2. Fonction

    Elle est destinée, essentiellement, à préciser où envoyer les données recueillies par le formulaire. Elle permet aussi d'indiquer au serveur la forme sous laquelle ces données lui seront transmises (mode de codification).

    3. Attributs

    Attributs

    Effet

    Valeur(s)

    action

    URL du script CGI (ou autre, fourni par le serveur), qui traite les données recueillies. Cet attribut est obligatoire.

    URL, 2 types possibles :

    • http : pour un traitement immédiat.

    • mailto : dans le cas d'un envoi à un courrier électronique, en vue d'un traitement différé.

    method

    Indique sous quelle forme vont être codées les informations envoyées.

    • get : valeur par défaut. Les données sont adressées sous la forme d'une liste de valeurs accolées à l'URL avec interposition d'un séparateur particulier (point d'interrogation). Le nombre de caractères doit rester inférieur à 256. De plus elle ne permet pas d'envoyer les données à une boîte de courrier électronique. Il est donc préférable d'utiliser la seconde méthode.

    • post : les données sont adressées sous la forme d'une liste nom/valeur accolées à l'URL mais ici, le script doit lire les données par défaut afin d'atteindre les véritables données du formulaires. La forme de cette liste dépend de l'attribut enctype.

    enctype

    Précise la méthode MIME de codification de l'envoi. Permet au serveur d'anticiper sur l'objet à recevoir et de prévoir le protocole d'échange (Pour plus de détails).

    • application/x-www-form-urlencoded : l'envoi se présente comme une chaîne de caractères formées de couples nom=valeur sépararés par un &, nom1=valeur1&nom2=valeur2&nom3=valeur3 (c'est la valeur par défaut).

    • text/plain : le séparateur précédent est remplacé par un retour chariot. C'est la forme à utiliser pour l'envoi au courrier électronique.

    • multipart/form-data : lorsqu'un fichier est attaché à l'envoi (<input type="file" ...>).

    accept

    Précise la méthode MIME de codification de l'envoi pour un fichier. Permet au serveur d'anticiper sur le fichier à recevoir et de prévoir le protocole d'échange (Pour plus de détails).

    Chaîne de caractères donnant un code MIME reconnu.

    onsubmit

    Le code à exécuter lors de la soumission.

    Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript).

    onreset

    Le code à exécuter lors de la remise à zéro du formulaire.

    Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript).

    name

    Le nom du formulaire.

    Une chaîne de caractères.

    accept-charsets

    Les codages de caractèrs acceptés dans les zones de texte.

    Une liste de codage de caractères, séparée par des espaces.

    target

    Spécifie la cible du retour après traitement du serveur (voir le chapitre sur les cadres).

    Une liste de codage de caractères, séparée par des espaces.

    Table 1. Attributs de la balise <form>.

    4. Exemples

    Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania : <form method="get" action="/cgi-bin/mailer">.

    Exemple pour un formulaire classique sans l'aide de script CGI : <forum action="mailto:webmaster@allhtml.com" method="post" enctype="text/plain">.

    III. la balise <input>

    1. Introduction

    a. Fonction

    Cette balise sert à spécifier comment s'effectue la saisie du formulaire : par cases à cocher, boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l'aide d'une seule balise : la balise <input>. C'est son attribut type qui permet de préciser s'il s'agit de cases à cocher, boutons radio, texte libre...

    L'attribut type peut prendre les valeurs suivantes :

    b. Attributs généraux

    Cette balise possède de nombreux attributs ; certains n'ont une signification que pour un type donné de champ. Ce paragraphe présente une liste des attributs d'usage général.

    Attributs

    Effet

    Valeur(s)

    name

    Le nom du champ.

    Une chaîne de caractères.

    alt

    Une courte description.

    Une chaîne de caractères.

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    accesskey

    Définit une touche du clavier permettant d'accéder au champ de formulaire. La combinaison "ALT+touche" a le même effet que l'activation du champ.

    Touche du clavier

    tabindex

    Fixe la position de l'élément dans l'ordre séquentiel des tabulations.

    Valeur numérique entière

    onfocus, onblur

    Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur).

    Une chaîne de caractères.

    onchange

    Un script à exécuter quand contenu du champ a été changé.

    Une chaîne de caractères.

    Table 2. Attributs généraux de la balise <input>.

    2. Types de balises <input>

    a. Champ de saisie

    L'attribut type vaut type="text". La balise permet alors à l'utilisateur de saisir une ligne de texte. Les attributs utiles pour ce type sont :

    L'attribut name est obligatoire pour ce type de champ.

    b. Case à cocher

    L'attribut type vaut type="checkbox". Les attributs utiles pour ce type sont :

    c. Bouton radio

    L'attribut type vaut type="radio". Outre la présentation (les cases sont rondes et non plus carrées), il existe une grande différence entre les cases à cocher et les boutons radio : les boutons radio qui portent le même name s'excluent mutuellement, le cochage de l'un décoche les autres. Les attributs utiles pour ce type sont :

    d. Attacher un fichier

    L'attribut type vaut type="file". Il s'agit de donner la possibilité à l'utilisateur du formulaire de joindre un fichier à son envoi. L'attribut utile pour ce type est value , une chaîne de caractères, qui indique le lom du fichier à attacher par défaut.

    e. Cacher des données

    L'attribut type vaut type="hidden". Pourquoi cacher des données ? Il s'agit plutôt de faciliter le traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL du formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des données. Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web. Les attributs utiles pour ce type sont :

    Par exemple, avec le script CGI chargé de la gestion de l'envoi de courrier électronique sur Multimania :

    f. Mot de passe

    L'attribut type vaut type="password". A l'identique que le type text, mais les caractères tapés sont affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en clair dans le message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité ne se limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux du type text :

    3. Soumettre et mettre à zéro des données

    a. Soumission de données

    L'attribut type vaut type="submit". Les attributs utiles pour ce type sont :

    Une variante est possible en utilisant le type image : type="image". Le bouton d'envoi est alors... une image. Les attributs utiles pour ce type sont :

    b. Réinitialisation d'un formulaire

    L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par défaut l'ensemble des champs du formulaire. L'attribut utile pour ce type est value , une chaîne de caractères qui indique la légende du bouton, valant par défaut Reset.

    IV. la balise <textarea>

    1. Fonction

    Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte quelconque.

    2. Attributs

    Attribut

    Effet

    Valeur(s)

    name

    Nom de l'élément.

    Une chaîne de caractères.

    rows et cols

    Nombre de lignes et de colonnes de la zone de texte. Ces attributs sont obligatoires.

    Un nombre entier.

    readonly

    La modification du contenu n'est pas permise.

    Un booléen.

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    accesskey

    Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ.

    Touche du clavier

    tabindex

    Fixe la position de l'élément dans l'ordre séquentiel des tabulations.

    Valeur numérique entière

    onfocus, onblur

    Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur).

    Une chaîne de caractères.

    onchange

    Un script à exécuter quand contenu du champ a été changé.

    Une chaîne de caractères.

    Table 3. Attributs de la balise <textarea>.

    Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le texte par défaut.

    V. Liste de choix, la balise <select>

    1. Fonctionnement

    Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce choix peut être unique ou multiple. Les options possibles sont décrites pour chacunes d'entre-elles dans un conteneur <option> ( la balise fermante </option> est obligatoire). Il y a autant de balises <option> que d'options.

    2. Attributs de la balise <select>

    Attribut

    Effet

    Valeur(s)

    name

    Nom de l'élément.

    Une chaîne de caractères.

    size

    Le nombre d'options accessibles.

    Un nombre.

    multiple

    Permet à plusieurs options d'être simultanément sélectionnées.

    Un booléen. Par défaut, une seule option peut être sélectionnée.

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    tabindex

    Fixe la position de l'élément dans l'ordre séquentiel des tabulations.

    Valeur numérique entière

    onfocus, onblur

    Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur).

    Une chaîne de caractères.

    onchange

    Un script à exécuter quand contenu du champ a été changé.

    Une chaîne de caractères.

    Table 4. Attributs de la balise <select>.

    3. Balises <optgroup> et <option>

    a. Introduction

    La balise <select> admet deux balises-enfants... <optgroup> permet de rassembler des éléments <option>.

    b. Balise <option>

    Chaque "option" est une possibilité de choix dans le menu select. Cette balise possède les attributs suivants :

    Attribut

    Effet

    Valeur(s)

    value

    Ce qui apparaît dans la liste d'options du menu. Si cet attribut n'est pas présent, c'est le contenu de l'élément <option> lui-même qui est affiché.

    Une chaîne de caractères.

    selected

    Spécifie l'option sélectionnée par défaut.

    Un booléen.

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    label

    Une étiquette désignant l'option choisie dans le menu.

    Une chaîne de caractères.

    Table 5. Attributs de la balise <option>.

    c. Balise <optgroup>

    Cette balise permet de rassembler en catégories les éléments <option>, pour les faire apparaître de manière ordonnée dans le menu.

    Attribut

    Effet

    Valeur(s)

    label

    Une étiquette désignant le groupe d'options choisies dans le menu.

    Une chaîne de caractères.

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    Table 6. Attributs de la balise <optgroup>.

    VI. Autres éléments de formulaire

    Les balises présentées dans cette partie sont très peu utilisées. Nous allons nous limiter aux balises <label> et surtout <button>, mais il existe aussi <fieldset> et <legend>.

    1. La balise <label>

    a. Fonction

    Cette balise permet d'associer à un élément de formulaire des informations relatives à son contenu ; cette information est utile notamment pour les navigateurs destinés aux mal-voyants.

    b. Attributs

    Attribut

    Effet

    Valeur(s)

    for

    Renvoie à l'élément de formulaire spécifié par le même attribut id.

    Une chaîne de caractères.

    accesskey

    Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ.

    Touche du clavier

    onfocus, onblur

    Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur).

    Une chaîne de caractères.

    Table 7. Attributs de la balise <label>.

    c. Exemple

    L'exemple suivant donne plusieurs possibilités d'utilisation de cet élément...

    <table summary="">
      <tr>
        <td><label for="user" accesskey="u">utilisateur</label></td>
        <td>
          <select name="user" id="user">
            <option>Jean</option>
            <option>Paul</option>
            <option>Jacques</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="passwd" accesskey="p">mot de passe</label></td>
        <td><input type="password" id="passwd" passwd=""></input></td>
      </tr>
    </table>
    <p><label accesskey="s">Sauver le nom d'utilisateur et le mot de passe dans un cookie?</label><input type="checkbox" name="save" value="oui"></input>
    </p>
    <p><label for="comments" accesskey="c">Commentaires?</label><textarea name="comments" id="comments" rows="8" cols="50"></textarea> </p>

    2. La balise <button>

    a. Fonction

    Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la balise <input> , mais <button> permet un plus large choix d'options. Il est malheureusement moins bien accepté par les "vieux" navigateurs.

    b. Attributs

    Attribut

    Effet

    Valeur(s)

    name

    Le nom du bouton.

    Une chaîne de caractères.

    value

    Valeur envoyée au serveur.

    Une chaîne de caractères.

    type

    Type de bouton.

    • submit (valeur par défaut)

    • button

    • reset

    disabled

    Désactive l'élément, qui apparaît dès lors en grisé.

    Un booléen.

    tabindex

    Fixe la position de l'élément dans l'ordre séquentiel des tabulations.

    Valeur numérique entière

    accesskey

    Définit un raccourci clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ.

    Touche du clavier

    onfocus, onblur

    Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur).

    Une chaîne de caractères.

    Table 8. Attributs de la balise <optgroup>.

    c. Exemple

    Voici quelques exemples d'utilisation de la balise...

    <button name="soumet" value="modifier">Modifier l'information</button>
    <button name="continue" value="continuer">Continuer l'application</button>
    <button><img src="checkmark.gif" alt="?"></img>Sauvegarder</button>
    <button type="reset"><img src="x.gif" alt="?"></img>Remettre à zéro</button>
    <button type="button" id="toggler" onclick="toggle()">Cacher les attributs<em>non stricts</em>.</button>




    Conditions d'utilisation et licence

    Creative Commons License
    Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.


    Source : www.gchagnon.fr/cours/html/index.html