Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les formulaires

Par celynette (celine moulard), le 16 juin 2011

Voilà, vous avez créer votre site ou page perso et vous aimeriez communiquer avec vos visiteurs: vous voudriez qu'ils puissent répondre à des sondages, poster des commentaires, mais vous ne savez pas par où commencer? Je vous répondrais tout simplement: Formulaire!!!

Dans ce nouveau chapitre, nous allons apprendre (ou réviser) comment on crée un formulaire.

Créer un formulaire

Pour insérer un formulaire dans votre page html, il vous faut une balise. Il s'agit de la balise <form></form>.

Exemple:

Les différents champs de saisie du formulaire devront être écrits entre les balises form.

Si vous devez mettre du texte dans votre formulaire, veuillez à placer celui-ci entre les balises <p></p>. Notez également qu'on ne peut pas mettre une nouvelle balise form à l’intérieur d'un formulaire!

attributs obligatoires de la balise form

method

Lorsqu'on crée un formulaire, nous devons donner deux attributs à notre balise form. Le premier est method. Il indique comment vont être envoyées les données.

method=“get”, envoie les données dans l'url. Etant donné que l'url est limité à 255 caractères cette méthode est très peu employée.

method=“post”, envoie les données du formulaire à l'url indiquée. Cela permet un envoi de données beaucoup plus important.

action

Et le second est action, il va permettre le traitement des données reçues. L'attribut action doit être rempli avec une adresse (de la page ou du programme qui traite les informations).

Exemple:

autres attributs de la balise form

enctype

L'attribut enctype: permet de choisir le format dans lequel les données seront envoyées.

Par défaut la valeur est :

  • enctype=“application/x-www-form-urlencoded” ; Il envoie le contenu du formulaire selon une forme URL de cette forme:

http://mon_serveur.com/cgi-bin/mon-script?formulaire1=valeur1&...

  • enctype=“text/plain” le contenu du formulaire sera retourné en format texte. Cette option est privilégiée quand on décide d'envoyer le contenu du formulaire par e-mail. A utiliser donc avec action=mailto: .
  • enctype=“multipart/form-data” permet l'envoi de fichiers rattachés au message.

accept

L'attribut accept permet de définir quels formats de fichiers sont autorisés à l'envoi et donc de supprimer ceux qui ne seraient pas valides. Pour plus d'informations sur ces différents formats, je vous conseille de lire cette page: http://www.commentcamarche.net/contents/systemes/mime.php3

lang

L'attribut lang de la balise form, permet de spécifier la langue utilisée.

Exemple:

Les champs de saisie

La zone de texte à une ligne

Mais à quoi ça ressemble ça, une zone de texte à une ligne? En voilà un exemple:

Pour insérer un champs de saisie à une ligne, on se sert de la ligne de code: <input type=“text” /> On doit aussi lui ajouter un attribut (sinon ce serait trop facile). Il s'agit de l'attribut name qui va donner un nom à votre champs de saisie (name=“pseudo” , name=“ville”, etc…).

Important: Ne pas oublier d'entourer la balise <input /> par une balise block comme <p></p>. Dans le cas contraire la page ne serait pas valide.

Reprenons l'exemple du pseudo, le code nécessaire pour créer une zone de saisie à une ligne est:

Notez que pour mettre du texte devant le champs de saisie j'ai utilisé la balise <label></label>.

Si vous essayez ce petit bout de code chez vous, vous verrez que lorsqu'on clique sur “votre pseudo”, le curseur de la souris ne se met pas directement dans la case correspondante. En effet, les deux éléments ne sont pas liés! Ça n'a rien de gravissime en soi puisque nous n'avons qu'un seul champ dans notre formulaire! Mais imaginons maintenant que nous voulions créer un formulaire de la taille d'une page A4 (oui nous sommes très curieux), la liaison des deux prend de suite plus de sens!! Ajoutons à cela un design … comment dire … excentrique que je vous parie qu'une fois sur deux le nom sera rentré dans la case adresse ^^. Tout cela est très embêtant pour la personne qui reçoit le contenu du formulaire!

Voilà toute l'importance de LIER le label et la balise input.

Lier le label à sa zone de texte

Mais comment fait-on pour lier les deux?

Pour lier la zone de texte à son label il suffit de donner le même nom au label (grâce à for=”” ) et à la zone de texte (grâce à id=””).

Ce qui donne pour l'exemple précédent:

Maintenant, lorsqu'on cliquera sur “votre pseudo”, le curseur viendra se mettre dans le champs réservé au pseudo. Magique, n'est-ce pas!?

Attribut de taille

On peut aussi donner une taille maximale à la zone de texte! Imaginons que nous laissions la zone de texte “pseudo” sans limite de caractère, je vous parie que certains nous écriraient un roman à la place de leur pseudo! Pour éviter ceci, il existe un attribut à mettre dans la balise input pour limiter à x caractères.

L'attribut est maxlength.

Exemple:

Dans l'exemple, la taille maximale du pseudo est de 15 caractères.

Notez également qu'on peut définir la taille de la zone de saisie pour un design harmonieux grâce à size=””. Tout comme maxlength, on ne note pas d'unité.

La zone de texte multi-lignes

La balise permettant l'ajout d'un champs de saisie à plusieurs lignes est: <textarea></textarea>.

Voici un exemple de champs multi-lignes avec toujours la liaison du champs et de son label:

Ce qui donne:

NB: La taille de la zone de saisie est modifiable par deux manières! Soit en css, soit grâce à des attributs que l'on place directement dans le code. Comme ceci:

  • rows: pour le nombre de lignes
  • cols: pour le nombre de colonnes.

