ywork2020.com

Title

要素が持つ値を操作する

目次 (INDEX)

valueとは

value とは次の意味をもつHTML要素の属性です。
value
読み: バリュー
意味: 価値、値打ち、評価

目次に戻る

value属性の概要

この属性の意味を考えると数学でいうところの「値」とかいう意味になりますが、他の言葉と合わせると「価値」、「値打ち」など、 色々な意味合いになる単語です。 プログラミングでは、数学と同じく「値」という意味で理解するか、別の表現で「中身」というニュアンスでも解釈できるかもしれません。

HTML要素でvalue属性を持つものは、多くはありません。

要素によってvalue属性が表現している「値」や「中身」は、それぞれ違うので使って覚えることが理解の早道だと思います。 また、input要素はtype属性の指定で色々な入力コントロールに変化しますのでvalue属性の使い方が、それぞれ違います。

検証サンプルにも補足的に説明を入れていますので参考にして頂ければ幸いです。

目次に戻る

検証サンプルとサンプルコード

ここからは、実際の要素で検証しながらvalue属性の使われ方を見ていきたいと思います。

button要素のvalue属性

button要素のvalue属性は主にtype属性がsubmit型の時に利用される値です。 例えば、form要素に内包されたbutton要素でGET送信した場合に送信先のURLに以下の形式で送信データが添付されます。

URL?name属性値=value属性値

つまり、サンプルを使って送信するとページURLの後に「?btnABC=ABC」とデータが添付されます。 このデータをjavascriptやPHPを使い、受信ページで処理することになります。

<form action="送信先URL" method="GET">
	<button type="submit" name="btnABC" value="ABC">送信ABC</button>
</form>

ボタンをクリックすると、実際に送信されてURLの変化を確認できます。

このようにHTML文書だけでvalue属性値を使用する場合は、form要素内に入力要素を 配置してから、送信を行うことで、送信データの値として利用されることが多いと思います。 もちろん、それだけではなく単純に文字を表示することにも利用する場合があります。

目次に戻る

input要素のbutton型のvalue属性 (文字値)

input要素のbutton型のvalue属性は主にボタンに表示されるラベルとして利用されることが多いようです。 もちろんform要素の送信値としても利用できますが、ボタンという要素の機能としてクリックされて、それに対しての処理が実行されるという 性質上、送信の値ではなく、単純にボタンに表示される文字としての役割が多いといえそうです。

<input type="button" value="ボタンのラベル">

目次に戻る

input要素text型のvalue属性 (文字値)

input要素のtext型は、その性質上form要素内に配置して使用されます。 必然的にvalue値はデータの送信値として利用することが多くなります。

<form action="送信先のURL" method="GET">
	<p><input type="text" name="txtABC" value="ABC"></p>
	<p><input type="submit" value="送信"></p>
</form>

上記のサンプルの場合2つのinput要素がform要素内に配置してあります。 一つはsubmit型で送信ボタンの役割となり、送信データの値はtext型のvalue値となります。 サンプルではtext型が1つしかありませんが、これが複数あった場合も同様に各text型のvalue値がname属性値とセットで送信されます。
今回、送信されるデータは以下の様になります。

URL?txtABC=ABC

目次に戻る

input要素number型のvalue属性 (文字値)

input要素のnumber型もtext型と同様に、その性質上form要素内に配置して使用されます。 しかし、入力要素の仕様上、数値の入力をすることから単純に計算をさせるための値の取得にとどまるかもしれません。 これは送信データというよりも計算するための値として使われる可能性もあるので、 今回のサンプルではjavascriptで計算の処理を検証してみます。

<p><input type="number" id="idNumY" value="20"></p>
<p><input type="number" id="idNumZ" value="10"></p>
<p><input type="button" id="idAddition" value="足し算" onclick="evtAdd()"></p>
<p><input type="text" id="idNumA" value="答え"  disabled></p>
<script>
	function evtAdd(){
		idNumA.value = Number(idNumY.value) + Number(idNumZ.value);
	}
</script>

上記のサンプルではjavascriptを使用しているので、理解できない方はjavascriptに慣れてから、もう一度見ていただければ と思います。ここで理解できる方を対象にお話しすると「Numberオブジェクト」を使って数値に変換している ??
ということは ???

そうなんです。number型の入力要素ですが、値は文字型になるので数値に変換してから計算をするということになります。 この様にinput要素のvalue値は文字型となりますので、使用する際はお気を付けください。

目次に戻る

select - option要素のvalue属性 (文字値)

このoption要素もform要素からの送信に使用する値がvalue値になります。

<form action="送信先のURL" method="GET">
	<select name="namSelect"> 
		<option value="valABC">noneValue</option>
		<option value="valXYZ">noneValue</option>
	</select>
	<p></p>
</form>

ここで添付されるデータは以下の通りです。

?namSelect=valABC,又は、?namSelect=valXYZ

補足ですが、option要素のvalue属性は必須ではありません。value属性がない場合は 内包されたコンテンツが送信値となります。

?namSelect=noneValue

目次に戻る

datalist要素のvalue属性 (文字値)

datalist要素のvalue値といっても、結局のところselect要素と同じで、option要素のvalue値の ことになります。ただし、datalist要素の子要素としてoption要素を使った場合はvalue属性が必須となります。 select要素のようにvalue属性を省略しても内包コンテンツがvalue値の代替としては機能しません。

<form action="送信先のURL" method="GET">
	<input list="arealist" type="text" name="area"> :テキストボックスをクリックするとvalueが表示されます。
	<datalist id="arealist">
		<option value="valA">
		<option value="valB">
		<option value="valC">
	</datalist>
	<p><input type="submit" value="送信"><p>
	<p><input type="reset" value="リセット"></p>
</form>
:テキストボックスをクリックするとvalueが表示されます。

datalist要素の場合はinput要素の併用が必要です。input要素のlist属性にdatalist要素のid属性値を指定する必要があります。 送信される添付データは以下のフォーマットとなります。

?input要素のname属性値=option要素のvalue属性値

目次に戻る

progress要素のvalue属性(実数値)

progress要素はvalue値を設定することで進歩値を目視できる要素です。

<progress max=100 value=30>30%</progress>

30% :メーターの値がvalueです

目次に戻る

meter要素のvalue属性(実数値)

meter要素はvalue値を設定することで計量値を目視できる要素です。

<meter max=100 min=0 value=70>70%</meter>

70% :メーターの値がvalueです

目次に戻る

ol要素 - li要素のvalue属性(整数値)

ol要素は番号付きのリストを表す要素です。 内包されたli要素に自動番号をつけて表示することができますが、この番号の値がvalue値となります。

<ol start="10">
	<li>リスト部分</li>
	<li>リスト部分</li>
	<li>リスト部分</li>
	<li value="20">リスト部分</li>
	<li>リスト部分</li>
	<li>リスト部分</li>
</ol>
  1. リスト部分
  2. リスト部分
  3. リスト部分
  4. リスト部分
  5. リスト部分
  6. リスト部分

この場合、start属性で開始番号を指定することにより、その開始番号から自動番号が割りあてられていますが、 途中でvalue属性値を強制的に変更することで番号制御が変更されています。

目次に戻る

まとめ、というか感想

以上でvalue属性についての説明は終りにします。 value属性をもつ要素は、多くありませんが、現時点ではこのページだけでの説明は差し控えさせていただこうと思います。 私としては実際にvalue属性を使用してみながら検証していくことが、この属性に慣れていく早道ではないかと考えます。

今回も検証にお付き合いいただきまして、ありがとうございました。

目次に戻る