Prog-Info > (X)HTML/CSS > Les formulaires.

---

Les formulaires

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Présentation

Les formulaires sont très utilisés dans les sites Web. Ils permettent aux utilisateurs d'interagir avec le texte et les graphiques affichés.
Les informations saisies dans les formulaires peuvent être du texte libre, des réponses à des questions par oui ou par non, par sélection d'options, ...
Les formulaires sont utilisés par exemple pour les forums (inscriptions, connexions, posts de messages, recherches, ...), l'envoi de mails, les inscriptions et les identifications dans les parties membres, les commentaires, les signatures des livres d'or, ...
Les informations transmises par les utilisateurs par l'itermédiaire des formulaires sont en fait traitées par un script (PHP, ASP, CGI, ...) qui se charge des opérations sur ces informations.

Les balises de formulaires HTML

Un formulaire est contenu entre les balises <form> et </form>. A l'intérieur, trois types de balises sont utilisées pour créer vos éléments du formulaire : <textarea>, <select> et <input>.
- <textarea> : définit un champ dans lequel l'utilisateur peut taper différentes lignes de texte.
- <select> : définit une liste déroulante ou un menu contextuel dans lequel l'utilisateur peut choisir parmi plusieurs options.
- <input> : définit différents types de champs : lignes de texte, boutons radio, cases à cocher, champ fichier, champ masqué, champ image, champ mot de passe, bouton valider ou bouton nettoyer le formulaire.

Lors de la création de la balise <form>, il faut définir le script (PHP, ASP, CGI, ...) qui traitera les données du formulaire ainsi que la manière dont elles seront envoyées :
- action : adresse de la page de script.
- method : indique au formulaire la méthode d'envoi des données au script. La méthode post, la plus commune, envoie les données séparément de l'URL alors que get non.
- target : spécifie dans quelle fenêtre s'ouvrira la page de résultat du traitement du formulaire (_blank : nouvelle page, _self : page courante & _parent, _top : cas de jeu de cardres imbriqués)
- enctype="multipart/form-data" : est à utiliser lorsque l'utilisateur envoie avec les données du formulaire un fichier.

Exemple :

Source	Résultat
<form method="post" action="scripts/traite_mail.php" enctype="multipart/form-data">   . . . . . </form>	. . . . .

La balise <textarea>

Cette balise permet de fournir un champ texte de plusieurs lignes. Pour spécifier du texte par défaut, il faut insérer du texte entre les balises <textarea> et </textarea>. Les attributs utilisables sont les suivants :
- name : définit le nom pour la donnée.
- rows : définit le nombre de lignes du champ texte.
- cols : définit la largeur du champ texte en caractères.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   <textarea name="contenu" rows="3" cols="30">   Votre texte...   </textarea> </form>	Votre texte...

La balise <select>

Cette balise permet d'afficher une liste de propositions dans un menu contextuel ou bien une liste déroulante. Les attributs utilisables sont les suivants :
- name : elle fournit le nom de la donnée.
- size : précise le nombre de choix à montrer. Par défaut, size est égal à 1. Lorsque size vaut 1, les choix sont représentés sous forme de liste déroulante. Si size vaut 2 ou plus, les choix sont représentés dans une zone avec une barre de défilement.
- multiple : cet attribut permet à l'utilisateur de sélectionner plusieurs choix.

Entre les balises <select> et </select> les différents choix que l'utilisateur peut sélectionner sont répertoriés dans les balises <option>. Les attributs utilisables de cette balise sont les suivants :
- value : valeur qui doit être assignée pour le choix. C'est cette valeur qui est envoyée au script qui traitera le formulaire.
- selected : pour qu'un choix soit sélectionné par défaut, il faut utiliser cet attribut.

Exemple 1 : liste déroulante

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   <select name="numeros" size="1">     <option value="1" selected="selected">Un</option>     <option value="2">Deux</option>     <option value="3">Trois</option>   </select> </form>	Un Deux Trois

Exemple 2 : liste

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   <select name="numeros" size="3" multiple="multiple">     <option value="1" selected="selected">Un</option>     <option value="2">Deux</option>     <option value="3">Trois</option>     <option value="4">Quatre</option>     <option value="5">Cinq</option>   </select> </form>	Un Deux Trois Quatre Cinq

La balise <input>

Cette balise permet de définir tous les autres types de champs : ligne de texte, champ mot de passe, boutons radio, cases à cocher, champ fichier, champ masqué, champ image et bouton pour valider ou nettoyer le formulaire. Les différents attributs utilisables de cette balise sont :
- name : définit le nom pour les données. Ce champ est requis pour tous les types de saisies sauf pour submit et clear.
- size : représente la taille du champ d'entrée pour le texte ou le mot de passe (en nombre de caractères)
- maxlength : spécifie le nombre maximum de caractères autorisés pour le texte ou le mot de passe.
- value : texte par défaut pour le champ texte ou le mot de passe; pour les autres, la valeur qui est renvoyée.
- checked : uniquement utilisé pour les cases à cocher et les boutons radio. Il permet d'activer le choix.
- type : indique le type de champ à afficher (bouton, texte, case à cocher, ...)

