Baseline Widely available
The value
property of the HTMLInputElement
interface represents the current value of the <input>
element as a string.
This property can also be set directly, for example to set a default value based on some condition.
ValueA string specifying the default value of the <input>
element.
In this example, the log displays the current value as the user enters data into the input.
HTMLWe include an <input>
and an associated <label>
, with a <pre>
container for our output.
<label for="given-name">Your name:</label>
<input name="given-name" id="given-name" />
<pre id="log"></pre>
JavaScript
The <pre>
element's innerText
is updated to the current value of the <input>
every time a keyup
event is fired.
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 Retrieving a color value
This example demonstrates that the value
property with an <input>
of type color.
We include an <input>
of type color
:
<label for="color">Pick a color:</label>
<input name="color" id="color" type="color" />
<pre id="log"></pre>
JavaScript
The <pre>
element's innerText
is updated with the default color value (#000000
) and then updated every time a change
event is fired.
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 Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4