Valeur d'attribut HTML `<input type="hidden">`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

Les éléments <input> de type "hidden" permettent aux développeur·euse·s web d'inclure des données dans un formulaire qui ne sont pas accessibles visuellement aux utilisateur·ice·s lorsque le formulaire est envoyé. Par exemple, l'identifiant du contenu actuellement commandé ou modifié, ou un jeton de sécurité unique. Les champs masqués sont totalement invisibles dans la page rendue, mais sont tout de même envoyés comme n'importe quel autre champ de formulaire. Bien que les données ne soient pas présentées aux utilisateur·ice·s dans le contenu rendu, elles restent accessibles dans le code HTML et peuvent être modifiées par les utilisateur·ice·s à l'aide d'outils tels que les outils de développement du navigateur.

Note : Les input et change évènements ne s'appliquent pas à ce type d'élément. Les champs masqués ne peuvent pas recevoir la sélection, même avec JavaScript (par exemple, hiddenInput.focus()).

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 n'est pas présentée à l'utilisateur·ice sur l'interface utilisateur.

Attention : Bien que la valeur ne soit pas affichée aux utilisateur·ice·s dans le contenu de la page, elle est visible — et peut être modifiée — à l'aide des outils de développement de n'importe quel navigateur ou de la fonctionnalité « Afficher la source ». Ne pas se fier aux champs hidden comme mécanisme de sécurité.

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 envoyé, un champ masqué dont le name est défini sur _charset_ est 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 des données que l'utilisateur·ice ne peut pas voir dans le formulaire lorsqu'il est envoyé au serveur. Voyons quelques exemples illustrant 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 envoyé. Un flux de travail typique est le suivant :

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.
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.
Après l'édition, l'utilisateur·ice envoie le formulaire, et les données mises à jour sont retourné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 envoyé à 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 envoyées.

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

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

Les champs de saisie cachés sont souvent utilisés pour stocker des jetons contre les attaques de type croisement de requêtes (CSRF), qui contribuent à protéger les sites web contre les attaques CSRF.

Note : Les données placées dans un champ caché ne sont pas sécurisées par nature. Leur valeur reste visible par l'utilisateur·ice final·e. Vous devez utiliser des secrets bien conçus pour sécuriser efficacement votre site web.

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 peut ressembler un peu à ceci :

html

<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 :

css

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 :

Note : Vous pouvez aussi trouver l'exemple sur GitHub (voir le code source ^(angl.), et aussi le voir en direct ^(angl.)).

Lors de l'envoi, les données du formulaire envoyées au serveur ressemblent à 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

Valeur	Une chaîne de caractères qui représente la valeur de la donnée masquée qu'on souhaite envoyer au serveur.
Évènements	Aucun.
Attributs pris en charge	`autocomplete`
Attributs IDL	`value`
Interface DOM	`HTMLInputElement`
Rôle ARIA implicite	Pas de rôle correspondant ^(angl.)