HTMLInputElement: value プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

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

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

結果

色の値を受け取る

この例では、<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}`;
});

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

結果

仕様書

Specification

HTML
# dom-input-value

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2024年10月23日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: value プロパティ

In this article

値

例

text 型の input の値を受け取る

HTML

JavaScript

結果

色の値を受け取る

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN