いろいろなコントロール2

今回は、前回までに紹介しなかったフォームコントロールを紹介します。

といっても、主要なコントロールは前回までに紹介したので今回はおまけ程度になります。

meter要素

まず紹介するのはmeter要素です。これはその名のとおりメーターで、またゲージとも呼ばれますね。

これは、一定の範囲内にある数量を表します。一定の範囲内というのは、上限と下限が決まっていて、その範囲内にある値ということです。

具体例としては、例えばハードディスクの使用量などがあります。例えば500GBのハードディスクだとすると、下限は0GB、上限は500GBとなりますね。そのうち現在何GBかということをmeter要素で表すことができます。その一方、「高さ」や「重さ」を表すのには不適切です。下限は0m,0kgで分かりますが、上限が分からないからです。

この要素は、ユーザーがメーターを動かして変更できるわけでもなく、特にフォームと一緒に使うことが無いかも知れません。しかし、一応フォームコントロールの一種ということになっています。

さて、メーターの数値はvalue属性によって決められます。また、最小値はmin属性、最大値はmax属性です。min,maxが無い場合、範囲は0～1になります。ちなみに小数も可能です。

つまり、例えば難易度が5段階中3の場合、次のようにして表せます。

難易度：<meter min="1" max="5" value="3">3/5</meter>

これを実際に表示すると、難易度：3/5 となります。

メーターが表示されたと思います。ところで、meter要素の中に入っているのは何でしょう。これはメーターをうまく表示できないブラウザ（古いブラウザやテキストブラウザ）のためのものです。適切に何か書いておきましょう。

さらに、low属性、high属性という2つの属性があります。これらがあると、メーターの範囲を「低」「中」「高」の3つに分類することができます。lowより下が「低」、highより上が「高」、真ん中が「中」です。

これらにさらにoptimum属性を加えることができます。このoptimum属性の意味は「最適値」で、このoptimum属性の値が低、中、高のどの領域にあるかによって、どこの領域が最適かが変わります。

最適というのは、その値が望ましいということです。例えば難易度なら、一概には言えませんが、一般には高すぎず低すぎずがよいということで、最適値は「中」にｎなることでしょう。

メーターの状態は3つあり、まず最適の領域があり、その隣は準最適、さらにその横が非最適ということになります。

例えば最適値が「中」の場合、その隣の「低」「高」が準最適となり、非最適の領域はありません。最適値が「低」なら「中」が準最適、「高」が非最適となります。逆も同じです。

さっきの難易度にこの最適値を付け加えてみましょう。

難易度：<meter min="0" max="5" value="3" low="3" high="3" optimum="3">

今回、全部3です。これはどういうことかというと、「低」は3より下、「高」は3より上なので、「中」は3だけということです。そして最適値は3なので、「中」が最適ということになります。

1から5まで並べてみました。3だけが最適なので、3だけ他と違うと思います。例えばChromeの場合現在（2011年4月）だと最適は緑、準最適は黄、非最適は赤で表示されます。ちなみにOperaはどうも挙動が変で、Chromeと結果が違うようです。Firefoxはそもそもまだmeter要素に対応していません。

さて今度は、最適値を「高」にしてみましょう。するとこうなります。

難易度：<meter min="0" max="5" value="3" low="3" high="3" optimum="5">

「高」である4～5が最適となり、「中」の3が準最適、1～2は「低」で非最適になっていることが分かると思います（しかし、現在のところChromeも少しおかしいようで、なぜか3も最適として扱われています）。

progress要素

次に、meter要素と似たような要素にprogress要素があります。これもmeter要素と同じくフォームコントロールの一種ですが、単体で使われることのほうが多いと思われます。

progress要素の意味は進捗状況です。つまり、全体のうちどれだけ完了したかを表します。こう説明すれば、meter要素とは互いに役割が違うということが分かると思います。meter要素では、現在進行中の作業の進捗状況を表すことはできません。

progress要素にもmeter要素と同じくvalue属性, max属性があります。始点（最小値）は常に0です。作業開始時にはまだ何も進んでないわけですから当然といえますね。

ちなみに、中にはゲージを表示できないブラウザ用のテキストが入るという点も同じです。それでは具体例として、充電の進み具合をつくってみましょう。

充電中…<progress value="70" max="100">現在70%充電</progress>

充電中…現在70%充電

こんな感じで、現在充電が進行中で70%完了したことが分かります。

ただ、充電で注意すべきことは、充電の進み具合はprogress要素ですが、電池残量はprogressでなくmeter要素で表すべきであるという点です。「電池残量」そのものは進行するようなものではありません。

また、今回の場合単位は%でしたが、単位は自由です。したがって、必ず最大値が100である必要がありません。例えば、ファイルのコピーの場合、ファイルのサイズを最大値として現在どれだけコピーし終えたかを示すことが可能です。

コピー中:<progress value="123456" max="300000">123456バイト完了</progress>

この場合、300000バイトのファイルをコピーしていて、そのうち123456バイトをコピーし終えたことが分かります。単位はprogress要素で明示的に示すことはできませんが、示したければtitle要素などに書くといいでしょう。meter要素にも同じことがいえます。

また、未確定プログレスバーというものがあります。これは、作業が進行してはいるが、現在の進捗状況がどれくらいか分からない場合に使われます。未確定プログレスバーは、value属性を省略すると作ることができます。

また、JavaScriptを使って実際にプログレスバーを動かすこともできます。試してみましょう。

output要素

output要素はフォームコントロールの一種で、計算結果を表します。input要素などと同じようにname属性・value属性を持ちます。

基本的に、JavaScriptを使って計算結果を表示するときに使われます。例えば、ネットショッピングのページで、商品を選択したら自動的に金額を表示するなどの機能を作るときの利用できます。逆に、そういうふうにJavaScriptを使わなければあまり使う機会はありません。

output要素の子はフレージング・コンテンツですが特徴があり、value属性が変更されるとその子テキストも一緒に変更され、value属性の値が子として表示されます。そのため、output要素のvalue属性を変更するだけで計算結果を表示できるということになります。

次にサンプルを用意してみました。ソースはJavaScript部分などを省略した簡潔なものになっています。

商品を選択してください：<select><option>りんご</option>
<option>みかん</option><option>ぶどう</option></select>
値段：
<output value="0">0</output>円

商品を選択してください： りんご みかん ぶどう 値段：

0

円

また、for属性を付けることができます。これはlabel要素のfor属性とは似ているのものの異なるもので、計算に関与する要素のidとなっています。このサンプルの場合、セレクトボックスの選択によって結果が変わるので、そのselect要素のidを指定すべきです。また、複数の要素が関与する場合、スペースで区切って複数指定できます。したがって、次のようになります。

商品を選択してください：<select id="fruits"><option>りんご</option>
<option>みかん</option><option>ぶどう</option></select>
値段：
<output value="0" for="fruits">0</output>円

fieldset要素

fieldset要素は、複数のフォームコントロールをグループ化する要素です。つまり、fieldset要素でコントロールたちを囲む、すなわちコントロールたちをfieldset要素の子要素とすることで、木構造的関係を以てグループ化されたことになります。

そして、このグループに名前を付けることができます。それに使うのがlegend要素です。これはfieldset要素の最初の子として入れることができ、名前を表します。これをまとめた次のサンプルを見てみましょう。

<fieldset>
  <legend>ユーザー情報</legend>
  <p>名前：<input size="30" name="name"></p>
  <p>年齢：<input size="5" name="age"></p>
</fieldset>

fieldset要素にはもう一つ面白い特性があるのですが、それは次回紹介します。