Les formulaires en HTML et CSS

HTML & CSS

Les formulaires interactifs permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internaute. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script de page web dynamique tel que PHP.

Créer un formulaire

Pour insérer un formulaire dans votre page XHTML, c'est la balise
<form></form> que vous utilisez.
C'est la balise principale du formulaire.

La structure de base.

Code : HTML

Exemple : Copier le code

					
<p> paragraphe avant le formulaire</p>
	<form>
	   <p>paragraphe à l'intérieur du formulaire</p>
	</form>
	<p>paragraphe après le formulaire</p>

Il faut mettre des balises de type block (comme <p></p>) à l'intérieur de votre formulaire si vous avez besoin d'écrire du texte.
Un formulaire est fait pour être envoyé. Si un visiteur tape un commentaire dans votre formulaire.Vous devez le recevoir pour que vous puissiez savoir ce qu'il pense de votre site.

Mai comment envoyer le texte rentré par le visiteur, voulez vous le recevoir pour vous seul ou que tout que le monde puisse le voir. Ce qui revient à faire un livre d'or pour votre site.
Pour répondre à cette question 2 attributs sont à indiquer à la balise <form> .

method : attribut qui indique par quel moyen les données vont être envoyées.
Il existe 2 moyens pour envoyer des données sur le Web :
1. method="get" : c'est une méthode peu adaptée, vu qu'elle est limitée à 255 caractères. Les informations seront envoyées dans l'adresse de la page (http://...).
  Il est recommandé d'utiliser l'autre méthode :
2. method="post" : La plus utilisée pour les formulaires, on peut rentrer un grand nombre d'informations
action : c'est l'adresse de la page ou du programme qui va traiter les informations. Elle se chargera de vous envoyer un mail si vous voulez, ou bien enregistrer le message dans une base de données.

Cela ne peut pas se faire en XHTML / CSS, on utilisera un autre langage: le PHP.

Pour method, je vais mettre la valeur "post".
Pour action, je vais utiliser une page spéciale en PHP ("message.php"). Elle sera appelée lorsque le visiteur cliquera sur le bouton "Envoyer le formulaire".
Code : HTML

Exemple : Copier le code

					
<form method="post" action="message.php">
   <p>Texte à l'intérieur du formulaire</p>
</form>

Pour le moment, ne vous préoccupez pas de la page PHP ce n'est pas une priorité.
Ce qu'on va apprendre pour le moment c'est insérer des zones de texte, des boutons et des cases à cocher dans votre page Web.

Chapitre Les zones de saisie

Les balises XHTML qui nous permettent de rentrer du texte dans un formulaire sont 2 zones de texte différentes :

La zone de texte à une ligne : on ne peut écrire qu'une seule ligne à l'intérieur . Elle sert pour des textes courts, exemple : "votre pseudo"
La zone de texte multi ligne : cette zone de texte permet d'écrire plusieurs lignes, comme par exemple : "un commentaire long"

Zone de texte à une ligne

Pour insérer une zone de texte à une ligne, on va utiliser la balise <input />.
Avec son attribut type qui va changer selon les cas.
<input type="text" />
Un autre attribut très important : c'est le nom de la zone de texte. Qui vous permettra (dans le langage PHP) de reconnaître que tel texte est le pseudo du visiteur, tel texte est son mot de passe etc...
On fait ça par l'attribut name.
Par exemple pseudo :
<input type="text" name="pseudo" /> Code : HTML

Exemple : Copier le code

					
<form method="post" action="message.php">
	 <p><input type="text" name="pseudo" /></p>
</form>

Les étiquettes ( labels)

Le label, il sert d'étiquette pour guider le visiteur sur la zone de texte en lui expliquant qu'il doit par exemple rentrer son psudo.
On utilise la balise <label> qui entoure le libellé :
Code : HTML

Exemple : Copier le code

				
<form method="post" action="message.php">
   <p>
 <label>Votre pseudo</label> : <input type="text" name="pseudo" />
   </p>
</form>

Pour lier le label avec la zone de texte. Il faut donner un nom à la zone de texte, avec l'attribut id (que l'on peut utiliser sur toutes les balises).
Code : HTML

Exemple : Copier le code

					
<form method="post" action="message.php">
   <p>
	   <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />
   </p>
