FreeGlobes : un formulaire de contact sans tableaux

Dans le script d’annuaire FreeGlobes, les formulaires, que ce soit celui de contact ou ceux des soumissions de sites, sont réalisés à l’aide de tableaux. Or si l’on suit les recommandations du W3C (World Wide Web Consortium, qui s’occupe depuis 1994 de promouvoir les “standards du Web”), les tableaux ne devraient être utilisés que pour formater des données tabulaires et non pour une mise en page.

Selon le W3C, “Outre le fait que cela va à l’encontre de la sémantique du HTML, cela pose d’autres problèmes résidant principalement dans la difficulté de lire ou d’afficher le code des tableaux dans certains contextes (problèmes d’accessibilité, limite des dimensions des navigateurs, …)“.

Je vous propose donc ici un formulaire de contact sans tableaux, réalisé uniquement grâce à notre feuille de style et parfaitement valide.

Les balises à notre disposition :

• fieldset : cette balide permet de regrouper des champs de saisie et rend les documents plus accessibles.
• legend : elle permet de donner un titre à un “fieldset”. Nous ne l’utiliserons pas ici mais nous la retenons pour les formulaires de soumission.
• label : étiquette du champ (nom, email, etc.)
• input : champ de texte

C’est tout ce dont nous avons besoin.

Le code de notre formulaire qui était à l’origine :

<form action="index.php?do=contact" method="post">
	<table>
		<tr>
			<td valign="top">
				<{$lang.email}> :
			</td>
			<td>
				<input type="text" name="email" value="<{$email}>" />
			</td>
		</tr>
		<tr>
			<td valign="top">
				<{$lang.subject}> :
			</td>
			<td>
				<input type="text" name="subject" value="<{$subject}>" />
			</td>
		</tr>
		<tr>
			<td valign="top">
				<{$lang.body}> :
			</td>
			<td>
				<textarea name="body" rows="10" cols="43" ><{$body}></textarea>
			</td>
		</tr>
		<{if $CONFIG.use_antibot}>
			<tr>
				<td>
					<{$lang.security_code}> :
				</td>
				<td>
					<img src="<{$CONFIG.site_url}>/antibot.php" style="border: 0px;" alt="Anti-bot" /><br />
					<input type="text" name="antibotcode" value="" alt="" />
				</td>
			</tr>
		<{/if}>
		<tr>
			<td>
				<input type="hidden" name="action" value="send" />
				<input type="submit" value="OK" />
			</td>
		</tr>
	</table>
</form>

va devenir le suivant :

<form action="index.php?do=contact" method="post">
      <p>Les champs * sont obligatoires</p>
      <fieldset>
              <ul>
                  <li>
                      <label for="email"><{$lang.email}>* :</label>
                      <input id="email" type="text" name="email" value="<{$email}>" />
                  </li>
                  <li>
                      <label for="subject"><{$lang.subject}>* :</label>
                      <input id="subject" type="text" name="subject" value="<{$subject}>" />
                  </li>
                  <li>
                      <label for="body">Message* :</label>
                      <textarea name="body" rows="10" cols="43" ><{$body}></textarea>
                  </li>

                  <{if $CONFIG.use_antibot}>
                  <li>
                      <label for="antibot">&amp;nbsp;</label>
                      <img src="<{$CONFIG.site_url}>/antibot.php" style="border: 0px;" alt="Anti-bot" /></li>
                  <li><label for="message">&amp;nbsp;</label>
                      Recopier le code de sécurité ci-dessous*</li>
                  <li>
                      <label for="antibotcode">&amp;nbsp;</label>
                      <input id="antibotcode"  type="text" name="antibotcode" value="" alt="" />
                  </li>
                  <{/if}>

                  <li>
                      <label for="action">&amp;nbsp;</label>
                      <input type="hidden" name="action" value="send" />
                      <input type="submit" value="Envoyer" />
                  </li>
              </ul>
      </fieldset>
</form>

ce qui donne :

Ce n’est pas très joli mais tout à fait fonctionnel. Il ne nous reste qu’à appliquer quelques styles CSS pour rendre tout ceci agréable à l’oeil :

/*---- notre formulaire sera entouré d'un liseré, son contenu sera à 10px au moins des bords ----*/
#content form {
padding:10px;
border:1px dotted #ccc;
}
/*---- conteneur regroupant les champs ----*/
#content fieldset {
margin: 0;
padding: 0;
}
#content fieldset ul {
padding: 1em 1em 0 1em;
list-style: none;
}
#content fieldset li {
padding-bottom: 1em;
list-style: none;
}
#content fieldset.submit {
border-style: none;
}
/*---- étiquettes ou labels des champs ----*/
#content label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;
float: left;
width: 5em;
}
/*---- champs de texte ----*/
#content input {
padding: 2px;
margin: 2px;
border :1px dotted #ccc;
font:90% Verdana;
color:#666;
}
/*---- zone de texte (message) ----*/
#content textarea {
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}

Résultat :

Vous pouvez retrouver toutes les ressources en ligne pour la construction de ce thème sur cette page.