value属性

value属性は要素の値を指定できる属性です。

ol要素内でli要素を利用する場合はvalue属性を利用してリストの並び順を指定することも可能です。(省略した場合はol要素で指定した並び順で扱われます。)

<h1>作り方</h1>
<ol>
	<li value="1">ボールに材料をいれ混ぜます。
	<li value="2">混ぜ終わった材料を20分ほど置いておきます。
	<li value="3">鍋にいれて煮込めば出来上がり
</ol>

data要素はvalu属性を利用しヒューマンリーダブルな単語にマシンリーナブルな読み方を指定します。

お釣りは<data value="1000">1,000</data>円です。

param要素はname属性で名前をvalue属性で値を指定して利用し、代替コンテンツの前に記述がします。

<object width="100" height="100">
	<param name="movie" value="sample.swf">
	<p>Flashを再生できません</p>
</object>

input要素ではvalue属性でフォームパーツの値を指定することができます。

<input type="text" name="comment" value="コメントの内容" id="comment">

value属性の値はフォームパーツの値を変更しても変化しないので注意が必要です。

例えば、上記の入力フォームでは以下のJavaScriptでフォームパーツの値を取得できます。

document.getElementById("comment").value;//コメントの内容
document.getElementById("comment").getAttribute("value");//コメントの内容

フォームの内容を『こめんとの内容２』と変更すると以下の様な結果が出力されます。

document.getElementById("comment").value;//こめんとの内容２
document.getElementById("comment").getAttribute("value");//コメントの内容

このように実際のフォームが持つ情報を取得するにはgetAttribute()ではなくvalueプロパティを使う必要があります。

button要素はvalue属性でフォームパーツの値を指定することができます。

<button value="○○○">送信</button>

datalist要素内のoption要素ではvalue属性が指定されている場合は空で、value属性がない場合はテキストを内側に記述します。

<input name="sex" list="sexes">
<datalist id="sexes">
	<option value="Female"></option>
	<option value="Male"></option>
</datalist>

<input name="sex" list="sexes">
<datalist id="sexes">
	<option>Female</option>
	<option>Male</option>
</datalist>

datalist要素に対応していないブラウザを考慮してvalue属性内に記述するほうがよいでしょう。(テキストとして記述した場合は非対応ブラウザで表示されるため)

また、select要素内のoption要素ではvalue属性でフォームの値を指定することができます。

<select>
	<option value="ビール">ビール</option>
	<option value="ワイン">ワイン</option>
	<option value="日本酒">日本酒</option>
</select>

progress要素はvalue属性に0〜1の間の値を指定することで進歩状態を指定しますことができます。

<progress value="0.53">

max属性が指定されている場合は、value属性に0〜max属性の値を指定して進歩状態を指定します。

<progress value="53" max="100">53%</progress>

meter要素ではvalue属性でmeter要素で示したい値を指定できます。

HD利用容量 : <meter value="50">50Mの容量を利用しています</meter>

登録日 : 2013年08月31日最終更新日 : 2015年2月4日

HTMLリファレンス