</form>
Cliquer sur le texte "Votre pseudo" :  le curseur se place automatiquement dans la zone de texte correspondante.
On a "lié" le label avec sa zone de texte.

Attributs supplémentaires

Il existe d'autres attributs pour la balise <input />.
L'attribut value : il donne une valeur par défaut à<input />
Exemple :
<input type="text" name="pseudo" value="votre pseudo" />
L'attribut size la largeur de la zone de texte.
L'attribut maxlength définit le nombre maximal de caractères que l'on peut mettre dedans.
Autre chose : vous pouvez r ainsi que.
Exemple :
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="pseudo">Votre pseudo :</label>
	   <input type="text" name="pseudo" id="pseudo" value="carabde" size="30" maxlength="10" />
   </p>
</form>

Zone de mot de passe

Pour faire de la zone de texte une zone "mot de passe"on change l'attribut type de : <input />. type="password"

Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="pseudo">Votre pseudo :</label>
	   <input type="text" name="pseudo" id="pseudo" value="pseudo" />
	   <br />
	   <label for="passe">Votre mot de passe :</label>
	   <input type="password" name="passe" id="passe" />
	   </p>
</form>

Zone de texte multi ligne

On utilise la balise <textarea></textarea>
Comme à tout élément du formulaire, il faut lui donner un nom avec name, et utiliser un label qui explique de quoi il s'agit.
Code XHTML :

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="avis">Mettez votre avis ici concernant mon site?</label><br />
	   <textarea  name=" Avis " id=" Avis "></textarea>
   </p>
</form>

On peut modifier la taille du textarea de 2 façons différentes :

1. En CSS : On appliquant les propriétés CSS width et height au textarea. ( ne marche pas sur Internet Explorer.)
2. En ajoutant les attributs rows et cols à la balise <textarea>.

Le premier indique le nombre de lignes du textarea, et le second le nombre de colonnes.
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="avis"> Mettez votre avis ici concernant mon site </label><br />
	   <textarea name="avis" id="avs" rows="10" cols="50"></textarea>      
   </p>
</form>

On peut mettre la valeur par défaut du textarea comme ceci :
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
<p>
   <label for="avis">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
   <textarea name="avis" id="avis" rows="10" cols="50">
   Votre site ?  Mais ! Il est  génial ! </textarea>
</p>
</form>

Elements d'options

En plus des zones de saisies, le XHTML nous offre :
Les cases à cocher.
Les zones d'options.
Les listes déroulantes.
Vous avez déjà vu tous ces éléments, mais comment on les crée en XHTML !

Les cases à cocher

La balise à utiliser c'est <input />
On change la valeur de son attribut type :
<input type="checkbox" name="choix" />
Rajoutez un <label>, et voilà!
Code : HTML

Exemple : Copier le code

>					
<form method="post" action="traitement.php">
   <p>
	   Cochez les informations  vous concernant :<br />
	   <input type="checkbox" name="homme" id="homme" />
<label for="homme">Homme</label><br />
	   <input type="checkbox" name="femme" id=" femme " />
	   <label for=" femme "> Femme </label><br />
 <input type="checkbox" name="age1" id="age1" />
 <label for="age1">age supérieur ou égal à 18ans </label><br />
<input type="checkbox" name="age2" id="age2" />
<label for="age2">age inférieur à 18ans </label><br />
		  </p>
</form>

Vous pouvez aussi cliquer sur le texte juste à côté.
N'oubliez pas aussi de donner un nom à chaque case à cocher.
L'attribut checked="checked" : vous permet de cocher la case par défaut.
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   Cochez les informations  vous concernant :<br />
	   <input type="checkbox" name="homme" id="homme" />
	   <label for="homme">Homme</label><br />
	   <input type="checkbox" name="femme" id=" femme " />
<label for=" femme "> Femme </label><br />
 <input type="checkbox" name="age1" checked="checked" id="age1" />
 <label for="age1">age supérieur ou égal à 18ans </label><br />
<input type="checkbox" name="age2" id="age2" />
<labelfor="age2">age inférieur à 18ans </label><br />
		  </p>
</form>

Les zones d'options

