par
Patriboom » 27 sept. 2007, 04:46
Voici ce que j'ai conservé d'un vieux site plein de tuto (Multimania qui a été racheté par Lycos).
Si je ne me trompe pas, ça devrait ressembler à :
http://webmaster.lycos.fr/topics/techni ... rkshop6/0/
Voici les notes que j'ai retenues.
C'est un peu long ici, mais puisque j'ai perdu ma référence, ça peut aider tout de même.
Définition
Un formulaire est une zone de page Web destinée à recevoir des informations de la part des
visiteurs. Une fois ces données saisies, l'utilisateur clique sur un bouton du formulaire pour les
valider et les envoyer au propriétaire du site.
Un exemple de déclaration de formulaire :
<FORM method=GET action="/cgi-bin/mailer">
[Champs du formulaire]
</FORM>
Comme pour beaucoup d'éléments en HTML, les formulaires sont délimités tout d'abord par une
balise générique : <FORM> et </FORM>. C'est entre ces deux balises que doit être placé
l'ensemble des éléments du formulaire.
La balise <FORM> dispose de deux attributs principaux :
ACTION, qui contient l'URL du script à exécuter lors de l'envoi des données du formulaire.
Cette URL peut être spécifiée en relatif ou en absolu.
METHOD, qui peut recevoir les valeurs GET ou POST.
Cet attribut indique comment les données du formulaire seront transmises au serveur. Le
choix de cette méthode dépend du script utilisé et des informations à transmettre.
Info
Mailer CGI
Pour savoir comment utiliser le mail de MultiMania et recevoir vos
formulaires dans votre boîte aux lettres, consultez l'atelier Un formulaire
dans votre boîte aux lettres.
A l'intérieur d'un formulaire, on peut entrer différents types de champs. Tous servent à recevoir les
informations de vos visiteurs. Ils se divisent en quatre groupes :
Les boutons (balise <BUTTON>).
Les champs de saisie, les cases à cocher et les boutons radio (balise <INPUT>).
Les listes de sélections (balise <SELECT>).
Les zones de texte (balise <TEXTAREA>).
Toutes ces balises possèdent un attribut NAME qui permet d'identifier les données saisies par
l'utilisateur une fois reçues par le serveur.
Elles possèdent également un attribut TYPE qui permet de différencier les déclinaisons de
chaque champ.
Les boutons
Les boutons sont sans aucun doute les éléments des formulaires les plus simples à utiliser.
Voyons tout de suite comment ils fonctionnent :
<BUTTON name="submit" type="submit">OK</BUTTON>
et
<BUTTON name="reset" type="reset"><IMG SRC="mon_image.jpg"></BUTTON>
donnent les résultats suivants :
OK
Entre les balises <BUTTON> et </BUTTON>, on place le texte et les images à afficher à
l'intérieur du bouton. La taille du bouton s'adapte automatiquement à son contenu.
La balise <BUTTON> dispose d'un attribut TYPE qui indique l'action associée au bouton. Cet
attribut peut prendre les valeurs suivantes :
submit : valide le formulaire et exécute l'action définie dans l'attribut ACTION de la balise
<FORM>.
reset : réinitialise tous les contrôles du formulaire à leur valeur par défaut.
button : aucune action précise n'est associée au bouton.
A l'aide de l'attribut onClick, le bouton peut alors faire appel à une fonction JavaScript
précise.
HTML : Les formulaires, par Jérôme Versavel
Tous les articles html
Les zones de texte
Les zones de texte peuvent être utiles pour saisir les remarques de vos visiteurs ou pour
enregistrer leur adresse mail et les abonner à votre liste de diffusion. Deux balises définissent les
champs texte.
Login : <INPUT TYPE="text" NAME="login" SIZE="20"><BR>
Password : <INPUT TYPE="password" NAME="pass" SIZE="20">
Votre commentaire :<BR>
<TEXTAREA NAME="commentaire" ROWS="20" COLS="80">
Saisissez votre commentaire ici
</TEXTAREA>
Ici, on utilise les trois types de champs texte disponibles en HTML :
La balise <INPUT TYPE="text"> permet de définir des zones de saisie sur une seule
ligne.
Ce type de champ peut recevoir deux attributs supplémentaires :
- VALUE, pour donner une valeur par défaut à la zone de saisie. Ce texte apparaîtra dès le
chargement de la page.
- SIZE, pour définir la taille en caractères du champ de saisie.
La balise <INPUT TYPE="password"> définit une zone de saisie de mot de passe.
Lors de la saisie d'un mot de passe, ce champ affiche uniquement des caractères *.
Confidentialité assurée. Ce type de champ possède les mêmes attributs que le
précédent.
La balise <TEXTAREA> crée une zone de saisie sur plusieurs lignes.
Les attributs ROWS et COLS précisent le nombre de lignes et de colonnes de la zone. Le
texte placé entre la balise d'ouverture et de fermeture du champ est affiché dans la zone
de texte. Un ascenseur s'affiche automatiquement si le texte saisi est plus long que la
zone.
Cases à cocher et boutons radio
Pour que le visiteur ait le choix entre plusieurs réponses, proposez-lui cases à cocher et boutons
radio.
Cases à cocher
Les cases à cocher se présentent sous la forme de "trous" carrés qui s'ornent d'une croix lors de
leur validation. Le visiteur peut en cocher plusieurs.
Exemple :
Vous utilisez internet :<BR>
<INPUT TYPE="checkbox" NAME="internet" VALUE="maison">chez vous<BR>
<INPUT TYPE="checkbox" NAME="internet" VALUE="travail">au travail<BR>
ce qui donne
chez vous
au travail
Ces cases sont définies par la balise <INPUT TYPE="checkbox"> qui possède deux attributs
:
VALUE, qui représente la réponse fournie par le visiteur.
C'est cet attribut que vous devez tester lors de la vérification de réponses du formulaire.
CHECKED, qui permet de cocher la case par défaut.
Info
Troupeau de boutons
Toutes les balises d'une même question doivent avoir la même valeur
pour l'attribut NAME (qui représente la question) et des valeurs différentes
pour l'attribut VALUE (qui représente une réponse en particulier).
Boutons d'option
Contrairement aux cases à cocher, les boutons d'option permettent à l'utilisateur de faire un
choix unique entre plusieurs propositions.
Exemple :
<INPUT TYPE="radio" NAME="age" VALUE="18-25"> 18 - 25 ans<BR>
<INPUT TYPE="radio" NAME="age" VALUE="26-35"> 26 - 35 ans<BR>
<INPUT TYPE="radio" NAME="age" VALUE="36-45"> 36 - 45 ans<BR>
Ce qui donne :
18 - 25 ans
26 - 35 ans
36 - 45 ans
Les boutons d'option se définissent donc grâce à la balise <INPUT TYPE="radio"> et
possèdent les mêmes attributs que les cases à cocher.
Liste de sélections
Le dernier type de champ disponible dans les formulaires HTML est la liste de sélections dans
laquelle l'utilisateur doit faire un choix. Elle se définit grâce à la balise <SELECT>.
Exemple :
<SELECT NAME="departement">
<OPTION VALUE="01">Ain
<OPTION VALUE="02">Aisne
<OPTION VALUE="03">Allier
<OPTION VALUE="04">Alpes de Haute Provence
...
</SELECT>
Ce qui donne :
Ain Aisne Allier Alpes de Haute Provence
Chaque choix de la liste est défini par une balise <OPTION> distincte. La valeur retournée par ce
champ est celle de l'attribut VALUE de l'option sélectionnée. Si la balise n'en possède pas, c'est
le texte de l'option lui-même qui est retourné.
L'attribut SIZE de la balise <SELECT> indique le nombre d'options visibles en permanence dans
la liste. Si ce nombre est inférieur au nombre d'éléments de la liste, un ascenseur est affiché
automatiquement sur la droite. Si l'attribut SIZE n'est pas spécifié, la liste est présentée sous
forme de liste déroulante.
Info
Vérifiez vos informations !
Vos visiteurs vous ont-ils fourni des informations correctes ? Rien de
moins sûr... Pour vous assurer de la validité de leurs réponses, ouvrez
l'atelier Vérifier le contenu d'un formulaire.
Les balises et leurs attributs
Toutes ces balises, tous ces attributs, ça fait beaucoup de choses à retenir... Voici un tableau
récapitulatif :
<FORM> Définit un nouveau formulaire
METHOD POST ou GET.
ACTION URL du script à exécuter.
<INPUT> Définit un contrôle.
TYPE Précise le type du contrôle (text, password, radio,
checkbox, submit, reset).
VALUE Précise la valeur par défaut du contrôle s'il peut en recevoir une.
NAME Indique le nom du contrôle.
SIZE Précise la taille du contrôle pour les types text et password.
CHECKED Sélectionne le contrôle par défaut dans le cas de radio ou de checkbox.
<BUTTON> Crée un nouveau bouton.
TYPE RESET, SUBMIT ou BUTTON.
NAME Précise le nom du bouton.
<TEXTAREA> Définit une zone de texte multiligne.
ROWS Indique le nombre de lignes de la zone de texte.
COLS Indique le nombre de colonnes de la zone de texte.
NAME Indique le nom de la zone de texte.
<SELECT> Crée une nouvelle liste de sélection.
NAME Indique le nom de la liste de sélection.
<OPTION> Ajoute une entrée dans la liste de sélection.
VALUE Précise la valeur de l'entrée.
SELECTED Indique que l'entrée est sélectionnée par défaut.
Voici ce que j'ai conservé d'un vieux site plein de tuto (Multimania qui a été racheté par Lycos).
Si je ne me trompe pas, ça devrait ressembler à :
[url=http://webmaster.lycos.fr/topics/technic/html/html-workshop6/0/]http://webmaster.lycos.fr/topics/technic/html/html-workshop6/0/[/url]
Voici les notes que j'ai retenues.
C'est un peu long ici, mais puisque j'ai perdu ma référence, ça peut aider tout de même.
Définition
Un formulaire est une zone de page Web destinée à recevoir des informations de la part des
visiteurs. Une fois ces données saisies, l'utilisateur clique sur un bouton du formulaire pour les
valider et les envoyer au propriétaire du site.
Un exemple de déclaration de formulaire :
<FORM method=GET action="/cgi-bin/mailer">
[Champs du formulaire]
</FORM>
Comme pour beaucoup d'éléments en HTML, les formulaires sont délimités tout d'abord par une
balise générique : <FORM> et </FORM>. C'est entre ces deux balises que doit être placé
l'ensemble des éléments du formulaire.
La balise <FORM> dispose de deux attributs principaux :
ACTION, qui contient l'URL du script à exécuter lors de l'envoi des données du formulaire.
Cette URL peut être spécifiée en relatif ou en absolu.
METHOD, qui peut recevoir les valeurs GET ou POST.
Cet attribut indique comment les données du formulaire seront transmises au serveur. Le
choix de cette méthode dépend du script utilisé et des informations à transmettre.
Info
Mailer CGI
Pour savoir comment utiliser le mail de MultiMania et recevoir vos
formulaires dans votre boîte aux lettres, consultez l'atelier Un formulaire
dans votre boîte aux lettres.
A l'intérieur d'un formulaire, on peut entrer différents types de champs. Tous servent à recevoir les
informations de vos visiteurs. Ils se divisent en quatre groupes :
Les boutons (balise <BUTTON>).
Les champs de saisie, les cases à cocher et les boutons radio (balise <INPUT>).
Les listes de sélections (balise <SELECT>).
Les zones de texte (balise <TEXTAREA>).
Toutes ces balises possèdent un attribut NAME qui permet d'identifier les données saisies par
l'utilisateur une fois reçues par le serveur.
Elles possèdent également un attribut TYPE qui permet de différencier les déclinaisons de
chaque champ.
Les boutons
Les boutons sont sans aucun doute les éléments des formulaires les plus simples à utiliser.
Voyons tout de suite comment ils fonctionnent :
<BUTTON name="submit" type="submit">OK</BUTTON>
et
<BUTTON name="reset" type="reset"><IMG SRC="mon_image.jpg"></BUTTON>
donnent les résultats suivants :
OK
Entre les balises <BUTTON> et </BUTTON>, on place le texte et les images à afficher à
l'intérieur du bouton. La taille du bouton s'adapte automatiquement à son contenu.
La balise <BUTTON> dispose d'un attribut TYPE qui indique l'action associée au bouton. Cet
attribut peut prendre les valeurs suivantes :
submit : valide le formulaire et exécute l'action définie dans l'attribut ACTION de la balise
<FORM>.
reset : réinitialise tous les contrôles du formulaire à leur valeur par défaut.
button : aucune action précise n'est associée au bouton.
A l'aide de l'attribut onClick, le bouton peut alors faire appel à une fonction JavaScript
précise.
HTML : Les formulaires, par Jérôme Versavel
Tous les articles html
Les zones de texte
Les zones de texte peuvent être utiles pour saisir les remarques de vos visiteurs ou pour
enregistrer leur adresse mail et les abonner à votre liste de diffusion. Deux balises définissent les
champs texte.
Login : <INPUT TYPE="text" NAME="login" SIZE="20"><BR>
Password : <INPUT TYPE="password" NAME="pass" SIZE="20">
Votre commentaire :<BR>
<TEXTAREA NAME="commentaire" ROWS="20" COLS="80">
Saisissez votre commentaire ici
</TEXTAREA>
Ici, on utilise les trois types de champs texte disponibles en HTML :
La balise <INPUT TYPE="text"> permet de définir des zones de saisie sur une seule
ligne.
Ce type de champ peut recevoir deux attributs supplémentaires :
- VALUE, pour donner une valeur par défaut à la zone de saisie. Ce texte apparaîtra dès le
chargement de la page.
- SIZE, pour définir la taille en caractères du champ de saisie.
La balise <INPUT TYPE="password"> définit une zone de saisie de mot de passe.
Lors de la saisie d'un mot de passe, ce champ affiche uniquement des caractères *.
Confidentialité assurée. Ce type de champ possède les mêmes attributs que le
précédent.
La balise <TEXTAREA> crée une zone de saisie sur plusieurs lignes.
Les attributs ROWS et COLS précisent le nombre de lignes et de colonnes de la zone. Le
texte placé entre la balise d'ouverture et de fermeture du champ est affiché dans la zone
de texte. Un ascenseur s'affiche automatiquement si le texte saisi est plus long que la
zone.
Cases à cocher et boutons radio
Pour que le visiteur ait le choix entre plusieurs réponses, proposez-lui cases à cocher et boutons
radio.
Cases à cocher
Les cases à cocher se présentent sous la forme de "trous" carrés qui s'ornent d'une croix lors de
leur validation. Le visiteur peut en cocher plusieurs.
Exemple :
Vous utilisez internet :<BR>
<INPUT TYPE="checkbox" NAME="internet" VALUE="maison">chez vous<BR>
<INPUT TYPE="checkbox" NAME="internet" VALUE="travail">au travail<BR>
ce qui donne
chez vous
au travail
Ces cases sont définies par la balise <INPUT TYPE="checkbox"> qui possède deux attributs
:
VALUE, qui représente la réponse fournie par le visiteur.
C'est cet attribut que vous devez tester lors de la vérification de réponses du formulaire.
CHECKED, qui permet de cocher la case par défaut.
Info
Troupeau de boutons
Toutes les balises d'une même question doivent avoir la même valeur
pour l'attribut NAME (qui représente la question) et des valeurs différentes
pour l'attribut VALUE (qui représente une réponse en particulier).
Boutons d'option
Contrairement aux cases à cocher, les boutons d'option permettent à l'utilisateur de faire un
choix unique entre plusieurs propositions.
Exemple :
<INPUT TYPE="radio" NAME="age" VALUE="18-25"> 18 - 25 ans<BR>
<INPUT TYPE="radio" NAME="age" VALUE="26-35"> 26 - 35 ans<BR>
<INPUT TYPE="radio" NAME="age" VALUE="36-45"> 36 - 45 ans<BR>
Ce qui donne :
18 - 25 ans
26 - 35 ans
36 - 45 ans
Les boutons d'option se définissent donc grâce à la balise <INPUT TYPE="radio"> et
possèdent les mêmes attributs que les cases à cocher.
Liste de sélections
Le dernier type de champ disponible dans les formulaires HTML est la liste de sélections dans
laquelle l'utilisateur doit faire un choix. Elle se définit grâce à la balise <SELECT>.
Exemple :
<SELECT NAME="departement">
<OPTION VALUE="01">Ain
<OPTION VALUE="02">Aisne
<OPTION VALUE="03">Allier
<OPTION VALUE="04">Alpes de Haute Provence
...
</SELECT>
Ce qui donne :
Ain Aisne Allier Alpes de Haute Provence
Chaque choix de la liste est défini par une balise <OPTION> distincte. La valeur retournée par ce
champ est celle de l'attribut VALUE de l'option sélectionnée. Si la balise n'en possède pas, c'est
le texte de l'option lui-même qui est retourné.
L'attribut SIZE de la balise <SELECT> indique le nombre d'options visibles en permanence dans
la liste. Si ce nombre est inférieur au nombre d'éléments de la liste, un ascenseur est affiché
automatiquement sur la droite. Si l'attribut SIZE n'est pas spécifié, la liste est présentée sous
forme de liste déroulante.
Info
Vérifiez vos informations !
Vos visiteurs vous ont-ils fourni des informations correctes ? Rien de
moins sûr... Pour vous assurer de la validité de leurs réponses, ouvrez
l'atelier Vérifier le contenu d'un formulaire.
Les balises et leurs attributs
Toutes ces balises, tous ces attributs, ça fait beaucoup de choses à retenir... Voici un tableau
récapitulatif :
<FORM> Définit un nouveau formulaire
METHOD POST ou GET.
ACTION URL du script à exécuter.
<INPUT> Définit un contrôle.
TYPE Précise le type du contrôle (text, password, radio,
checkbox, submit, reset).
VALUE Précise la valeur par défaut du contrôle s'il peut en recevoir une.
NAME Indique le nom du contrôle.
SIZE Précise la taille du contrôle pour les types text et password.
CHECKED Sélectionne le contrôle par défaut dans le cas de radio ou de checkbox.
<BUTTON> Crée un nouveau bouton.
TYPE RESET, SUBMIT ou BUTTON.
NAME Précise le nom du bouton.
<TEXTAREA> Définit une zone de texte multiligne.
ROWS Indique le nombre de lignes de la zone de texte.
COLS Indique le nombre de colonnes de la zone de texte.
NAME Indique le nom de la zone de texte.
<SELECT> Crée une nouvelle liste de sélection.
NAME Indique le nom de la liste de sélection.
<OPTION> Ajoute une entrée dans la liste de sélection.
VALUE Précise la valeur de l'entrée.
SELECTED Indique que l'entrée est sélectionnée par défaut.
