Les formulaires HTML

La balise <form>

Un formulaire permet de demander des informations à l’utilisateur. Ces informations sont ensuite traitées dans un langage de programmation (PHP par exemple) pour être enregistrées dans une base de données, ou envoyées par email, ou autre. Ces informations peuvent être des données textuelles ou des fichiers.

Le contenu du formulaire est englobé dans la balise <form>. Si le formulaire contient du texte (textes explicatifs, libellés de champs, etc.), ce texte doit systématiquement être dans un paragraphe (balise <p>).

La balise <form> a deux attributs :

• L’attribut action qui permet d’indiquer le chemin vers le fichier qui va recevoir et traiter les données (exemple : action=“traitement.php”).
• L’attribut method qui permet d’indiquer si les données sont envoyées en POST ou en GET. La méthode GET n’est adaptée que pour les petits formulaires n’envoyant que très peu de données et où la sécurité n’est pas la priorité. En effet, les données sont transmises directement dans l’URL et donc visibles et il y a une limite de 255 caractères. La méthode POST permet d’envoyer beaucoup plus d’informations.

Les champs de saisie

Les différents types de champs input

Voici la liste des types des champs input disponibles dans toutes les version du langage HTML.

Voici en complément la liste des types des champs input disponibles depuis HTML 5 :

Les zones de texte multi lignes

La zone de texte multi lignes se met en place avec la balise <textarea>Contenu…</textarea>. Ses dimensions se définissent soit avec les attributs rows et cols soit en CSS avec les propriétés width et height.

Par défaut ces zones de texte disposent d’une partie cliquable en bas à droite permettant leur redimensionnement. Pour neutraliser la possibilité de redimensionner la zone, il faut appliquer la propriété CSS resize : none;.

Les cases à cocher

Pour permettre à un utilisateur de faire un choix parmi une liste prédéfinie, on peut lui afficher des cases à cocher en lui permettant soit de n’en cocher qu’une seule soit de pouvoir en cocher plusieurs.

Les cases à cocher multiples sont des input de type checkbox. Une option peut être pré cochée avec l’attribut checked auquel il n’est pas nécessaire d’attribuer une valeur. Chaque champ doit avoir un nom différent.

<input type="checkbox" name="choix1" checked>
<input type="checkbox" name="choix2">
<input type="checkbox" name="choix3">

Les cases à cocher à choix unique sont des input de type radio. Une option peut également être pré sélectionnée avec l’attribut checked. Ici, tous les champs doivent avoir le même nom.

<input type="radio" name="accepter" value="Oui" checked>
<input type="radio" name="accepter" value="Non">

Les listes de choix

Pour permettre à un utilisateur de faire un choix parmi une liste prédéfinie, on peut lui afficher une liste déroulante de choix. Une liste déroulante permet par défaut de ne choisir qu’une seule valeur, mais il est possible de permettre la sélection de plusieurs valeurs avec l’attribut multiple.

Pour permettre la sélection de plusieurs valeurs, il est aussi possible, et c’est souvent plus intuitif, de passer par des outils à intégrer au code source qui en réalité, génèrent une liste avec cases à cocher et gèrent de manière transparente des champs input et remanient le DOM.

Les choix d’une liste déroulante sont chacun dans une balise <option> ayant un attribut value. Ils peuvent éventuellement être regroupés dans des blocs <optgroup> (par thème) ayant un libellé, le tout devant être englobé dans une balise <select>. On peut présélectionner une option avec l’attribut selected.

<select name="pays">
    <optgroup label="Europe">
        <option value="france" selected>France</option>
        <option value="espagne">Espagne</option>
        <option value="italie">Italie</option>
        <option value="royaume-uni">Royaume-Uni</option>
    <optgroup>
        <optgroup label="Autre">
        <option value="canada">Canada</option>
        <option value="etats-unis">États-Unis</option>
        <option value="chine">Chine</option>
        <option value="japon">Japon</option>
    <optgroup>
</select>

Attributs des champs de saisie

L’attribut placeholder