Les zones d'options permettent de faire un choix (et un seul) parmi une liste de possibilités :
On utilise toujours <input />, avec la valeur "radio" pour l'attribut type.
La différence avec les cases à cocher, les zones d'options fonctionnent par "groupe".
Un groupe d'options a le même nom et un attribut value différent à chaque fois. Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   Cochez les informations  vous concernant :<br />
	   <input type="radio" name="sexe" value="homme" id=" homme " />
	   <label for="homme">Homme</label><br />
	  <input type="radio" name="sexe" value="femme" id=" femme " />
<label for="femme"> Femme </label><br />
 <input type=" radio" name="age" value="age1"  id="age1" />
 <label for="age1">age supérieur ou égal à 18ans </label><br />
<input type=" radio" name="age" value="age2" id="age2" />
<label for="age2">age inférieur à 18ans </label><br />
		  </p>
</form>

Les listes déroulantes

Les listes déroulantes permettent aussi de faire un choix entre plusieurs possibilités :
On utiliser la balise <select></select> qui indique le début et la fin de la liste déroulante.
Avec l'attribut name pour donner un nom à la liste. Par exemple "pays" :
<select name="pays">.

à l'intérieur du <select></select>, on met plusieurs balises
<option></option> (une par choix possible).
Puis un attribut value pour identifier ce que le visiteur a choisi.
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="pays">Dans quel pays habitez-vous ?</label><br />
	   <select name="pays" id="pays">
			<option value="espagne">Espagne</option>
		   <option value="canada">Canada</option>
			<option value="france">France</option>
		   <option value="maroc">Maroc</option>
		   <option value="usa">USA</option>
		   <option value="italie">Italie</option>
	   </select>
   </p>
</form>

Et comme le checked="checked" ici, on utilise à la place le selected="selected"(ne fonctionne pas avec mozella firefox).
Il nous permet de sélectionner une valeur par défaut :
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="pays">Dans quel pays habitez-vous ?</label><br />
	   <select name="pays" id="pays">
			<option value="espagne">Espagne</option>
			<option value="france">France selected="selected"</option>
			<option value="usa">USA</option>
		   <option value="canada">Canada</option>
		   <option value="maroc">Maroc</option>
		   <option value="algerie">Algérie</option>
	   </select>
   </p>
</form>

On peut créer des groupes d'options à l'intérieur de la liste, par la balise <optgroup></optgroup>. En lui ajoutant l'attribut label qui permet de donner un nom au groupe (à ne pas confondre avec la balise <label>).
Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ? Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="pays">Dans quel pays habitez-vous ?</label><br />
	   <select name="pays" id="pays">
		   <optgroup label="Europe">
			   <option value="france">France</option>
			   <option value="espagne">Espagne</option>
			   <option value="italie">Italie</option>
			   <option value="royaume-uni">Royaume-Uni</option>
		   </optgroup>
		   <optgroup label="Amérique">
			   <option value="canada">Canada</option>
			   <option value="etats-unis">Etats-Unis</option>
				</optgroup>
			<optgroup label="Afrique">
			   <option value="maroc">Maroc</option>
			   <option value="algerie">Algérie</option>
		   </optgroup>
			</optgroup>
		   <optgroup label="Asie">
			   <option value="chine">Chine</option>
			   <option value="japon">Japon</option>
		   </optgroup>
	   </select>
   </p>
</form>

Définir un ordre de tabulation

Vous savez , on peut se déplacer dans un formulaire grâce à la touche "Tab" (tabulation) de votre clavier. A chaque fois qu'on appuie sur, on va au champ suivant.
Et si on fait Maj + Tab, on retourne au champ précédent.

Il faut dire en XHTML dans quel ordre on doit se déplacer dans le formulaire.
Par exemple, après le champ "nom" si je tape Tab je dois tomber sur le champ "prénom", puis sur "adresse" etc...

On utilise l'attribut tabindex qui peut être ajouté sur toutes les balises du formulaire. On doit lui affecter un nombre unique pour valeur (Chaque champ du formulaire doit avoir un nombre différent).
Les nombres indiquent dans quel ordre on se déplace dans le formulaire : le n°1, puis le n°2, le n°3 etc...

