HTMLInputElement : propriété value

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.

La propriété value de l'interface HTMLInputElement représente la valeur actuelle de l'élément HTML <input> sous forme de chaîne de caractères.

Cette propriété peut également être définie directement, par exemple pour définir une valeur par défaut en fonction d'une condition.

Dans cet article

Valeur

Une chaîne de caractères définissant la valeur par défaut de l'élément HTML <input>.

Exemples

Récupérer la valeur d'un champ de texte

Dans cet exemple, le journal affiche la valeur actuelle au fur et à mesure que vous saisissez des données dans le champ.

HTML

Nous incluons un <input> et un <label> associé, avec un conteneur <pre> pour notre sortie.

html
<label for="given-name">Votre nom&nbsp;:</label>

<input name="given-name" id="given-name" />

<pre id="log"></pre>

JavaScript

La propriété innerText de l'élément <pre> est mise à jour avec la valeur actuelle du <input> à chaque fois qu'un évènement keyup est déclenché.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("given-name");

inputElement.addEventListener("keyup", () => {
  logElement.innerText = `Nom : ${inputElement.value}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Résultats

Récupérer une valeur de couleur

Cet exemple montre l'utilisation de la propriété value avec un <input> de type color.

HTML

Nous incluons un <input> de type color :

html
<label for="color">Choisissez une couleur&nbsp;:</label>

<input name="color" id="color" type="color" />

<pre id="log"></pre>

JavaScript

La propriété innerText de l'élément <pre> est initialisée avec la valeur de couleur par défaut (#000000) puis mise à jour à chaque fois qu'un évènement change se produit.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("color");

logElement.innerText = `Couleur : ${inputElement.value}`;

inputElement.addEventListener("change", () => {
  logElement.innerText = `Couleur : ${inputElement.value}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

L'élément HTML <input>
La propriété HTMLInputElement.valueAsDate
La propriété HTMLInputElement.valueAsNumber

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 16 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLInputElement : propriété value

Dans cet article

Valeur

Exemples

Récupérer la valeur d'un champ de texte

HTML

JavaScript

Résultats

Récupérer une valeur de couleur

HTML

JavaScript

Résultats

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN