Un formulaire est représenté par l'élément form. Celui-ci possède deux attributs :
method : indique la manière dont les données sont envoyées. Peut prendre deux valeurs :
- -
get : méthode non recommandée. Les informations sont limitées et passent par la barre d'adresse du navigateur.
- -
post : c'est la méthode la plus utilisée. En effet, elle permet d'envoyer de nombreuses informations. Les données saisies dans le formulaire ne transitent pas dans la barre d'adresse du navigateur.
action : indique l'adresse de la page (en php) ou programme se chargeant de traiter les informations saisies.
Ce qui nous donne ce code basique :
<form method="post" action="infos-saisies.php">
</form>
L'élément fieldset permet de regrouper les éléments d'un formulaire afin de le structurer en le découpant en plusieurs parties.
L'élément legend représente une légende (autrement dit un titre) pour le contenu de son élément parent fieldset.
En HTML5, il est désormais possible de déclarer des titres au sein de l'élément legend, très utile pour rendre cohérent l'utilisation de plusieurs sections avec l'élément fieldset :
<form method="post" action="infos-saisies.php">
<fieldset>
<legend>Titre</legend>
...
</fieldset>
<fieldset>
<legend>Autre titre</legend>
...
</fieldset>
</form>
L'élément input permet, selon la valeur de l'attribut type, de saisir différentes informations.
L'élément input dans sa plus simple expression :
<input>
Parmi les valeurs les plus utilisés de l'attribut type nous pouvons noter :
- -
button : aura plus ou moins l'apparence de l'élément button incitant l'utilisateur à cliquer dessus.
- -
checkbox : case à cocher qui permet de sélectionner/déselectionner une proposition.
- -
radio : bouton rond qui permet de sélectionner une seule proposition.
- -
text : valeur par défaut. Permet d'éditer du texte. Il est posible d'omettre cette valeur.
- -
password : permet d'éditer un mot de passe invisible à l'écran.
Par ailleurs, de nouvelles valeurs très pratiques sont apparues avec HTML5 :
Par ailleurs, l'élément input possède d'autres attributs communs à l'ensemble des types.
name : permet, lors de l'envoi du formulaire vers un serveur, d'extraire les données saisies par l'utilisateur.id : permet d'associer le champ avec un libellé (élément label).value : permet de spécifier la valeur par défaut du champ.
L'élément input sert donc à éditer du texte mais pas seulement. Il permet également de faire des choix (simples ou multiples). Pour cela, il faut utiliser des cases à cocher, des boutons radio ou encore des sélections avec l'élément select (voir plus bas).
Cet élément, tout comme l'élément input dans le cas des zones de saisie, permet d'éditer du texte. Mais contrairement à un input de type text par exemple, l'élément textarea donne la possibilité d'écrire sur plusieurs lignes (on parle de multilignes).
Dans sa forme brute, l'élément se présente comme ceci (varie selon le navigateur) :
<textarea></textarea>
L'élément textarea comprend de nombreux attributs, dont les plus utilisés sont :
name : même fonction qu'avec l'élément input. Permet de pouvoir effectuer un contrôle.cols : permet de contrôler la largeur du champ. Il s'agit de la largeur selon les caractères. La largeur par défaut vaut 20.rows : définit le nombre de lignes de texte.
Exemple ci-dessous regroupant ces attributs :
<textarea name="textarea" rows="10" cols="50"></textarea>
NB : En définissant l'attribut rows à 10, cela signifie qu'à partir de la onzième ligne, nous verrons apparaître un scroll dans l'élément textarea si celui-ci n'a pas été redimmensionné bien entendu.
💡 Comme pour l'élément input, de nouveaux attributs ont été introduits en HTML5 comme maxlength et minlength qui permettent de contrôler le nombre minimal ou maximal de caractères au sein du champ texte.
Nous avons évoqué l'élément label plus haut qui sert au fonctionnement des cases à cocher et boutons radio. Mais sa fonction première est de délivrer une information quant à la nature du renseignement à fournir dans un élément input (peut importe sa nature) ou un textarea. C'est pourquoi on parle de libellé (ou étiquette) pour un élément label.
L'élément label est important au niveau de l'accessibilité. Au possible, évitez d'utiliser seul ou à la place d'un label l'attribut HTML5 placeholder. En effet, il peut s'avérer difficile à lire pour les personnes ayant des déficiences visuelles. De plus, cela peut être désavatageux pour les personnes rencontrant des problèmes de mémoire qui peuvent oublier le texte qui se trouvait dans le champ après avoir cliqué dessus. Les utilisateurs peuvent également penser que le champ est déjà rempli. Enfin, les lecteurs d'écran ne reconnaisent pas cet attribut.
Nous avons brièvement évoqué cet élément en parlant des cases à cocher et des boutons radio dans la mesure où l'élément select permet de faire une sélection parmi plusieurs propositions.
Un exemple ci-dessous :
L'élément select possède plusieurs attributs dont les plus utiles sont :
name : permet de pouvoir effectuer un contrôle.multiple : permet de choisir plusieurs options (en faisant ctrl + clic ou cmd + clic)size : indique le nombre de lignes visibles dans la liste. Un scroll apparaît alors.
Exemple utilisant ces trois attributs :
Pour créer des options dans l'élément select, nous allons utiliser l'élément option qui comprend les attributs suivants :
disabled: l'option ne peut pas être sélectionnée.label : attribut dont la valeur correspond au texte affiché dans l'option.selected : indique que l'option est sélectionnée(*).value : indique le contenu qui sera envoyé au formulaire lorsque l'option est sélectionnée.
*Si l'élément option est un élément descendant d'un élément select dont l'attribut multiple n'est pas déclaré, vous ne pourrez pas utiliser l'attribut selected. Il faut alors entourer l'option de l'élément optgroup dont nous allons parler ci-dessous.
L'élément optgroup donne la possibilité de créer plusieurs groupes d'option dans un seul et même élément select.
Un exemple ci-dessous :
Voir également sur ce blog l'élément datalist en HTML5.
Styliser des éléments HTML de formulaire est une vraie sinécure. Comme il s'agit d'objets remplacés, c'est-à-dire des éléments ayant une largeur et une hauteur définies par le navigateur lui-même, ils n'ont pas été conçu pour être modifiables visuellement.
De plus, certains attributs ne sont pas encore implémentés, ce qui force à utiliser des pseudo-classes ou pseudo-éléments propriétaires qui ne sont pas standardisés. Il faut avoir recours à des astuces, parfois malheureuses, en CSS (niveau 3).
Ceci dit, point trop de misérabilisme. Bien qu'il existe des éléments rebelles comme select, option, optgroup ou encore datalist, certains sont faciles à mettre en forme. C'est le cas des champs de saisie. Ceux-ci prennent en compte le modèle de boite et appliquent les propriétés correspondantes (toujours selon le navigateur, il faut appliquer la propriété box-sizing pour obtenir le même rendu).
Par ailleurs, le texte présent dans les champs de saisie est propre au navigateur. Si vous souhaitez une police de caractères particulière ou celle que vous utilisez pour le reste de votre site, il faudra alors déclarer la valeur inherit sur certaines propriétés de texte et de taille comme ceci :
input, textarea, button{
font-family: inherit;
font-size: inherit
}
Si utiliser CSS pour styliser vos éléments de formulaire vous semble trop pénible, il reste la solution JavaScript et notamment les librairies comme JQuery par exemple.
Quelques petites astuces en CSS à voir sur ce blog ainsi que la propriété resize pour l'élément textarea.
