Il ne vous est jamais arrivé de remplir un long formulaire pour, par exemple, commander un voyage ou un vol et ne pouvoir le valider parce que le clic sur le bouton de validation du formulaire ne produit aucun résultat ? C’est ce qui m’est arrivé il y a quelques semaines de celà… C’est vrai que je suis passé de PC à Mac et que je fais maintenant partie d’une minorité. L’accessibilité prends dans ce cas tout son sens. J’ai eu beau essayer avec Safari, Firefox, Opéra, Google Chrome, rien n’y a fait. Bref si je n’avais pas eu un PC pas loin pour passer ma commande avec Internet Explorer cette compagnie aérienne aurait perdu un client.

Pourquoi ce formulaire ne fonctionnait pas , Tout bonnement parce que les personnes qui sont auteurs du code ont préféré se servir de javascript pour la validation des données plutôt que d’opter pour la solution html du bouton de type submit (button ou input) . Le script utilisé ne prenant visiblement en charge que certains navigateurs dans un seul environnement (windows), il est impossible pour l’internaute de valider les données qu’il a entré minitieusement dans les 45 champs du formulaire.

Le problème ne se pose pas uniquement lorsqu’on travaille avec os Mac ou Linux comme environnement, il se pose également pour quiconque se sert d’un autre navigateur qu’Internet Explorer pour commander, par exemple, sur un site de voyages qui a le monopole du transport ferroviaire…

Comment faire pour ne pas exclure des clients potentiels de votre site ?

Construisons notre formulaire en plusieurs étapes :

 
1° étape :  la construction du formulaire en html

La balise <form> :  elle définit un formulaire dans une page web.

Ses attributs :

* method

–  method= »post », indique que les données sont stockées dans le corps de la requête,  le contenu du formulaire est envoyé au serveur en tant que bloc de données pour y être traité.

– method= »get », indique que les données sont codées dans l’url,  le contenu du formulaire est juxtaposé à l’adresse URL

* action

– action= »url », action indique l’adresse d’envoi

* enctype

Ce paramètre ne peut être utilisé qu’accompagné par la méthode post. Il définit le type d’encodage des données, par exemple :

– enctype= »application/x-www-form-urlencoded »,  encode le contenu du formulaire selon une forme url

– enctype= »text/plain », le contenu du formulaire est retourné en format texte.t texte lisible par le destinataire; option accompagnée le plus souvent de ACTION=mailto:

– enctype= »multipart/form-data », permet d’expédier un fichier attaché au message.

La balise <fieldset> : elle regroupe des éléments dans un formulaire, par exemple état civil, adresse, etc.

Ses attributs : 

– Tous les attributs habituels des autres balises (id, class, title, etc.)

<legend>

Les balises des champs des formulaires :

<input>

Cette balise dans ces différents type permet l’entrée des données, qu’elles soient libres (text), soumises à un choix (radio) ou pour la validation du formulaire (submit) 

Ses attributs de type : text, password, radio, checkbox, submit, reset, image, hidden, file, button.
Ses autres attributs : name, value, checked, disabled, readonly, size, maxlength, src (pour les input de type image), alt (pour les input de type image).

<textarea>

Comme son nom l’indique il s’agit d’une zone dans laquelle on peut saisir du texte (sur plusieurs lignes).

Ses attributs : name, rows, cols, disabled, readonly.

<select>

La balise <select> permet de présenter plusieurs options de choix sous forme d’une liste déroulante.

<option>

La balise <option> permet de définir une option dans un menu (select).

<optgroup>

Les options de même type peuvent être regroupées dans un groupe d’options.

<button>

La balise button (avec l’attribut type= »submit ») permet de valider les formulaires comme un input de type submit, tout en ayant la particularité de permettre d’insérer du code html (comme du simple  texte ou une image) entre sa balise ouvrante et sa balise fermante, ce qui laisse beaucoup plus de possibilités qu’un simple champs input.  Mais attention, dans Internet Explorer ce qui est compris entre <button> et </button> sera interprété comme étant la valeur du bouton, même si un attribut value indique une valeur différente, de plus internet explorer ne retournera pas exactement ce qui est entre les deux balises mais une interprétation de ce qui se trouve entre les deux balises.

Ses attributs de type : button, submit, reset.
Ses autres attributs : name, value, typename.

Concernant le type reset pour les boutons, qu’ils soient construit avec la balise <input> ou la balise <button>, l’utilité de cette option me semble pour le moins limitée, pourquoi voudrait-on remettre à zéro les champs d’un formulaire qu’on vient juste de remplir ? Ne risque-t-on pas d’effacer malencontreusement toutes les données saisies ? Un exemple parlant : essayez de remplir ce formulaire et de le valider ensuite… Sur quel bouton avez-vous été tenté de cliquer ?

