このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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" /><pre></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" type="color" /><pre></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 |