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.

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é.

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.

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;
}

Résultats

Spécifications

Spécification
HTML # dom-input-value

Compatibilité des navigateurs

Voir aussi

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

Aider à améliorer MDN

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