On n'est pas obligé de mettre des nombres qui se suivent. Il est conseillé de laisser des "espaces" entre les nombres au cas où vous auriez besoin de rajouter plus tard des champs.
Donc, il est possible de compter par 10 : n°10, n°20, n°30 etc... et si plus tard on a besoin de créer un champ n°13, il y'auras aucun problème :)
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <p>
	   <label for="nom">Votre nom ?</label><br />
	   <input type="text" name="nom" id="nom" tabindex="10" /><br />
	   <label for="prenom">Votre prénom ?</label><br />
	   <input type="text" name="prenom" id="prenom" tabindex="20" /><br />
	   <label for="email">Votre e-mail ?</label><br />
	   <input type="text" name="email" id="email" tabindex="30" /><br />
		 <input type="radio" name="sexe" value="homme" id=" homme " tabindex="40"  />
		 <label for="homme">Homme</label><br />
		<input type="radio" name="sexe" value="femme" id=" femme " tabindex="50" />
		<label for="femme"> Femme </label><br />
		<input type="radio" name="age" value="age1"  id="age1" tabindex="60"  />
		<label for="age1">age supérieur ou égal à 18ans </label><br />
		<input type="radio" name="age" value="age2" id="age2" tabindex="70" />
		<label for="age2">age inférieur à 18ans </label><br />
	   <label for="pays">Votre pays </label><br />
	   <select name="pays" id="pays" tabindex="80">
		   <optgroup label="Europe">
			   <option value="france">France</option>
			   <option value="espagne">Espagne</option>
			   <option value="italie">Italie</option>
			   <option value="royaume-uni">Royaume-Uni</option>
		   </optgroup>
		   <optgroup label="Amérique">
			   <option value="canada">Canada</option>
			   <option value="etats-unis">Etats-Unis</option>
			</optgroup>
			<optgroup label="Afrique">
			   <option value="maroc">Maroc</option>
			   <option value="algerie">Algérie</option>
		   </optgroup>
			</optgroup>
		   <optgroup label="Asie">
			   <option value="chine">Chine</option>
			   <option value="japon">Japon</option>
		   </optgroup>
	   </select>
   </p>
</form>