L’attribut placeholder permet d’inscrire un texte par défaut dans un champ dont le but est d’apporter une indication sur l’information à renseigner dans le champ. Cette valeur s’efface dès que le focus est sur le champ ou dès que l’on tape du texte dans le champ. Longtemps mis en place via du Javascript, il existe depuis HTML5 un attribut dédié.

<input type="text" name="username" placeholder="Entrez un pseudo">

Cet attribut peut être utilisé sur les textarea et sur les input de type text, search, url, password, tel, email.

L’attribut required

L’attribut required permet de rendre obligatoire un champ. La soumission du formulaire sera donc bloqué tant que le champ sera vide. L’utilisation de champ ne doit absolument pas remplacer les contrôles effectués côté serveur. En effet, il est très facile de modifier le DOM d’une page HTML pour effacer cet attribut et ainsi pouvoir valider le formulaire en laissant vide des champs initialement obligatoires.

Le langage CSS permet de mettre en avant ces champs avec le code suivant :

:required {
    border: 1px solid red;
}

L’attribut autocomplete

L’attribut autocomplete permet d’indiquer au navigateur si le champ doit ou non pouvoir bénéficier de l’autocomplétion. Lorsque l’on saisit du texte dans un champ, les navigateurs proposent des résultats basés sur les valeurs précédemment validés sur ce même champ. Activé par défaut, il peut être utile d’ajouter la mention autocomplete=“off” pour empêcher le navigateur de proposer tout un tas de choix sur certains champs.

L’attribut autofocus

L’attribut autofocus peut être placé sur le champ dont on veut qu’il soit automatiquement actif lors du chargement d’une page, afin de rapidement pouvoir y saisir du texte. Pas besoin de valeur, il suffit d’ajouter l’attribut sur l’input. L’attribut est disponible sur tout type de champ (input, select, etc.).

L’attribut readonly

Permet d’afficher un input avec son contenu mais qui ne sera pas modifiable. Il est important de préciser que le champ et sa valeur seront tout de même envoyés lors de la validation du formulaire, ce qui n’est pas le cas pour l’attribut disabled. S’il est souhaité qu’un champ en lecture seule soit grisé par exemple, il faut le gérer en CSS via l’option input[readonly].

L’attribut disabled

L’attribut readonly permet de désactiver un input, button, optgroup, option, select, textarea. Un élément désactivé ne sera pas soumis lors de la validation du formulaire.

Regroupement des champs par thème

Les champs d’un formulaire, quel que soit leur type peuvent être regroupés dans des blocs ayant un titre. Ces champs sont ainsi à placer à l’intérieur d’une balise <fieldset> dans laquelle on place tout d’abord le titre dans la balise <legend>.

<form method="post" action="traitement.php">
    <fieldset>
        <legend>Vos coordonnées</legend>
        <!-- Champs à placer ici -->
    </fieldset>
    <fieldset>
        <legend>Vos expériences professionnelles<legend>
        <!-- Champs à placer ici -->
    </fieldset>
</form>

Upload de fichier

Au niveau du formulaire HTML, il suffit d’ajouter à la balise du formulaire l’attribut enctype avec une valeur bien précise qui permettra d’indiquer au navigateur qu’il doit envoyer les données sous forme binaires.

<form method="post" action="page.php" enctype="multipart/form-data">

Boutons de validation du formulaire et autres boutons

Pour valider un formulaire, on peut le faire en cliquant sur un champ d’un type particulier, un bouton, ou une image.

<!-- Bouton de validation -->
<input type="submit" value="Valider">
 
<!-- Autre bouton de validation -->
<button type="submit">Valider</button>

L’avantage d’utiliser un bouton plutôt qu’un champ est que l’on peut mettre dans le contenu du bouton une image par exemple.

Il est possible de mettre en place des boutons ayant d’autres effets.

<!-- Remise à zéro un formulaire -->
<button type="reset">Réinitialiser"</button>
 
<!-- Bouton générique, action à définir en Javascript par exemple -->
<button type="button">Action</button>