L’attribut name des champs de formulaire permet d’identifier chacun des éléments du formulaire et est indispensable pour récuperer les données du formulaire (cet attribut est déprécié uniquement sur les balises suivantes : a, applet, form, frame, iframe, img, et map). L’ajout d’un id à chaque élément est nécessaire pour rattacher chaque champs à son label. Id ne fait pas double emploi avec name

La balise <label>

Littéralement, label signifie étiquette. Cette balise permet de rattacher un nom au champs d’un formulaire, elle permet également d’agrandir la zone de focus ou de clic, très pratique notamment pour les boutons radio ou des cases à cocher dont la zone de clic est réduite.

attribut : for

Un exemple de formulaire html conçu en suivant ces recommandations :

<form action="inscription.php" method="post">
     <fieldset class="etat-civil">
          <legend>Etat civil</legend>
         <label for="nom">Nom</label>
         <input id="nom" name="nom" type="text" /><br />
         <label for="prenom">Prénom </label>
         <input id="prenom" name="prenom" type="text" /><br />
         <label for="date-de-naissance">Date de naissance</label>
         <input id="date-de-naissance" name="date-de-naissance" type="text" />
     </fieldset>
     <fieldset class="adresse">
          <legend>Adresse</legend>
          <label>Rue</label>
          <input id="rue" name="rue" type="text" /><br />
          <label>Code postal</label>
          <input id="code-postal" name="code-postal" type="text" /><br />
          <label>Ville</label>
          <input id="ville" name="ville" type="text" />
     </fieldset>
     <button onclick="alert(this.value)">Valider</button>

Les éléments de formulaire sont de type inline, sauf les éléments <form> et <fieldset> qui sont de type bloc.

Selon les besoins de présentation du formulaire on pourra intercaler des éléments <div> ou <p> pour structurer le formulaire (le débat reste ouvert sur l’utilisation de l’une ou l’autre des balises)

2° étape : Ne pas oublier les bonnes pratiques !

• En cas de rejet des données saisies dans un formulaire, les champs contenant les données rejetées sont indiqués à l’utilisateur.
• En cas de rejet des données saisies dans un formulaire, toutes les données saisies peuvent être modifiées par l’utilisateur.
• Les champs obligatoires des formulaires sont indiqués.
• En cas de rejet des données saisies dans un formulaire, les raisons du rejet sont indiquées à l’utilisateur.
• Les étapes des processus comportant des interactions multiples (commande, formulaires répartis sur plusieurs pages, etc.) sont décrites et imprimables avant leur commencement.

La liste exhaustive des bonnes pratiques pour les formulaires est consultable sur le site des bonnes pratiques Opquast

3° étape : Utilisation du javascript : Ajout de fonctionnalités et vérification du format des données.

Javascript est défini comme une surcouche à html et doit donc être distinct de ce dernier selon la règle de séparation du contenu, de la forme et des comportements. Un formulaire pour être accessible doit pouvoir fonctionner sans javascript. Javascript n’étant là que pour apporter plus de conforts à l’utilisateur. On pourra donc tester si un champs est vide ou bien compléter, si une date, un code postal ou un numéro de téléphone est renseigné dans le bon format. Cette première « validation » javascript peut être faite soit lorsque le bouton valider est cliqué, soit au fur et à mesure de la saisie en utilisant la techno Ajax, la dernière solution étant la plus communément utilisée aujourd’hui.

Exemples de formulaires vérifiés avec javascript :

1. Formulaire d’inscription du site Remember the milk

   

2. Formulaire d’inscription du site Jamendo

   

Exemples d’Aide à la saisie avec javascript :

1. Formulaire d’inscription du site CDiscount

   

2. Formulaire d’inscription du site Twitter

   

4° étape : la validation des données

L’utilisation de javascript nous a permis de vérifier le formulaire sur différents points : champs obligatoires non renseignés, formats non conformes, etc. au fur et à mesure de la saisie sans envoyer de requête inutile au serveur. Toutefois, il ne faut pas perdre de vue que sans javascript ces éléments doivent également pouvoir être testés.

Ce que nous ne pouvons pas tester en javascript sera testé après l’envoi des données, par exemple : est-ce que l’identifiant choisi n’existe pas déjà dans la base de donnée ?

Une fois toutes ces données testées, elle pourront être ajoutées à la base de données.

Dernier test à effectuer : désactivez javascript dans votre navigateur pour vérifier que le formulaire est accessible !