Les avancées de HTML5 pour la création de formulaires

HTML 5 a été validé en octobre 2014. Par rapport à la version précédente, il apporte de nombreuses améliorations qui facilitent la vie des programmeurs. Nous allons nous intéresser à quelques-unes qui concernent les formulaires.

autofocus

L’attribut autofocus permet de positionner automatiquement le curseur dans le champ qui le contient. Cela évite à l’utilisateur d’avoir à manipuler la souris avant de commencer la saisie.

C’est particulièrement utile dans les modes de saisie de masse où, après chaque nouvel enregistrement, le programme crée un nouveau formulaire vierge. Ainsi, en validant le formulaire avec la touche <Entrée>, le programme crée un nouveau formulaire et positionne le curseur dans la première zone. L’utilisateur peut ainsi dérouler sa saisie sans toucher à la souris, ce qui est un gage de rapidité et d’efficacité.

L’attribut autofocus peut être utilisé dans un champ input, select, une zone de texte multilignes (textarea), un bouton (button. Voici quelques exemples d’utilisation :

<input name="Nom" autofocus > <select name="liste_de_selection" autofocus> <option value="">Sélectionnez...*)</option> (...) </select>

required

Cet attribut impose la saisie du champ avant l’envoi du formulaire. Au moment de la validation, si le champ est vide, le navigateur va afficher soit un message d’erreur standard, soit le contenu de l’attribut title.

Par exemple, si l’utilisateur ne remplit pas le champ nom, le navigateur affichera, ici, le libellé «Veuillez indiquer votre nom ».

<input name="nom" title="Veuillez indiquer votre nom" required>

Le contenu de l’attribut title sera également visible si l’utilisateur positionne la souris quelques instants sur le champ.

placeholder

Cet attribut est particulièrement pratique pour aider vos utilisateurs à savoir quoi renseigner dans votre formulaire. Il permet d’afficher un contenu type, qui guidera vos utilisateurs.

Ainsi :

<input name="maDate" placeholder="dd/mm/aaaa" >

affiche, dans le champ et en principe, en grisé, le texte dd/mm/aaaa. L’utilisateur voit alors immédiatement le contenu qu’il doit saisir.

Par contre, si aucune donnée n’est entrée, le champ est considéré comme vide, et sera transmis ainsi au navigateur. Le texte de l’attribut placeholder ne sert qu’à donner une information.

pattern

L’attribut pattern est particulièrement intéressant pour imposer un format de saisie. Le navigateur va utiliser les expressions rationnelles pour tester la validité de ce qui aura été tapé dans la zone.

Ici :

<input name="nombre" pattern=[0-9]+(\.[0-9]+)?" title="Veuillez indiquer un nombre entier ou décimal*)">

le navigateur va vérifier que :

  • les données commencent par un ou plusieurs chiffres ([0-9]+) ;
  • peut contenir le groupe le groupe suivant :
    • un point (
      • .) ;
    • un ou plusieurs chiffres ([0-9]+) ;
    • et en un seul exemplaire maximum (?).

Pour tester les nombres, il existe des nouveaux types (attribut type de input), comme number ou range, mais ils ne sont pas tous implémentés dans tous les navigateurs, et surtout, l’implémentation peut varier d’un navigateur à l’autre. Vous pourrez également trouver des types dédiés à des usages particuliers, comme email, url..., qui vont réaliser des tests de cohérence. Néanmoins, ces tests sont prévus pour la langue anglaise, et ne correspondent pas forcément à ce que vous attendriez.

L’utilisation de l’attribut pattern est, dans de nombreux cas, très utile et pertinent.

Pensez à le coupler avec l’attribut title, comme dans l’exemple précédent : cela permettra d’afficher un message d’erreur adapté à votre contexte.

autocomplete

Cet attribut est intéressant pour demander au navigateur de ne pas stocker les différentes frappes déjà saisies par l’utilisateur. Vous l’avez remarqué : quand vous tapez votre nom dans votre navigateur habituel, dès que vous avez saisi une ou deux lettres, celui-ci vous propose votre nom complet : c’est l’auto-complétion.

Toutefois, dans une application, l’auto-complétion n’est pas pratique, notamment pour la saisie de chiffres, de libellés systématiquement différents, ou de textes à ne pas conserver, comme un numéro de carte bancaire, par exemple.

Pour cela, vous pouvez demander au navigateur de ne pas conserver la valeur pour votre champ :

<input name="montant" autocomplete="false">

Le montant ne sera jamais stocké ni proposé par votre navigateur.

L’envoi de plusieurs fichiers au serveur

Il est maintenant possible d’autoriser la sélection de plusieurs fichiers dans le navigateur, pour les envoyer en une seule requête au serveur.

Voici un exemple dans la page html :

<form id="documentForm" method="post" action="loadDocument.php" enctype="multipart/form-data">

<input type="file" name="upload[]" size="40" multiple>

<input type="submit" value="Envoyer..."> </form>

Notre champ input est de type file, et dispose de l’attribut multiple, qui autorise la sélection de plusieurs fichiers. Quant à la balise name, elle contient une variable terminée par les crochets ouvrants et fermants ([]), utilisés classiquement en HTML pour créer des variables multiples.

En PHP, la variable $_FILES contiendra, pour chaque balise (name, type...) un tableau, dont chaque valeur correspondra à un des fichiers téléchargés. Ainsi, $_FILES["upload"] ["name"][0] contiendra le nom du premier fichier, et $_FILES["upload"] ["name"][1] le nom du second. Il suffit alors de compter le nombre de données dans un des tableaux pour savoir combien de fichiers sont à traiter, puis de les passer en revue un par un.

Voici un exemple de code qui permet cette opération :

$fdata=$_FILES['upload'];

if(is_array($fdata['name'])){

for($i=0;$i<count($fdata['name']);++$i){

$files[]=array( 'name' =>$fdata['name'][$i],

'type' => $fdata['type'][$i],

'tmp_name'=>$fdata['tmp_name'][$i],

'error' => $fdata['error'][$i],

'size' => $fdata['size'][$i] );

}

}

else $files[]=$fdata;

foreach ( $files as $file ) { // Traitement de chaque fichier (...) }

Avec ce script, vous obtenez un tableau ($files[]) dont chaque occurrence correspond à un fichier, ou plutôt à l’information fournie par le navigateur pour chaque fichier (les fichiers sont stockés dans un espace temporaire, dont l’adresse est indiquée par la valeur tmp_name).

La commande foreach ( $files as $file ) permet, ainsi, de passer en revue chaque fichier.

Avant d’enregistrer ou de traiter le fichier téléchargé, pensez à vérifier le type de chaque fichier attendu, sa taille, et le code d’erreur fourni par PHP. Vous pourrez ainsi limiter les risques d’attaque, notamment si votre fichier est ensuite directement téléchargé à partir d’un autre module dans votre application.

Quelques précautions s’imposent

Ce n’est pas parce que vous avez indiqué qu’un champ est obligatoire ou doit correspondre à un modèle (pattern) que vous pouvez être sûr du contenu. N’oubliez jamais qu’il est tout à fait possible de créer des requêtes vers le serveur manuellement, en forçant des contenus qui outrepassent ceux que vous pourriez avoir défini dans vos formulaires.

Ainsi, vous devez systématiquement vérifier tous les contenus qui vous sont transmis dans le code du côté du serveur. Ne faites jamais confiance à ce qui provient des navigateurs.