La zone mot de passe

Il arrive, pour s'identifier par exemple, qu'on veuille cacher une partie des informations que l'on rentre dans notre formulaire, on doit donc changer l'attribut “type” dans input! A la place de “text” on met “password” ce qui aura pour effet de cacher les caractères ;)

Exemple, voilà mon code:

Et cela donne:

Les champs de saisie avec options

La liste à dérouler

la liste simple

Une liste à dérouler c'est ça :

Pour créer une telle liste on utilise la balise <select></select> . A l'intérieur de cette balise on va insérer autant de balises <option></option> que la liste comporte de choix. Attention, il faut mettre un attribut à <option> pour identifier le choix du visiteur.

Pour l'exemple précédent, voici le code:

NB: pour sélectionner une valeur par défaut ( la valeur qui apparaitra dans la case avant même d'avoir cocher quoique ce soit), on utilise l'attribut selected=“selected” après l'attribut “value”.

les groupements d'options

Il arrive parfois qu'on ait, par soucis de clarté, envie de trier un peu les choix proposés dans la liste.

On peut créer des regroupements d'options à l'intérieur de la liste, grâce à la balise <optgroup></optgroup>. On doit lui ajouter l'attribut label qui permet de nommer le groupe d'options.

Ne pas confondre avec la balise <label>.

Voici un exemple de code pour ce type de liste:

Ok … mon formulaire est un peu incomplet mais vous voyez le fonctionnement.

Ce qui nous donne:

les cases à cocher

Un formulaire avec des cases à cocher c'est ça:

On utilise ce type de champs quand on laisse au visiteur la possibilité de cocher plusieurs cases. Pour créer un tel champs de formulaire, il faut utiliser la balise <input /> , mais changer son attribut. On a vu que pour un champs à une ligne on avait besoin de type=“text”. Pour des cases à cocher, on utilise type=“checkbox”, et pensez à mettre dans name, le nom du choix possible! Dans l'exemple ci-dessus, name=“tagada” etc…

Voici le code: (toujours sans oublier de lier le champs à son label)

Pour cocher une case par défaut on rajoute: checked=“checked”, après id=””.

Les zones d'options

Contrairement aux cases à cocher, les zones d'options ne permettent qu'un seul et unique choix. Très pratique pour renseigner l'âge du visiteur ou sa région.

On travaille toujours avec <input/>, mais on rajoute cette fois-ci, l'attribut “radio”. La particularité de cet attribut est qu'il fonctionne par groupe, en effet, on ne peut cocher qu'une seule case de ce groupe! A nous donc de définir les groupes!

Comment définir les groupes?

Il suffit de donner à chaque case le même nom, ainsi le formulaire “sait” que telles ou telles cases appartiennent aux même groupe, rendant ainsi le choix multiple impossible.

Voici un exemple de zone d'option avec un seul groupe “age”:

Voici un exemple avec deux groupes différents:

Ce qui donne:

Les raccourcis

Les raccourcis clavier

Reprenons l'exemple du formulaire au design excentrique (chap. II). Nous avons déjà vu l'importance de lier les champs de saisie et son texte. Maintenant, grâce aux touches de raccourcis, nous allons pouvoir parcourir le formulaire plus facilement.

Touche de raccourci, ou “access key” en anglais, est une touche qui permet d'accéder à la partie souhaitée dans le formulaire.

Pour cela, on va pouvoir définir quelle touche du clavier va être le raccourci de tel ou tel champs du formulaire. On utilise l'attribut: accesskey=”” .

Exemple:

Pour utiliser les raccourcis vous devez:

  • Faire la combinaison de atl+maj+raccourci avec windows.
  • Faire la combinaison de ctrl+raccourci pour mac.

Important, chaque navigateur a déjà son lot de raccourcis, pensez à prendre les lettres (ou chiffres) qui ne servent pas à la navigation ;)

La touche tabulation

Après tout, on a pas forcément envie de rajouter des raccourcis partout! Il existe un moyen de parcourir le formulaire avec une seule touche: la touche tabulation. Pour cela, on ajoute un élément dans notre code: tabindex=”“qui va donner un ordre aux champs.

Exemple:

Essayez donc chez vous, avec la touche tabulation, on peut parcourir les 3 champs: pseudo, puis âge et enfin date ;)

Organiser son formulaire

Vous pouvez organiser votre formulaire en partie. Exemple: une partie réservée auc données personnelles, une autre pour les goùts et une dernières sur les impressions du visiteur.

Pour se faire, on utilise la balise <fieldset></fieldset>, qui fonctionne exactement comme optgroup que nous avons vu plus haut.

Attention, grâce à cette balise, les <p></p> ne sont plus obligatoires!

Le nom de chaque groupe se met entre la balise <legend></legend>.

Regardons un peu ce que cela donne:

Et voici ce que verrait votre visiteur:

Je n'ai pas parlé de css ici mais vous pouvez bien entendu personnaliser vos formulaires comme n'importe quelle partie de votre site ;)

Euh …. mais on aurait pas oublié quelque chose sur nos formulaires depuis le début????

Le bouton d'envoi bien sûr !!!!

Les boutons du formulaire

Le bouton envoi

Le bouton d'envoi est à insérer dans une balise <input>, il est de la forme type=“submit”.

Le bouton effacer

Il est aussi insérer dans la balise <input>, mais il est de la forme type=“reset”.

Voilà la partie théorie pour le formulaire est terminée. Dans le prochain chapitre, nous verrons comment envoyer le formulaire ;)