Par défaut, si aucun tabindex n'est mis, le navigateur dira que le premier champ est celui tout en haut, et que le dernier celui tout en bas de la page.
Organiser le formulaire en plusieurs zones
Ce qui permet de :
Rendre le formulaire plus clair, donc plus accessible.
Améliorer la conception de votre formulaire.
Si vous avez un formulaire assez gros (et c'est le cas en général), il est facile que le visiteur se perde. En XHTML il est possible de grouper plusieurs champs ayant un thème entre eux.

On utilise la balise <fieldset></fieldset> pour délimiter un groupe de champs.
A l'intérieur de cette balise, vous mettrez les champs (<input /> entre autres...) et la balise : <legend></legend>. Pour donner le nom du groupe.
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
   <fieldset> 
	   <legend>Vos coordonnées</legend> <!-- Titre du fieldset --> 
	   <label for="nom">Votre nom ?...</label><br /> 
	   <input type="text" name="nom" id="nom" tabindex="10" />
	   <br /><label for="prenom">Votre prénom ?</label><br /> 
	   <input type="text" name="prenom" id="prenom" tabindex="20" /><br /> 
		<label for="email">Votre e-mail ?</label><br /> 
	   <input type="text" name="email" id="email" tabindex="30" /><br /> 
   </fieldset> 
	<fieldset> 
	   <legend>Votre loisir </legend> <!-- Titre du fieldset --> 
		<p> 
		   Choisissez votre loisir:<br /> 
		   <input type="radio" name="loisir" value="sport" id="riche" tabindex="40" /> 
		   <label for="riche">Sport</label><br /> 
		   <input type="radio" name=" loisir " value="musique" id="musique" tabindex="50" />
		   <label for="musique">Musique</label><br /> 
		   <input type="radio" name=" loisir " value="chasse" id="chaset" tabindex="60" /> 
			<label for="chasse">Etre<strong>encore</strong> Chasse</label><br />
		   <input type="radio" name=" loisir " value="autre" id="autre" tabindex="70" /> 
		   <label for="autre">Autre...</label><br /> 
	   </p> 
	   <p> 
		   <label for="precisions">Si "Autre", veuillez préciser :</label><br /> 
		   <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80">
		   </textarea> 
	   </p> 
   </fieldset> 
</form>

A l'intérieur des <fieldset></fieldset>, l'utilisation de balises
<p> </p> n'est plus obligatoire .
Mai avec du CSS qu'est ce que ça va donner ?
Code : CSS

Exemple : Copier le code

					
input, textarea{
	   font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
	}
	input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */{
	   background-color: #FDDF99; 
	}
	label{
	   color: blue; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
	}
	legend /* On met un peu plus en valeur les titres des fieldset */{
	   font-family: "Arial Black", Arial, Georgia, "Times New Roman", serif; 
	   color: #FF00F3; 
	   font-weight: bold; 
	}
	 fieldset{
	   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
	   background-color: #FFFDCC;
	}

On a réutilisé un pseudo format ":focus" qui permet d'appliquer des styles CSS lorsqu'un objet est sélectionné. On s'en sert pour mettre un fond jaune aux champs lorsqu'on clique dessus ( ce qui donne un effet assez intéressant )
Mai, le pseudo format ":focus" ne marche pas sur Internet Explorer.
Nous avons vu la plupart des éléments que l'on peut intégrer dans un formulaire, mais il manque le bouton de validation.

Encore on va utiliser la balise <input />
C'est la balise à tout faire !
1. Le bouton d'envoi : il déclenche l'envoi du formulaire. Il se crée avec l'attribut type="submit". On peut ajouter un attribut value pour changer le texte à l'intérieur du bouton.
<input type="submit" />
2. Le bouton de remise à zéro : il remet à zéro automatiquement toutes les valeurs du formulaire. On utilise l'attribut type="reset"
<input type="reset" />
Code : HTML

Exemple : Copier le code

					
<form method="post" action="traitement.php">
	<fieldset> 
	   <legend>Vos coordonnées</legend> <!-- Titre du fieldset --> 
	   <label for="nom">Votre nom ?...</label><br /> 
	   <input type="text" name="nom" id="nom" tabindex="10" /><br /> 
		<label for="prenom">Votre prénom ?</label><br /> 
	   <input type="text" name="prenom" id="prenom" tabindex="20" /><br /> 
		<label for="email">Votre e-mail ?</label><br /> 
	   <input type="text" name="email" id="email" tabindex="30" /><br /> 
   </fieldset> 
   <fieldset> 
	   <legend>Votre loisir </legend> <!-- Titre du fieldset --> 
	   <p> 
		   Choisissez votre loisir:<br /> 
		   <input type="radio" name="loisir" value="sport" id="riche" tabindex="40" /> 
		   <label for="riche">Sport</label><br /> 
		   <input type="radio" name=" loisir " value="musique" id="musique" tabindex="50" /> 
		   <label for="musique">Musique</label><br /> 
		   <input type="radio" name=" loisir " value="chasse" id="chaset" tabindex="60" /> 
		   <label for="chasse">Etre <strong>encore</strong> Chasse</label><br /> 
		   <input type="radio" name=" loisir " value="autre" id="autre" tabindex="70" />  
		   <label for="autre">Autre...</label><br /> 
	   </p> 
	   <p> 
		   <label for="precisions">Si "Autre", veuillez préciser :</label><br /> 
		   <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80">
		   </textarea> 
	   </p> 
   </fieldset> 
   <p> 
	   <input type="submit" value= "Envoyer"/> <input type="reset" value= "Annuller"/> 
   </p> 
 </form>

Lorsque vous cliquez sur "Envoyer", le formulaire vous amène donc à une page "php", que vous ne savez pas faire.
C'est là la limite : on sait construire un formulaire en XHTML / CSS, mais pour traiter les données (les enregistrer ou les envoyer par mail) on est obligés de passer par le langage PHP... dont nous allons parler dans le cours qui va suivre.

Voila! si vous avez suivi ce cours depuis le premier chapitre jusqu’a ce chapitre, vous auriez acquis les bases des connaissances nécessaire pour créer votre site par vous même; maintenant il ne vous reste qu'éditer vos pages web et préparer les dossiers de votre site pour le mettre en ligne. C'est l'objet du chapitre suivant

Par carabde 10 mars 2014

chapitre précédent

chapitre suivant

Afficher des formulaire en HTML

Cours HTML & CSS

Plus de langage HTML ET CSS

Plus...

Nos références