HTMLInputElement: value プロパティ

value は HTMLInputElement インターフェイスのプロパティで、この <input> 要素の現在の値を文字列で表します。

このプロパティは、直接設定することもできます。例えば、何らかの条件に基づいて既定値を指定する場合などです。

値

この <input> 要素の値を含む文字列、または入力要素に値が設定されていない場合は空文字列です。

例

text 型の input の値を受け取る

この例では、ユーザーが入力フィールドにデータを入力すると、ログに現在の値を表示します。

HTML

<input> と関連づけられた <label>、それと出力用に <pre> コンテナーを設置しています。

html
<label for="givenname">あなたの名前:</label>

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

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

JavaScript

<pre> 要素の innerText は、keyup イベントが発行されるたびに <input> の現在の値に更新されます。

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

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

結果

色の値を受け取る

この例では、<input> の color の value プロパティを示します。

HTML

<input> の color 型を設置します。

html
<label for="color">色を選んでください:</label>

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

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

JavaScript

<pre> 要素の innerText は、既定の色値 (#000000) で更新され、 change イベントが発行されるたびに更新されます。

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

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

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

結果

仕様書

Specification
HTML Standard
# dom-input-value

ブラウザーの互換性

BCD tables only load in the browser

関連情報