Les contrôles de formulaire natifs

Les champs <input> pour saisir du texte sont les contrôles de formulaire les plus simples. Ils sont un outil pratique pour permettre à l'utilisatrice ou l'utilisateur de saisir n'importe quelle sorte de données. Nous avons déjà vu certains exemples simples.

Tous les contrôles textuels partagent certains comportements :

• Ils peuvent être en lecture seule avec l'attribut readonly (la personne qui utilise le site ne peut pas modifier cette valeur dans le formulaire mais celle-ci est bien envoyée avec le reste des données du formulaire) ou désactivés avec l'attribut disabled (la valeur ne peut pas être modifiée et n'est pas envoyée avec le reste des données).
• L'attribut placeholder permet de fournir un texte indicatif qui apparaît à l'intérieur du champ pour décrire brièvement le but du champ.
• Leur taille peut être contrainte : la taille physique de la boîte formant le champ peut être ajustée avec l'attribut size et le nombre maximum de caractères qui peuvent être saisis dans le champ peut être défini avec l'attribut maxlength.
• La vérification orthographique peut être activée, si le navigateur la prend en charge, avec l'attribut spellcheck.

Pour créer un champ permettant de saisir du texte sur une seule ligne, on utilisera un élément <input> dont l'attribut type vaut text, ou pour lequel l'attribut type est absent (text étant la valeur par défaut). La valeur text est également la valeur utilisée par le navigateur au cas où la valeur indiquée pour l'attribut type serait inconnue du navigateur (par exemple, si on utilise type="color" et que le navigateur ne prend pas en charge les sélecteurs de couleur natifs).

Voici un exemple de champ texte simple sur une ligne :

<input
  type="text"
  id="commentaire"
  name="commentaire"
  value="Je suis un champ texte" />

Les champs texte sur une seule ligne n'ont qu'une contrainte : si on saisit du texte avec des sauts de ligne, le navigateur retirera les sauts de ligne avant d'envoyer les données au serveur.

La capture d'écran qui suit illustre l'apparence des contrôles (par défaut, avec le focus et désactivés) pour les champs texte pour Firefox 71 et Safari sur macOS, et pour Chrome 79 et Edge 18 sur Windows 10.

Un champ pour saisir un mot de passe

Un des types de champ de formulaire, présent à l'origine, est destiné à la saisie de mots de passe avec le type password :

<input type="password" id="pwd" name="pwd" />

La valeur password n'ajoute pas de contraintes particulières sur le texte qui est saisi. En revanche, elle masque la valeur saisie dans le champ (avec des points ou des astérisques) afin qu'elle ne puisse pas être facilement lue par d'autres.

Il faut garder à l'esprit qu'il s'agit uniquement d'une fonctionnalité visuelle de l'interface utilisateur. Si le formulaire est envoyé en clair (une mauvaise pratique en termes de sécurité), un intermédiaire malveillant pourrait intercepter les données et voler les mots de passe (ainsi que les autres données du formulaire). Pour la saisie des mots de passe, et de façon générale, si on veut protéger les utilisatrices et utilisateurs du site, on fournira les formulaires (voire le reste du contenu) avec une connexion sécurisée (HTTPS) afin que la donnée soit chiffrée pour le transfert.

Les navigateurs peuvent sensibiliser à ces aspects de sécurité lors de l'envoi de données avec une connexion non-sécurisée et afficher des avertissements pour prévenir des risques et dissuader de saisir des données (dont les mots de passe) dans des formulaires non-sécurisés. Pour plus d'informations sur ce qu'implémente Firefox, voir la saisie de mot de passe non-sécurisée.

Un autre type de champ présent aux débuts de HTML est le type masqué (avec la valeur d'attribut hidden). Il permet de créer un champ de formulaire qui ne sera pas visible sur le site mais qui sera envoyé au serveur lors de l'envoi du formulaire (il peut, par exemple, permettre d'envoyer un horodatage au serveur pour indiquer l'heure de saisie du formulaire côté client). Étant masqué, le champ ne peut pas être vu ou édité de façon intentionnelle, il ne peut pas recevoir le focus et un outil de lecture d'écran ne le mentionnera pas.

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

Pour créer un tel élément, il est nécessaire de lui fournir des attributs name et value. La valeur contenue dans ce champ peut être éditée dynamiquement avec JavaScript. Un champ de type hidden ne devrait pas avoir de libellé associé.

Les autres types de champ texte, comme <input type="search">, <input type="url"> et <input type="tel">, ont été ajoutés avec HTML5. Nous les verrons dans le prochain tutoriel, les types de champs de formulaire HTML5.

Ces éléments sélectionnables sont des contrôles dont on peut changer l'état en cliquant dessus ou sur les libellés correspondants. On y trouve les cases à cocher (checkbox) et les boutons radio. Ces deux types de champ utilisent l'attribut checked qui indique si le contrôle est coché/sélectionné par défaut.

On notera que ces contrôles ne se comportent pas exactement comme les autres contrôles de formulaire. En effet, pour la plupart des champs de formulaires, lorsque le formulaire est envoyé, tous les champs ayant un attribut name sont envoyés, même si aucune valeur n'a été saisie. Pour les cases à cocher et les boutons radio, leurs valeurs sont uniquement envoyées lorsqu'ils sont cochés/sélectionnés. S'ils ne sont pas cochés/sélectionnés, rien n'est envoyé, même leur nom. S'ils sont cochés/sélectionnés sans valeur indiquée, leur nom est envoyé avec la valeur on.

Pour améliorer l'utilisabilité et l'accessibilité, il est conseillé de regrouper les différentes options de chaque liste au sein d'un élément <fieldset>, avec un élément <legend> fournissant une description de la liste. Chaque paire d'éléments <label>/<input> devrait former un élément de liste à part. Le libellé associé (<label>) est généralement placé immédiatement après le bouton radio ou la case à cocher, les instructions pour choisir parmi les groupes de cases à cocher ou de bouton radio sont généralement portées par le contenu de l'élément <legend>. Voir les exemples mentionnés ci-avant pour des illustrations.

Une case à cocher est créée avec un élément <input> pour lequel l'attribut type prend la valeur checkbox.

<input type="checkbox" id="questionUn" name="abonnement" value="oui" checked />

Les cases à cocher qui portent sur le même sujet devraient partager le même attribut name. Ajouter l'attribut checked à un tel élément permettra d'avoir la case cochée lors du chargement de la page. Cliquer sur la case ou sur le libellé associé permettra de cocher/décocher la case.

<fieldset>
  <legend>Sélectionnez les légumes que vous aimez</legend>
  <ul>
    <li>
      <label for="carottes">Carottes</label>
      <input
        type="checkbox"
        id="carottes"
        name="legume"
        value="carottes"
        checked />
    </li>
    <li>
      <label for="haricots">Haricots</label>
      <input type="checkbox" id="haricots" name="legume" value="haricots" />
    </li>
    <li>
      <label for="chou">Chou</label>
      <input type="checkbox" id="chou" name="legume" value="chou" />
    </li>
  </ul>
</fieldset>

L'image qui suit montre l'apparence des cases à cocher dans leur état par défaut, avec le focus et dans l'état désactivé pour Firefox 71 et Safari 13 sur macOS et pour Chrome 79 et Edge 18 sur Windows 10 :

En raison de l'aspect marche/arrêt des cases à cocher, celles-ci sont parfois utilisées pour réaliser des interrupteurs en modifiant la mise en forme par défaut. Vous pouvez en voir un exemple ici (avec le code source correspondant).

Un bouton radio est créé avec un élément <input> pour lequel l'attribut type vaut radio :

<input type="radio" id="soupe" name="plat" checked />

Il est possible de regrouper plusieurs boutons radio ensemble. S'ils partagent le même attribut name, ils feront partie du même groupe. Seul un bouton d'un groupe donné peut être sélectionné à la fois. Cela signifie que sélectionner une des options entraînera la désélection de toutes les autres. Lorsque le formulaire est envoyé, seule la valeur du bouton radio sélectionné du groupe est envoyée. Si aucun n'est sélectionné, l'ensemble du groupe est considéré dans un état inconnu et aucune valeur n'est envoyée avec le formulaire. Lorsqu'un des boutons radio d'un groupe a été sélectionné, la personne ne peut plus désélectionner l'ensemble des boutons sans réinitialiser le formulaire.

<fieldset>
  <legend>Quel est votre plat préféré ?</legend>
  <ul>
    <li>
      <label for="soupe">Soupe</label>
      <input type="radio" id="soupe" name="plat" value="soupe" checked />
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="plat" value="curry" />
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="plat" value="pizza" />
    </li>
  </ul>
</fieldset>

L'image qui suit illustre les boutons radio sélectionnés ou non, dans leur état normal, avec le focus, ou lorsqu'ils sont désactivés (on y voit les aspects pour Firefox 71 et Safari 13 sur macOS, Chrome 79 et Edge 18 sur Windows 10).

Les boutons radio ne sont pas, à proprement parler, des boutons malgré leur nom. Voyons donc les éléments de formulaire qui permettent d'avoir des boutons ! Il existe trois types de contrôle permettant de créer des boutons :

submit

Ce bouton envoie les données du formulaire au serveur. Utiliser des éléments <button> sans indiquer l'attribut type (ou en fournissant une valeur incorrecte pour celui-ci) créera un bouton d'envoi.

reset

Ce bouton réinitialise l'ensemble des contrôles du formulaire avec leurs valeurs par défaut.

button

Ces boutons n'ont pas d'effet natif et peuvent être personnalisés avec du code JavaScript.

On a également l'élément <button>. Celui-ci porte un attribut type qui peut valoir submit, reset, ou button pour copier le comportement des trois types d'élément <input> mentionnés avant. La différence principale entre ces deux éléments est la plus grande facilité de mise en forme des éléments <button>.

Voici des exemples pour chaque type de bouton <input>, accompagnés chacun de leur équivalent avec l'élément <button>.

<button type="button">Voici un <strong>bouton générique</strong></button>

<input type="button" value="Voici un bouton générique" />

Les boutons se comporteront de la même façon, que ce soient des éléments <button> ou des éléments <input>. Toutefois, comme vous pouvez le voir dans les exemples, les éléments <button> permettent d'utiliser du HTML dans leur contenu au sein des balises <button>. En revanche, les éléments <input> sont des éléments vides et le contenu affiché provient de l'attribut value qui peut uniquement être du texte simple.

L'image qui suit montre l'apparence par défaut, avec le focus et désactivée pour les contrôles de formulaire qui sont des boutons, avec Firefox 71 et Safari 13 sur macOS, Chrome 79 et Edge 18 sur Windows 10.

Le contrôle de bouton d'image s'affiche exactement comme un élément <img>, à la différence près que lorsque la personne clique dessus, il se comporte comme un bouton d'envoi.

Un bouton d'image est créé avec un élément <input> dont l'attribut type vaut image. Cet élément prend en charge le même ensemble d'attributs que l'élément <img> et les attributs relatifs aux éléments de formulaire.

<input
  type="image"
  alt="Cliquez ici !"
  src="mon-img.png"
  width="80"
  height="30" />

Si le bouton d'image est utilisé pour envoyer le formulaire, ce contrôle ne fournit pas sa valeur mais les coordonnées X / Y (relatives au coin en haut à gauche de coordonnées (0,0)) où le clic a eu lieu. Les coordonnées sont envoyées comme deux paires clé/valeur :

• La clé pour la valeur d'abscisse X sera la valeur de l'attribut name suivie de la chaîne de caractères « .x ».
• La clé pour la valeur d'ordonnée Y sera la valeur de l'attribut name suivie de la chaîne de caractères « .y ».

Ainsi, si vous cliquez sur l'image aux coordonnées (123, 456) et que le formulaire est envoyé avec la méthode get, vous pourrez voir les valeurs ajoutées de la façon suivante à l'URL :

http://example.com?pos.x=123&pos.y=456

Il s'agit d'une méthode pratique pour construire une carte interactive. Le détail de l'envoi et de la récupération de ces valeurs est décrit dans l'article Envoyer des données de formulaire.

Il existe un dernier type d'élément <input> présent aux origines de HTML : le contrôle de sélection de fichier. Les formulaires permettent d'envoyer des fichiers à un serveur (cette action est détaillée dans l'article Envoyer des données de formulaire). Ce contrôle permet de choisir un ou plusieurs fichiers à envoyer.

Pour créer un sélecteur de fichier, on utilisera un élément <input> dont l'attribut type vaut file. Les types de fichier acceptés peuvent être limités avec l'attribut accept. Pour permettre de sélectionner plusieurs fichiers, il faudra inclure l'attribut multiple.

Dans cet exemple, on crée un sélecteur de fichier pour des images. La personne qui utilise le formulaire peut ici choisir plusieurs fichiers.

<input type="file" name="file" id="file" accept="image/*" multiple />

Sur certains appareils mobiles, le sélecteur de fichier peut accéder aux photos, vidéos et fichiers audios produits par l'appareil photo ou le micro en ajoutant des informations de captures avec l'attribut accept :

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

De nombreux éléments de formulaire disposent d'attributs qui leur sont spécifiques. Toutefois, il y a un ensemble d'attributs communs à tous les éléments de formulaire. Nous en avons déjà rencontré certains, mais voici une liste des attributs communs et qui pourra servir de référence :

Vous avez atteint la fin de cet article, mais avez-vous retenu les informations les plus importantes ? Vous pouvez vous évaluer et vérifier que vous avez mémorisé ces informations avant d'aller plus loin — voir l'évaluation Testez vos compétences : contrôles de formulaire de base.

Dans cet article, nous avons abordé les contrôles de formulaire présents depuis les débuts de HTML et qui sont pris en charge par l'ensemble des navigateurs. Dans la prochaine section, nous verrons les valeurs plus récentes possibles pour l'attribut type qui ont été ajoutées en HTML5.

• Précédent
• Aperçu : Formulaires web — Travailler avec les données saisies
• Suivant