Les champs texte

La balise <input> avec l'attribut type et la valeur text permet d'afficher une simple ligne de saisie textuelle. Les autres attributs utilisables sont les suivants : name (obligatoire), maxlength et value.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   Nom : <input type="text" name="nom" size="20" maxlength="30"> </form>	Nom :

Le champs mot de passe

La balise <input> avec l'attribut type et la valeur password permet d'afficher comme pour un champ texte un ligne de saisie sauf que les caractères saisis sont remplacés par des astérixes(*). Les autres attributs utilisables sont les suivants : name (obligatoire), size, maxlength et value.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   Mot de passe : <input type="password" name="motdepasse" size="20" maxlength="16"> </form>	Mot de passe :

Les cases à cocher

La balise <input> avec l'attribut type et la valeur checkbox permet d'afficher une simple case à cocher. Les cases à cocher sont trés utilisées lorsque vous voulez permettre à l'utilisateur de sélectionner un certain nombre d'éléments d'une liste. Les autres attributs utilisables sont les suivants : name (obligatoire), value et checked (qui permet d'activer une case par défaut). Un groupe de cases à cocher possèdent la même valeur pour l'attribut name.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post"> Sports pratiqués : <br>   <input type="checkbox" name="Sports" value="Football" checked="checked"> Football<br>   <input type="checkbox" name="Sports" value="Natation"> Natation<br>   <input type="checkbox" name="Sports" value="Tennis"> Tennis<br>   <input type="checkbox" name="Sports" value="Rugby"> Rugby </form>	Sports pratiqués : Football Natation Tennis Rugby

Les boutons radio

La balise <input> avec l'attribut type et la valeur radio permet d'afficher un simple bouton radio. Les boutons radio ressemblent beaucoup aux cases à cocher sauf qu'un seul et unique choix est autorisé pour un groupe de boutons. Les boutons radio sont souvent utilisés par exemple lorsque l'utilisateur doit répondre par oui ou non ou bien à un QCM. Les autres attributs utilisables sont les suivants : name (obligatoire), value et checked (qui permet d'activer une case par défaut). Un groupe de cases à cocher possèdent la même valeur pour l'attribut name.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post"> Abonnement à la newsletter : <br />   <input type="radio" name="NewsLetter" value="Oui"> Oui<br>   <input type="radio" name="NewsLetter" value="Non"> Non </form>	Abonnement à la newsletter : Oui Non

Les champs cachés

La balise <input> avec l'attribut type et la valeur hidden permet de définir un champ invisible à l'utilisateur. Ils permettent de transmettre certaines données qui seront utiles au script qui traitera le formulaire. Les autres attributs utilisables sont les suivants : name (obligatoire) et value.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   <input type="hidden" name="le_nom" value="la_valeur"> </form>

Les champs fichiers

La balise <input> avec l'attribut type et la valeur file affiche un champ permettant à l'utilisateur d'envoyer avec les données du formulaire un fichier se trouvant sur son ordinateur. Les autres attributs utilisables sont les suivants : name (obligatoire), size, maxlength (taille en octets maximum du fichier) et accept (permet d'accepter que certains types de fichiers, il faut pour cela mentionner les types MIME). Attention, il faut employer dans la balise <form> l'attribut enctype avec la valeur multipart/form-data.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post" enctype="multipart/form-data">   Code source : <br>   <input type="file" name="code_source" maxlength="200000" accept="text/*"> </form>	Code source :

Les boutons reset

La balise <input> avec l'attribut type et la valeur reset permet d'afficher dans le formulaire un bouton permettant de remettre à leur valeur d'origine tous les éléments du formulaire. Les autres attributs utilisables sont les suivants : value permettant de modifier le texte affiché sur le bouton.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   No : <input type="text" name="no" size="16" maxlength="10" value="0"><br><br>   <input type="reset" value="Reinitialiser"> </form>	No :

Les boutons submit

La balise <input> avec l'attribut type et la valeur submit permet d'afficher dans le formulaire un bouton permettant d'envoyer les données du formulaire pour que celles-ci soient analysées par un script sur le serveur. Les autres attributs utilisables sont les suivants : value permettant de modifier le texte affiché sur le bouton.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   No : <input type="text" name="no" size="16" maxlength="10" value="0"><br><br>   <input type="submit" value="Envoyer"> </form>	No :

Les boutons graphiques

La balise <input> avec l'attribut type et la valeur image permet d'afficher dans le formulaire un bouton graphique permettant d'envoyer les données du formulaire pour que celles-ci soient analysées par un script sur le serveur. Un autre attribut obligatoire est src qui permet d'indiquer l'adresse de l'image représentant le bouton.

Exemple :

Source	Résultat
<form action="scripts/traiter_form.php" method="post">   No : <input type="text" name="no" size="16" maxlength="10" value="0"><br><br>   <input type="image" src="Images/envoyer.gif"> </form>	No :

[ Plan] [ A Propos] [ 661199 ] Copyright ©2002-2009 Prog-info Tous droits réservés.