フォームとコントロール・id属性

フォームとの関連付けとid属性

フォームコントロールは、基本的にフォームに属しています。そして、そのフォームが送信されたときに、そのコントロールのデータが送られるのです。

フォームコントロールがどのフォームに属しているのかというのは、HTMLの木構造の関係によって決まるのでした。つまり、そのコントロールの要素が属しているform要素によって決まるということです。逆に言うと、あるform要素に属するコントロールは、そのform要素の中にあるコントロールだということです。

ところが、それを覆す属性があります。それがform属性です。全てのフォームコントロールに、このform属性を持たせることができます。このform属性でフォームを指定することで、たとえそのform要素の子でなくても、そのフォームに属すようにすることができます。

しかし、フォームを指定するとはどのようにするのでしょうか。実はそのために使われるのがid属性です。これはすべての要素に付けることができる属性です。このような属性をグローバル属性と呼びます。

id属性は基本的にどんな値でもいいですが、やはり半角英数字が一般的です。そして、スペースを使うことはできません。

そして、要素を識別するためのものですから、同じ文書内で重複してはいけません。同じidを使うことはできないということです。あるidが指定されたとき、そのidを用いて文書内からある1つの要素を特定できないといけません。

具体的なサンプルは、次のようになります。

<form action="..." id="myform"></form>
<p>名前：<input type="text" size="30" form="myform"></p>

このようにidで指定することで、コントロールをformの外に出すことができます。例えばページの広範囲にフォームが広がる場合や、複数のフォームが混ざっている場合に（分かりにくいのでやめたほうが良さそうですが）力を発揮します。

他にもidが活躍する場面はいろいろあります。

送信ボタンとフォーム

フォームに、複数の送信ボタンがあり、押すボタンによって送信先などを変えたいということがあるかもしれません。入力内容が同じなら、別の送信先のために複数のフォームを用意するのは無駄です。そんなときに使える属性があります。

それらは、input要素及びbutton要素ででtype属性が"submit"のときのみ有効な属性で、formaction, formmethod, formenctype, formtarget, formnovalidateがあります。これらは、form要素がもつ属性であるaction, method, enctype, target, novalidateと同じ働きをします。属性名の先頭に「form」がついただけですね。送信ボタンにこれがあると、当然form要素本体に書かれた指定より優先されます。

<form action="A"></form>
<p>
<input type="submit" value="Aに送信">
<input type="submit" value="Bに送信" formaction="B">
</p>

このように使います。

label要素

idつながりで次に紹介するのはlabel要素です。label要素は、input要素のうちチェックボックスやラジオボタンと組み合わせてラベル付きコントロールを作るための要素です。

どういうことかというと、このようなチェックボックスなどの場合、チェックボックス本体をクリックしないとチェックできません。ところが、これをラベル付きコントロールにすると、チェックボックス のようになります。この場合、チェックボックスの横の文字をクリックしてもチェックできるようになります。この文字の部分はキャプションと呼ばれます。これは便利ですね。

そして、label要素の使い方は簡単です。input要素とキャプションをまとめて囲むだけです。つまり、こうなります。

<label><input type="textbox">チェックボックス</label>

ところで、idはどう関わってくるのでしょうか。それは、チェックボックス（など）とキャプションが離れている場合に関わってきます。このようにlabel要素でまとめて囲む場合、コントロールとキャプションが離れているということができません。

このときに使うのがfor属性です。使い方は簡単で、for属性にコントロールのidを指定することで、そのコントロールと結び付けられます。

具体例としては、この左にあるチェックボックスのキャプションを、ここに設置するということができます。試しにクリックしてみましょう。

datalist要素

idつながりでさらにもう1つ紹介します。それはdatalist要素です。これは特殊な要素で、表示されません。

データリストという名前ですが何のリストかというと、実はサジェストのリストです。サジェストとは、他のinput要素に対して、事前に用意した選択肢を表します。入力候補といえますね。ただし、それ以外にユーザーが自分で入力することも可能です。

決められた値以外入力されたくないなら、input要素でなくselect要素を使うべきですが、実はそれでも不完全です。HTML側では完全に対策することはできません。HTMLを書き換えられたらどうしようもないからです。そこで、送信されたデータを受け取るサーバー側で不正な値をブロックする処理が必要になります。

さて、datalist要素の使い方ですが、各選択肢はoption要素を使って書きます。datalist要素本体にはid属性を付けておきましょう。

そして、入力候補を利用したいinput要素では、list属性にdatalist要素のidを指定します。

具体例はこんな感じです。

好きな果物を入力して下さい：

しかし、現在（2011年4月13日）、まだOperaしか対応していないようで、しかもOperaでもvalue属性を指定しないと無視されるなど何か不安定な気がします。理論上は次のような感じでできるはずです。

<input type="text" size="20" list="fruitslist">
<datalist id="fruitslist">
<option>りんご</option>
<option>みかん</option>
<option>ぶどう</option>
</datalist>