Les formulaires

16/3/2009

Les formulaires

Ils constituent un élément important du développement Web, puisqu'ils permettent de pouvoir recueillir certaines informations utiles auprès des visiteurs.

Définir la feuille de 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 balises

et
.
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 de la balise
.

Un bon formulaire doit être accessible :

- mise en page simple (p. ex., sur une seule colonne) des contrôles et des zones de saisie;
- Explications ou étiquettes claires (significatives) associées aux zones et aux contrôles;
- Vérification et validation côté serveur de la saisie des données;
- Proposition d'autres méthodes pour communiquer avec une personne-ressource et/ou transmettre de l'information.

Balises et attributs :

La balise FORM :

possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

Attribut ACTION :

permet d'indiquer l'URL (de protocole : http, ftp, file, mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsque l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.

Attribut METHOD

L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire.
Il y en a deux :
La méthode GET:
méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ.
On obtient alors une requête adressée au serveur, du genre :http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&....
La méthode POST :
génére une requête HTTP spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST.
l'action MAILTO:
C'est le moyen le plus simple pour faire expédier les informations du formulaire par l'utilisateur.
Il consiste à utiliser automatiquement le courrier électronique.
Il suffit de spécifier l'adresse électronique (e-mail) du destinataire après le nom du protocole MAILTO:
Si le serveur de messagerie est accessible, (si l'utilisateur est bien connecté), le corps du message acheminé contiendra la liste des couples champ1=valeur1.

par exemple :


Les éléments d'un formulaire :

Les différents élements d'un formulaire sont à insérer à l'interieur des balises ...

1.- 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.

Exemple:

Nom:

code source :


Nom:






Explication de la syntaxe :

INPUT TYPE="text" Cela définit le type de boîte, ici texte en entrée.
NAME="nom idenficateur" Nom de la boîte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.

2.- 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. Les caractères tapés sont représentés par des astérisques.

Exemple :

Entrez votre mot de passe:

code source :


Entrez votre mot de passe:

Explication de la syntaxe :

INPUT TYPE="password" Cela définit le type de boîte, ici mot de passe en entrée.
NAME="nom idenficateur" Nom de la boîte.
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.

3.- Les cases radio :

Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.

Exemple : dans quel groupe d'âge se trouve le visiteur

16-25 ans
26-35 ans
36-45 ans
46-65 ans
65 ans et plus

code source :


16-25 ans

26-35 ans

36-45 ans

46-65 ans

65 ans et plus

Explication de la syntaxe :

INPUT TYPE="radio" Cela définit le type de case, ici case radio.
NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est le même mais il peut être différent .
VALUE="valeur" Contenu par défaut ici les tranches d'âge.
CHECKED indique que l'item est sélectionné par défaut au chargement de la page.


4.- 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.

Réalisation
Image
Son
Montage scripte
Multimédia
Théâtre

code source :



Réalisation


Image


Son


Montage scripte


Multimédia


Théâtre

Explication de la syntaxe :

INPUT TYPE="radio" Cela définit le type de case, ici case à cocher.
NAME="nom idenficateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut ici les options.

5.- 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 : une liste de livres parmi lesquels l'utilisateur peut choisir:

code source :



Explication de la syntaxe :


6.-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.

exemple :

code source :




Explication de la syntaxe :

NAME= nom de la liste

7.- 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.

exemple :

Donnez-nous vos commentaires:

code source :


Donnez-nous vos commentaires:


Explication de la syntaxe :

NAME="nom identificateur"
COLS=nb colonnes .
ROWS=nb rangées.
WRAP détermine la façon dont les lignes sont traitées lors d'un changement de ligne. La liste ci-dessous donne une description des différentes possibilités :
- OFF : aucun changement de ligne.
- VIRTUAL :les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.
- PHYSICAL : les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.


8.- Les boutons envoyer 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.

code source :

ICI tous les élements de votre formulaire, cases à cocher, boîte de texte, boutons radio ...



Le bouton Envoyer est celui dont l'attribut TYPE est submit, tandis que le bouton Recommencer est reset.

 

9.- Exemple complet :

 

Nom : Prénom :

Mot de passe :

- Vous êtes à l' IAD au :

Type long Type court Théâtre (Type long)

- Quelle est votre discipline préférée ?

- Vous voulez des renseignements sur les options :

Réalisation
Image
Son
Montage scripte
Multimédia
Théâtre

Ecrivez ci-dessous le sujet de votre demande de renseignements :


Envoyer les informations

Pour récommencer

 

code source :


Nom :

Prénom :



Mot de passe :


- Vous êtes à l' IAD au :



Type long

Type court

Théâtre (Type long)


- Quelle est votre discipline préférée ?





- Vous voulez des renseignements sur les options :




Réalisation


Image


Son


Montage scripte


Multimédia


Théâtre


Ecrivez ci-dessous le sujet de votre
demande de renseignements :














Envoyer les informations



Pour récommencer

Tags : bf
Category : INFORMATIQUE اعلاميات | Write a comment | Print

Comments