<input type="hidden">

Valeur

L'attribut value de l'élément <input> contient une chaîne de caractères qui représente les données masquées que vous souhaitez inclure lorsque le formulaire est envoyé au serveur. Cette valeur ne peut pas être modifiée ni consultée par les utilisateur·ice·s dans l'interface utilisateur, bien qu'il·elle soit modifiable avec les outils de développement du navigateur.

Attributs supplémentaires

En complément des attributs communs à l'ensemble des éléments <input>, les champs hidden proposent les attributs suivants.

name

Il s'agit en réalité d'un des attributs communs, mais il possède une signification particulière pour les champs masqués. Normalement, l'attribut name fonctionne sur les champs masqués comme sur tout autre champ. Cependant, lorsque le formulaire est soumis, un champ masqué dont le name est défini sur _charset_ sera automatiquement transmis avec pour valeur l'encodage de caractères utilisé pour l'envoi du formulaire.

Utiliser les valeurs masquées dans les formulaires

Comme indiqué ci‑dessus, les champs masqués peuvent être utilisés partout où vous souhaitez inclure, avec le formulaire envoyé au serveur, des données que l'utilisateur·ice ne peut pas voir ni modifier. Voyons quelques exemples qui illustrent leur utilisation.

Suivre les modifications apportées au contenu

Un des usages les plus courants des champs masqués est de conserver l'information de l'enregistrement de la base de données à mettre à jour lorsqu'un formulaire d'édition est soumis. Un flux de travail typique est le suivant :

1. L'utilisateur·ice décide d'éditer un contenu dont il·elle a la charge, par exemple un billet de blog ou une fiche produit. Il·elle commence en cliquant sur le bouton Éditer.
2. Le contenu à modifier est extrait de la base de données et chargé dans un formulaire HTML afin que l'utilisateur·ice puisse appliquer les modifications souhaitées.
3. Après l'édition, l'utilisateur·ice soumet le formulaire, et les données mises à jour sont renvoyées au serveur pour être actualisées en base de données.

L'idée est que lors de l'étape 2, l'identifiant de l'enregistrement à mettre à jour est conservé dans un champ masqué. Lorsque le formulaire est soumis à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu de l'enregistrement. Cet identifiant permet au composant serveur du site de savoir précisément quel enregistrement doit être mis à jour avec les données soumises.

Vous pouvez consulter un exemple complet dans la section Exemples ci‑dessous.

Contribuer à la sécurité d'un site web

Les champs masqués sont également utilisés pour stocker et envoyer des jetons de sécurité, ou secrets, afin d'améliorer la sécurité d'un site web. L'idée de base est que, si un·e utilisateur·ice remplit un formulaire sensible — par exemple un formulaire sur le site de sa banque pour transférer de l'argent vers un autre compte — le secret fourni permet de prouver son identité et de garantir qu'il·elle utilise le bon formulaire pour soumettre la demande de transfert.

Cela empêcherait un·e utilisateur·ice malveillant·e de créer un formulaire falsifié, de se faire passer pour une banque et d'envoyer le formulaire par courriel à des utilisateur·ice·s sans méfiance pour les tromper et les amener à transférer de l'argent au mauvais endroit. Ce type d'attaque s'appelle une Falsification de requête inter-sites (CSRF) ; pratiquement tous les frameworks côté serveur réputés utilisent des secrets masqués pour prévenir de telles attaques.

Validation

Les champs masqués ne participent pas à la validation des contraintes ; ils n'ont aucune valeur réelle à contraindre.

Exemples

Voyons comment nous pourrions implémenter une version du formulaire d'édition décrit précédemment (voir Suivre les modifications apportées au contenu), en utilisant un champ masqué pour mémoriser l'identifiant de l'enregistrement modifié.

Le HTML du formulaire d'édition pourrait ressembler un peu à ceci :

<form>
  <div>
    <label for="title">Titre du billet&nbsp;:</label>
    <input type="text" id="title" name="title" value="Mon meilleur billet" />
  </div>
  <div>
    <label for="content">Contenu du billet&nbsp;:</label>
    <textarea id="content" name="content" cols="60" rows="5">
Voici le contenu de mon meilleur billet, j'espère que ça vous plaît !
    </textarea>
  </div>
  <div>
    <button type="submit">Mettre à jour le billet</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

Ajoutons quelques éléments de mise en forme :

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

Le serveur affecte la valeur du champ masqué dont l'ID est postID à l'identifiant de l'article dans sa base de données avant d'envoyer le formulaire au navigateur de l'utilisateur·ice, et utilise cette information lorsque le formulaire est retourné pour savoir quel enregistrement de la base de données mettre à jour avec les informations modifiées. Aucun script n'est nécessaire dans le contenu pour gérer cela.

La sortie ressemble à ceci :

Lors de la soumission, les données du formulaire envoyées au serveur ressembleront à ceci :

title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657

Bien que le champ masqué soit totalement invisible, ses données sont tout de même envoyées.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Guide sur les formulaires HTML
• L'élément <input> et l'interface API HTMLInputElement sur laquelle il est basé