Retours |
Echanges de bandeaux |
Visionneuses |
Rémunération |
Autres |
TUTORIAL POUR CRÉER SES
FORMULAIRES EN HTML
Vous ne comprenez pas les
formulaires ?? ----- IntroductionVoici un petit tutoriel pratique pour les Webmasters qui désirent comprendre les formulaires sur le web.
Définir la feuille de formulaireIl s'agit de la première chose à faire lorsque l'on conçoit un formulaire. La feuille de formulaire remplit deux fonctions. La première consiste à délimiter les éléments constituant le formulaire. Ainsi, le navigateur pourra identifier l'endroit où débute le formulaire et où il prend fin, en repérant les marqueurs <FORM> et </FORM>. La deuxième fonction consiste à spécifier les paramètres du formulaire que sont le nom, l'action, la méthode d'envoi et le type d'encodage. Tous ces paramètres se juxtaposent à l'intérieur du marqueur <FORM>. La syntaxe du formulaire HTMLTout formulaire HTML possède la syntaxe suivante: <FORM NAME=[nom] ACTION=[action] METHOD=[méthode
d'envoi] éléments de formulaire </FORM> Les paramètres du formulaire- Le nomIl s'agit du nom du formulaire, utile pour y faire référence lors de l'utilisation du Javascript. - L'actionLe paramètre Action détermine le type de destinataire ou si l'on veut l'outil qui sera utilisé pour traiter le formulaire. Les plus communs sont le mailto: et le http. Le premier permet de recevoir les données du formulaire par courrier électronique, tandis que le deuxième sert habituellement à spécifier un CGI. Exemple 1: mailto <FORM ACTION="mailto:email@domaine.com" METHOD=POST> - Method Il existe deux types de méthode concernant la façon dont l'information du formulaire est traitée: GET et POST. Le prochain tableau illustre la différence entre les deux.
GET constitue la méthode par défaut lorsque celle-ci n'est pas spécifiée. Toutefois, la méthode POST est plus efficace et permet le traitement d'une quantité plus importante de données; c'est donc cette dernière qui est presque toujours utilisée. La méthode GET devrait n'être employée que dans le cas de formulaires très simples. Les éléments de formulaire Jusqu'à maintenant, nous avons exposé le fonctionnement du formulaire en décrivant les paramètres. Il reste à présent à énumérer les éléments composant un formulaire HTML et servant à recueillir les données. Nous verrons également plusieurs exemples. Les éléments sont les suivants:
Rappelons que le code HTML de tous les éléments de formulaires ci-dessus doit être inséré à l'intérieur de la feuille de formulaire. - Les cases à cocher Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix. Exemple: Supposons que l'utilisateur doit indiquer ses chanteurs ou chanteuses préférés, on pourrait alors obtenir les cases suivantes:
Les cases à cocher sont appropriées dans ce cas-ci, puisque l'utilisateur peut avoir plus d'un chanteur préféré. Voyons maintenant à quoi ressemble le code HTML des cases à cocher de l'exemple ci-dessus: <FORM> Syntaxe des cases à cocher <INPUT TYPE="checkbox" NAME=[nom identificateur] VALUE=[valeur] [CHECKED]> Texte On remarque dans l'exemple que toutes les cases à cocher portent le même nom identificateur. CHECKED est optionnel; sa présence indique que la case est cochée. - Les cases radio Les cases radio présentent également une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste. Exemple: Supposons que l'on désire connaître dans quel groupe d'âge se trouve le visiteur, on obtiendrait les cases radio suivantes:
Syntaxe des cases radio <INPUT TYPE="radio" NAME=nom identificateur VALUE=valeur [CHECKED]> Texte Remarquez dans l'exemple ci-haut que toutes les cases radio portent le même nom identificateur. CHECKED est optionnel et permet de spécifier la case radio cochée. - La boîte liste La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL. Exemple: Supposons une liste de livres parmi lesquels l'utilisateur peut choisir: Le code HTML correspondant est le suivant:
Le code HTML correspondant est le suivant: <FORM> Syntaxe de la boîte liste <SELECT NAME="nom identificateur"
[SIZE="nombre"] [MULTIPLE] L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut multiple, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection. Les attributs onBlur, onChange et onFocus constituent des événements Javascript. Les entrées de la liste sont décrites par l'attribut OPTION. VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique. L'attribut SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page. - La boîte liste déroulante La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste. Les choix n'apparaissent à l'utilisateur que lorsque celui-ci clique sur la flèche juxtaposée à la boîte liste. Exemple: Plusieurs sites Web dans un de leurs formulaires demandent le pays d'origine du visiteur. Souvent, la boîte liste déroulant est utilisée pour recueillir la réponse. En effet, un individu n'est issu que d'un seul pays. Dans l'exemple ci-dessous, une liste abrégée de pays est présentée, puisque qu'il serait fastidieux de tous les énumérer.
Syntaxe de la boîte liste déroulante Il s'agit de la même syntaxe que la boîte liste. La différence est à l'effet que dans le premier cas, il n'y a pas d'attribut SIZE ni MULTIPLE et qu'un seul item peut être sélectionné par défaut à l'aide de l'attribut SELECTED. <SELECT NAME="nom identificateur" - La boîte texte La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur, comme le nom de l'utilisateur par exemple. Exemple: Si l'on voulait recueillir les coordonnées des visiteurs, on pourrait retrouver le formulaire suivant:
Le code HTML correspondant est le suivant: <FORM> Syntaxe de la boîte texte <INPUT TYPE="text" NAME="nom idenficateur"
VALUE="valeur" L'attribut VALUE correspond au contenu de la boîte texte. Celui-ci est envoyé lors d'un clic du bouton soumettre. SIZE détermine le nombre de caractères maximal visible à l'écran, tandis que MAXLENGTH fixe le nombre maximal de caractères permis. - La boîte mot de passe La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. En effet, lorsque celui-ci entre du texte dans la case, les caractères tapés sont représentés par des astérisques (*). Exemple:
Le code HTML correspondant est le suivant: <FORM> Syntaxe HTML de la boîte mot de passe <INPUT TYPE="password" NAME="nom idenficateur" VALUE="valeur" SIZE= nombre MAXLENGTH=nombre> Remarquez que la boîte mot de passe ne possède aucun événement Javascript pour éviter l'usage frauduleux. - La boîte texte multilignes La boîte texte multilignes, à l'instar de la boîte texte, permet à l'utilisateur d'inscrire plus d'une ligne de texte. Les moteurs de recherche s'en servent d'ailleurs dans leur formulaire d'inscription pour recueillir la description du site. On peut également s'en servir pour obtenir des commentaires de la part des visiteurs. Exemple: obtenir des commentaires de la part des visiteurs
<FORM> Syntaxe HTML de la boîte texte multilignes <TEXTAREA NAME="nom identificateur" COLS=nb
colonnes ROWS=nb rangées L'attribut WRAP détermine la façon dont les lignes traitées lors d'un changement de ligne. Le tableau ci-dessous donne une description des différentes possibilités:
- Les boutons soumettre et recommencer Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup. Exemple: formulaire avec les boutons soumettre et recommencer
<FORM> [éléments de formulaires] <INPUT TYPE="submit" VALUE="Soumettre"> Le bouton soumettre est celui dont l'attribut TYPE est submit, tandis que le bouton recommencer est reset. Syntaxe HTML des boutons soumettre et recommencer <INPUT TYPE=submit|reset VALUE="texte du bouton" [onClick="commandes Javascript"]> - Le bouton de formulaire En plus des boutons soumettre et recommencer, on peut utiliser un bouton sans fonction prédéfinie. On se sert alors généralement de ce genre de bouton pour déclencher un événement Javascript. Exemple: Supposons que l'on désire afficher une boîte de dialogue suite au clic du bouton formulaire.
Syntaxe HTML du bouton de formulaire <INPUT TYPE=button VALUE="texte du bouton" - L'entrée cachée Certaines informations, utiles seulement au récipiendaire du formulaire, peuvent être envoyées à même le formulaire. Par exemple, le CGI mailto utilise des entrées cachées afin d'assigner le sujet du message, l'adresse du serveur de courrier, le récipiendaire et l'adresse URL de remerciement. Exemple: entrées cachées utilisées par le CGI mailto <FORM ACTION="/cgi-shl/mailto.exe" METHOD="post"> Syntaxe HTML de l'entrée cachée <INPUT TYPE="hidden" NAME="nom identificateur" VALUE="valeur"> - L'image de formulaire L'image de formulaire est similaire au bouton soumettre. En effet, un clic sur celle-ci provoquera l'envoi du formulaire au serveur. En plus, les coordonnées de l'endroit cliqué seront également expédiées avec le formulaire sous la forme "NAME.x=n&NAME.y=n". Exemple: une image employée en tant que bouton soumettre <FORM ACTION="mailto:usager@domaine.com"
METHOD=POST> Syntaxe HTML de l'image de formulaire <INPUT TYPE="image" SRC="image"
BORDER="épaisseur de bordure" Notez que la syntaxe relative à l'image est la même que celle définissant une image normale en HTML (sans formulaire). L'insertion d'un formulaire n'est pas compliqué, il s'agit juste de renseigner les champs d'adresse d'envoi de vos hébergeurs et ensuite d'ajouter vos éléments
© Copyrights GigaSurf 2003/2006 - Tous droits réservés.
|