Les balise oubliées du web

Titre étrange me direz-vous, mais admettons que beaucoup de sites se privent de l'emploi des balises que nous allons voir. Et pour cause, elles ne sont absolument pas indispensables au bon fonctionnement d'un formulaire. Cependant, leur emploi pourra faciliter l'utilisation de vos formulaires par vos visiteurs, alors utilisez-les!

Label

Tout champ d'un formulaire dispose de son propre label. Ils ne sont cependant que rarement identifiés comme tel dans le code HTML. Pour ce faire, on utilise simplement la balise <label> pour encadrer label d'un champ. Voyons un petit exemple :

<p><label>Nom : <input type="text" name"nom" /></label></p>

Vous remarquerez dans cet exemple que la balise <label> englobe le champ et son label. Cela sous entend que ce label et ce champ son associés. Cependant, certaines mise en page ne permettront pas de les associer sur la même ligne de code. Pour remédier à cela, il est possible d'attribuer au champ concerné un id et de l'indiquer dans l'attribut for de la balise <label>. On procédera alors ainsi :

<p><label for="nom">Nom</label></p>
<p><input type="text" name="nom" id="nom" /></p>

L'emploi de cette balise entraînera, pour le navigateur, une association entre le champ et son label. Ainsi le fait de cliquer sur le texte correspondant au champ placera automatique le focus sur le champ concerné.

Fieldset

Grouper les champs d'un formulaire lorsque cela est utile et faisable est un plus non négligeable pour un formulaire. Pour cela nous disposons de deux balises : <fieldset> et <legend>. La première permet d'englober différents champs de votre formulaire portant sur le même type de données. La seconde permet de donner une légende à ce groupe de champs. Elles s'utilisent ainsi :

<fieldset>
  <legend>Nom</legend>
  <p><label>Nom : <input type="text" name="nom" /></label></p>
  <p><label>Pr&eacute;nom : <input type="text" name="prenom" /></label></p>
</fieldset>
<fieldset>
  <legend>Adresse</legend>
  <p><label>Addresse : <textarea name="addresse" ></textarea></label></p>
  <p><label>Code postal : <input type="text" name="postcode" /></label></p>
</fieldset>
...

Vous pouvez voir, dans cet exemple, de quelle manière nous pouvons grouper les différents champs d'un formulaire. Attention tout de même ne pas grouper à outrance et à n'employer ceci que lorsque que c'est nécessaire. Il ne s'agit pas ici de travailler la mise en forme.

Groupes d'options, optgroup

Il s'agit ici de grouper les options d'une liste par catégories. Ceci évitera, par exemple, l'emploi de fausses options comme on peut le voir sur certains sites. Pour cela, il existe la balise <optgroup> qui doit être utiliser directement dans la liste des options d'une liste. Elle dispose d'un attribut label qui permet de définir quel texte sera afficher pour le groupe d'options.

<select name="pays">
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="uk">Royaule Uni</option>
  </optgroup>
  <optgroup label="Am&eacute;rique">
    <option value="us">USA</option>
    <option value="ca">Canada</option>
  </optgroup>
</select>

Ceci produira, pour chaque <optgroup> une ligne dans la liste des options non sélectionnable et qui disposera d'une mise en forme particulière qui l'identifiera clairement comme une entête de catégorie.

Tabindex

Tabindex est un attribut de champs de formulaire. Il sert à définir dans quel ordre les champs devront être parcourut lorsque votre visiteur utilise la touche tab pour naviguer d'un champ à l'autre. Cet attribut se révélera particulièrement utile lorsque les champs n'apparaissent pas dans le même ordre dans le code html de la page et à l'affichage.

Il s'utilise très simplement de la façon suivante :

<fieldset>
  <legend>Nom</legend>
  <p><label>Nom : <input type="text" tabindex="1" name="nom" /></label></p>
  <p><label>Pr&eacute;nom : <input type="text" tabindex="2"  name="prenom" /></label></p>
</fieldset>
<fieldset>
  <legend>Adresse</legend>
  <p><label>Addresse : <textarea name="addresse" tabindex="3"></textarea></label></p>
  <p><label>Code postal : <input type="text" tabindex="4" name="postcode" /></label></p>
  <p><label>Pays : <select name="pays" tabindex="5">
    <optgroup label="Europe">
      <option value="fr">France</option>
      <option value="uk">Royaule Uni</option>
    </optgroup>
    <optgroup label="Am&eacute;rique">
      <option value="us">USA</option>
      <option value="ca">Canada</option>
    </optgroup>
  </select></label></p>
</fieldset>

A propos d'accesskey

Accesskey est également un attribut de champ. Il permet de définir, comme son nom l'indique, une touche d'accès. Comprenez un raccourci clavier. Cependant il est préférable de ne pas l'employer sur un site web. Il pourra éventuellement être utilisé pour une application Intranet. Voyez l'article d'Alsacreations pour en savoir plus à ce propos.

La validation d'un formulaire avec du Java Script

Ici je m'attaque à un problème récurent, réel et qui provoque chez moi un énervement destructeur pour la touche return de mon clavier! Alors je lance ici un appel à tous les développeurs, même amateurs et improvisés, pour le respect de quelques simples règles d'accessibilité dans le développement et le contrôle de saisies d'un formulaire via Java Script.

Après ces quelques mots, entrons maintenant dans le vif du sujet. Beaucoup de formulaires emploient du Java Script pour le contrôle des saisies de l'utilisateur. Ceci apporte son petit lots d'avantages : Évite à l'utilisateur d'attendre un rechargement de la page pour la vérification des données et diminue la bande passante utilisée par le site ou l'application (plutôt à long terme). Malheureusement, la manière dont est employé le code de vérification est souvent gênante (voir bloquante) pour certains utilisateurs.

Je ne vais pas m'étaler ici sur plusieur lignes supplèmentaire d'explication et je vais m'en remettre à un article d'OpenWeb. J'ai déjà donné ce lien dans un précédent post, mais il me parait tellement important que je le redonne ici : Validation des formulaires avec Java Script