このページについて
このページではHTMLで使う事ができるvalueの機能と使い方を解説しています。
value属性
valueは使用するタグによってその機能が異なってきます。使えるタグはbuttonタグ/inputタグ/meterタグ/liタグ/optionタグ/progressタグです。
valueの書き方
まずはある程度の機能が共通している、buttonタグ/inputタグ/optionタグでの使い方から解説します。これらは「その要素の初期値を設定する」という機能になります。
<button value="テキスト">ボタン</button>と書いた場合、このボタンは一体どうなるかというと
見た目は変わりません。しかしJavaScript等でこのボタンのvalueを取得するとこうなります。
ボタンという文字ではなく、そのタグに付与されているvalueが取得できています。これはinputタグ/optionタグでも同じです。
ちなみにinputタグで使う場合に、ユーザーから何かしらを入力してもらうために必要なvalueですがvalueを設定するとプレースホルダー的な感じで最初から入力された状態になります。これを回避したい場合、何も入力しないという方法をとればOKです。別のページで使った物ですが、そのまま貼り付けておきます。10行目にvalueを使っています。
このように初期値を無しにすることで、入力欄には何もないようにできますし、受け取った値をそのまま使う事ができるようになります。
liタグで使うvalue属性
liタグで使う場合は、各項目の番号の開始番号を指定できます。実際にサンプルを見ていただいた方がわかりやすいと思います。
<ol>
<li value="200">リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>と書くと
- リスト1
- リスト2
- リスト3
このように先頭が200スタートで、その次のリストには201、202というように番号が与えられていきます。
meterタグで使うvalue属性
meterタグで使う場合はゲージの現在の値を指定します。これは進行状況を示すprogressタグとは違い、固定値的な扱いとなります。
<label for="m1">ラベル</label>
<meter id="m1" value="2" min="0" max="5">ゲージ</meter>このようにラベルとメーターを書いた場合は、以下のようになります。
位置がずれていてよく分からない感じにはなっていますが、meterタグのおおよその感じが伝わるでしょうか。idはラベルと一致するものを使い、valueで現在地(表現したい値)を指定。minとmaxはそのmeterの最小値と最大値を指定します。つまりこのゲージの最小値は0で、最大値は5となります。
minとmaxを指定せず、valueのみ指定した場合はパーセンテージで扱われます。
<meter value="0.8">80%</meter>progressタグで使うvalue属性
progressタグで使う場合、進行状況を扱う事ができます。こちらはJavaScriptと組み合わせてアニメーションっぽく表現するのもアリですが、今回は全く動かないものを使います。
<label for="m2">ラベル2</label>
<progress value="30" max="100">30%</progress>こちらはvalueとmax属性しか使えないので、最小値は常に0です。これはこうなります。
まとめ
value属性は使うタグによって機能が異なってきます。それぞれの使い分けをしっかりと把握し、適したものを使っていきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。