HTMLInputElement: value property

A string specifying the default value of the element.

In this example, the log displays the current value as the user enters data into the input.

HTML

We include an and an associated , with a

 container for our output.

html
Your name:





JavaScript
The 
 element's innerText is updated to the current value of the  every time a keyup event is fired.

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

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

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

Results

This example demonstrates that the value property with an of type color.

HTML

We include an of type color:

Pick a color:

JavaScript

The

 element's innerText is updated with the default color value (#000000) and then updated every time a change event is fired.

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

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

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

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

Results

• HTMLInputElement.valueAsDate
• HTMLInputElement.valueAsNumber