Les formulaires

Que serait une page XHTML si elle ne permettrait pas d'interagir avec son visiteur ?
Une page XHTML sans formulaire sans doute, ai-je répondu à Fulgence qui n'a pas apprécié.

Les formulaires en XHTML son simple en théorie mais fastidieux à écrire, c'est pourquoi, une fois n'est pas coutume au lieu de beau grand et long discours, je vous livre un formulaire, tiens c'est celui de fulgence en détail avec un commentaire à coté pour que vous puissiez vous y retrouver... désolé mais je deviens paresseux quand il s'agit de formulaire. Mais j'ai quand même pris le temps de rédiger un tableau récapitulatif.

balise de description logique d'un formulaire

balise	type	description	attributs utiles
balise	type	description	attributs utiles
<form>	bloc	définition logique d'un formulaire. 3 attributs sont obligatoire pour toute balise <form> id : qui permet d'individualisé vos différents formulaire sur la même page; action : où l'on indique l'adresse d'envoie de votre formulaire; method : où l'on indique la méthode choisie pour envoyer votre formulaire. Il en existe 2 : la méthode get et la méthode post; Enfin, l'attribut enctype permet de définir le type de donnée envoyer, cette attribut est très important si vous désirez envoyer des images car par défaut sa valeur est text/plain, ce qui ne permet pas d'envoyer des images. Dans ce dernier cas il faudra expliciter enctype et lui donner une valeur égale à multipart/form-data	action, method, enctype
<fieldset>	bloc	permet le regroupement en zone logique d'un formulaire
<legend>	ligne	sert de titre pour <fieldset>
<label>	ligne	permet de fournir de l'information sur un champs particulier d'un formulaire. Il pointe vers un champs unique référencer à l'aide d'un attribut id à l'aide de l'attribut for qui prend pour valeur la valeur de l'id.	for
<input />	ligne	zone de saisie ou de selection dans un formulaire. La zone de saisie est définie par la valeur de l'attribut type. type accepte comme valeur : text, le défaut pour saisir du texte sur une ligne; password, pour saisir un texte caché; radio, pour choisir une option parmi plussieurs choix; checkbox, pour indiquer plusieurs choix dans une liste de possibilité; file, pour télécharger un fichier vers un servuer distant; hidden, la balise ainsi que c'est atribut sont cachés. Ils n'apparaîssent pas à l'écran;	type, value, checked
<select>	ligne	zone logique de choix, par défaut le choix est unique dans une liste de posibbilité définit par<option />. Mais, en définissant l'attribut size et multiple on peu augmenter, respectivement, le nombre de choix visible et le nombre de choix effectué dans un élément <select>	size, multiple
<option />	ligne	élément d'une liste de choix définit par <select>	value, selected
<optgroup>	ligne	définition logique d'un groupe d'<option /> dont le nom est définit dans son unique attribut label	label
<textarea>	ligne	zone de saisie de plusieurs lignes. l'attribut rows sert à indiquer le nombre de lignes utilisées et l'attribut cols à indiquer le nombre de "colonnes" ou largeur de la zone de saisie	rows, cols
		Reliquat important du HTML, permet de désigner le nom d'une valeur décrite par une balise de formulaire. C'est la valeur de name et non celle de id qui est transmise lors de l'envoi de votre formulaire. À prohiber dans les balises <form>, <fieldset>, <legend>, <label>, <optgroup>, <option>	name
		Permet d'indiquer le sens de remplissage des différents champs d'un formulaire. À prohiber dans les balises <form>, <fieldset>, <legend>, <label>, <optgroup>, <option>	tabindex
		Permet d'indiquer le fait que le champs est désactivé, la valeur qu'il contient ne peut être modifié par l'utilisateur. À prohiber dans les balises <form>, <fieldset>, <legend>, <label>, <optgroup>	disabled
		Permet d'indiquer le fait que la balise <input /> est sélectionné, la sélection peut être modifié par l'utilisateur.	checked
		Permet d'indiquer le fait que la balise <option /> est sélectionné, la sélection peut être modifié par l'utilisateur.	selected

Exemple

Voici la source du code du formulaire du site de Zeng.

Remarquer l'utilisation sur tous les champs des attributs name et id.

• l'attribut for de <label> pointe vers l'id du champs.
• Mais le formulaire envoie comme nom de variable la valeur de l'attribut name.
• la balise <form> prend uniquement l'attribut id.

Les attributs checked et selected ne prennent pour valeur que leur nom respectivement checked et selected

<form action="mailto:fulgencezeng@zeng.com" method="post" id="contactezmoi" >
<fieldset>
<legend>Présentez-vous :</legend>
<div>
<label for="nom">nom :</label>
<span><input type="text" name="nom" id="nom" tabindex="1" /></span>
</div>
<div>
<label for="prenom">prénom :</label>
<span><input type="text" name="prenom" id="prenom" tabindex="2" /></span>
</div>
<div>
<label for="email">e-mail :</label>
<span><input type="text" name="email" id="email" tabindex="3" /></span>
</div>
<div>
<label for="m">sexe :</label>
<span>
<label for="m">homme</label> 
<input type="radio" name="sex" id="m" value="homme" class="checkbox" />
<label for="f">femme</label> 
<input type="radio" name="sex" id="f" value="femme" class="checkbox" />
</span>
</div>
<div>
<label for="win">votre OS :</label>
<span>
<label for="win">Windows</label> 
<input type="checkbox" name="os" id="win" value="win" class="checkbox" />
<label for="linux">Linux</label> 
<input type="checkbox" name="os" id="linux" value="linux" class="checkbox" />
<label for="mac">Macinstosh</label> 
<input type="checkbox" name="os" id="mac" value="mac" class="checkbox" />
</span>
</div>
</fieldset>
<fieldset>
<legend>laissez-moi votre message :</legend>
<div>
<label for="categorie">selectionnez un titre :</label>
<span>
<select name="categorie" id="categorie" tabindex="5">
<optgroup label="commentaire sur le site">
<option value="excellent" selected="selected">excellent</option>
<option value="genial">génial</option>
<option value="pmf">peut mieux faire</option>
<option value="bof">bof</option>
<option value="nulle">nulle</option>
</optgroup>
<optgroup label="poster une blague">
<option value="devinette">devinette</option>
<option value="rebus">rébus</option>
<option value="pblague">petite blague</option>
</optgroup>
<optgroup label="autre">
<option value="site">soumettre un site</option>
<option value="album">critique du dernier album écouté</option>
<option value="film">critique du dernier film vu</option>
</optgroup>
</select>
</span>
</div>
<div>
<label for="message">saisissez votre texte :</label>
<span><textarea name="message" id="message" tabindex="6" rows="10" cols="30"></textarea></span>
</div>
<div>
<span><input type="submit" name="submit" id="submit" value="envoyez" class="button" />
<input type="reset" name="reset" id="reset" value="effacer" class="button" /></span>
</div>
</fieldset>
</form>

le formulaire final se trouvent sur la page final de fulgence. Et puis voilà c'est tout c'est fini...vraiment ?