HTMLの要素のvalue属性【現役エンジニアが解説】

PROGRAM

今回は、HTMLの要素のvalue属性について、value属性の基本とJavaScriptでvalue属性の値を操作する方法に分け、簡単に解説していきます。

value属性の基本

inputタグ等の入力可能な要素にはvalue属性があります。

value属性には、要素に入力した値が格納され、逆に初期値を設定することもできます。

<input type="text" id="hoge" value="ほげ">

上記のコードでは、inputタグのテキストボックスに、”ほげ”という初期値を設定しています。

JavaScriptでvalue属性の値を取得する

JavaScriptで要素のvalueプロパティを参照するとvalue属性の値を取得できます。

idを設定している要素の場合には、document.getElementById(“id名”).valueで参照可能です。

var hoge = document.getElementById("hoge").value;
console.log(hoge); // "ほげ"

上記のコードでは、hogeというidを持つ要素のvalueプロパティを取得し、変数に代入してログに値を出力しています。

JavaScriptでvalue属性の値を書き換える

JavaScriptで要素のvalueプロパティに代入することでvalue属性の値を書き変えられます。

idを設定している要素の場合には、document.getElementById(“id名”).valueを左辺にして代入可能です。

document.getElementById("hoge").value = "ほげほげ";

上記のコードでは、hogeというidを持つ要素のvalueプロパティに対し、”ほげほげ”という値を代入し、書き変えています。