Statistiques| Inscription| Espace privé
Développement Web
Accueil > XHTML > un formulaire inopérant
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mai 2019   >>
Lu Ma Me Je Ve Sa Di
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2



Présentation d’un formulaire
On présente ici un formulaire assez complet au niveau des types de saisie, mais qui n’est malheureusement pas efficient.
 
 
 
 
Présentation d’un formulaire
On présente ici un formulaire assez complet au niveau des types de saisie, mais qui n’est malheureusement pas efficient.
Un formulaire inopérant
 
 
 
 

Le formulaire est l’un des outils XHTML les plus utilisés. Il permet de recueillir des informations qui seront :
- soit exploitées par un langage de programmation sur le serveur (dans la suite nous présenterons le PHP),
- soit envoyées par mail pour un traitement ultérieur.

Entre le moment de la saisie et celui de la réception, on pourra vérifier à l’aide de javascript la validité du format des réponses envoyées (nombre de caractères, type de symboles,...).

Le formulaire présenté ci-après est donné à titre d’exemple afin d’introduire un certain nombre de balises que l’on peut y inclure.
 
Vous y trouverez :

- des zones de saisie <input type ="text" />,
- une zone de mot de passe <input type ="password" />,
- une zone d’options <input type ="radio" />,
- une liste déroulante <select >
<option >... </option> ... </select>,
- des cases à cocher <input type="checkbox"  />,
- une zone de texte multiligne <textarea ></textarea>,
- un bouton de validation <input type="button" />,
- un bouton de réinitialisation <input type="reset" />.

Comme son nom l’indique, ce formulaire ne produira aucun effet lorsque vous validerez les valeurs que vous aurez saisies (seul le bouton de réinitialisation produira un effet en effaçant vos choix). Il est uniquement donné à titre d’exemple de page et de balises html.

 
 
 
 
 
Le code
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html ; charset=iso-8859-1" />
<title>Mon formulaire</title>
</head>

<body>

<form action="">

<p>
Nom : <input type ="text"  name="nom" value="" /><br/>
Prénom : <input type ="text" name="prenom" value="" /><br/>
Mot de passe :  <input type="password" name="secret" />
</p>

<p>
Vous êtes  :
<input type="radio" name="genre" value="un homme" checked="checked" />Un homme
<input type="radio" name="genre" value="une femme" />Une femme
</p>

<p>
<label
for="loisir">
Quel est votre loisir préféré ?
</label>
<select name="loisir"  id="loisir">
 <option selected="selected">informatique </option>
 <option >sport</option>
 <option> cinéma</option>
 <option >musique</option>
</select>
</p>

<p>
Quelle(s) langue(s) parlez-vous ?<br/> 
<input type="checkbox" checked="checked" name="français" value="français" />français
<input type="checkbox" name="anglais"  value="anglais" />anglais
<input type="checkbox" name="allemand"  value="allemand" />allemand
<input type="checkbox" name="espagnol"  value="espagnol" />espagnol
</p>

<p>
Ecrivez ci-dessous un petit texte :</p>

<div>
<textarea
name="projet" rows="5" cols="33">
</textarea>
</div>

<table width="80%" border="1">
 <tr align="center">
  <td >Valider ces informations <br/>
   <input type="button" value="Enregistrer" />
  </td>
  <td >
Recommencer la saisie<br/>
   <input
type="reset"  value="Effacer" />
  </td> 
  </tr>
</table>

</form>

 </body>
 </html>

 
 
 
 
 
Remarque
 
 
 
 

Dans le code ci-dessus, on peut remarquer que contrairement à la remarque générale faite en début de rubrique, plusieurs attributs sont donnés pour décrire la façon dont les éléments vont être affichés dans la fenêtre du navigateur.

Plus précisement, dans la balise  <textarea name="projet" rows="5" cols="33">, les attributs rows="5" et cols="33" déterminent le nombre de lignes et de colonnes de la zone de texte multiligne. Ces attributs sont nécessaires pour la validation W3C et ne peuvent être dissociés de la balise <textarea >.

Par ailleurs :

- dans la balise <table width="80%" border="1">, les attributs width="80%" border="1" déterminent la largeur du tableau ainsi que celle du bord,

- dans la balise <tr align="center">, l’attribut align="center" indique que le texte de cette ligne doit être centré.

Ces attributs quoique gérant l’apparence ne sont pas proscrits pour la validation W3C. Néanmoins nous verrons au chapitre suivant qu’ils peuvent être remplacés par des éléments de style CSS ; ils ne sont utilisés ici que pour avoir un rendu à peu près correct.

 
 
 
 
 
Le résultat
 
 
 
 

Nom :
Prénom :
Mot de passe :

Vous êtes : Un homme Une femme

Quelle(s) langue(s) parlez-vous ?
français anglais allemand espagnol

Ecrivez ci-dessous un petit texte :

Valider ces informations
Recommencer la saisie