Section 11 : フォームの基礎(3)

 Section 10 に続いて,<INPUT> で生成されるフォームコントロールを解説していこう。

チェックボックス

 yes/no の 2 つの状態を表すチェック・ボックスは TYPE="checkbox" で生成される。

 チェックボックスは,それがチェック済みになっているときのみ,データを名前と VALUE-属性の値の組として渡す。

<P>ご利用になったチュートリアルをチェックしてください:<BR>
  <INPUT TYPE="checkbox" NAME="fscs" VALUE="on"> First step CSS<BR>
  <INPUT TYPE="checkbox" NAME="sfcs" VALUE="on"> Step forward CSS<BR>
  <INPUT TYPE="checkbox" NAME="tocs" VALUE="on"> Take off with CSS</P>

ご利用になったチュートリアルをチェックしてください:
First step CSS
Step forward CSS
Take off with CSS

 このような選択式のフォームコントロールは,リストボックスでも生成できる。

ラジオボタン

 TYPE="radio" で生成されるラジオボタンも yes/no の選択式のコントロールであるが,あるグループから 1 つを選ぶ場合に用いられる点がチェックボックスと異なる。

 同じ NAME 属性の値を持つラジオボタン群の中で 1 つが on になると,ほかはそれに連動してすべて off になる。グループ内で 2 つ以上のラジオボタンに CHECKED を書くのはおかしい。

 フォームデータとして渡されるのは,“(名前)=(on になっているラジオボタンの VALUE 属性)”である。

<P>Academic HTML をご利用になるのは:<BR>
  <INPUT TYPE="radio" NAME="freq" VALUE="first" CHECKED> はじめて<BR>
  <INPUT TYPE="radio" NAME="freq" VALUE="sometimes"> ときどき<BR>
  <INPUT TYPE="radio" NAME="freq" VALUE="often"> しばしば<BR>
  <INPUT TYPE="radio" NAME="freq" VALUE="always"> 頻繁に</P>

Academic HTML をご利用になるのは:
はじめて
ときどき
しばしば
頻繁に

たとえば,上記の例ではすべてのラジオボタンが“freq”という同じ名前でグループ化されており,その中から 1 つのみを選ぶようになる。このとき,“しばしば”を選択してフォームを送信すると“freq=often”が送られる。

送信ボタンとリセットボタン

 まず,TYPE="submit" で生成される送信ボタンは,それを含んでいる <FORM> の ACTION 属性に与えられた URI にフォームのデータを渡す。もし,onSubmit 属性が指定されていたら,その前にスクリプトを実行する。

 1 つのフォームは,2 つ以上の承諾ボタンを含んでいても構わない。この場合,押された承諾ボタンのみが有効になるので,1 つのフォームが複数の種類の動作を行う可能性がある場合(e.g. サーチエンジンでの“検索”と“絞り込み検索”)に有用である。どのボタンが押されたかの識別は,NAME 属性で行う。

 逆に,TYPE="reset" で生成されるリセットボタンは,<FORM> 内すべてのコントロールを初期状態に戻す。<FORM> に onReset 属性が指定されていたら,その前にスクリプトを実行する。属性の与え方は,送信ボタンの場合と同じである。

<P>リセットボタンの動作を確認してみましょう。</P>
<P><INPUT TYPE="text" NAME="text1" SIZE="60" VALUE="テキストボックスを書き換えてください。"><BR>
  <INPUT TYPE="checkbox" NAME="check" VALUE="on" CHECKED> このチェックをはずしてみてください。</P>
<P>以下のリセットボタンを押してみましょう。<BR>
  <INPUT TYPE="submit" VALUE="送信"> <INPUT TYPE="reset" VALUE="リセット"></P>

リセットボタンの動作を確認してみましょう。


このチェックをはずしてみてください。

以下のリセットボタンを押してみましょう。

 送信ボタンやリセットボタンには,さらに利便性の高い <BUTTON> によっても生成できる。ただし,<BUTTON> は HTML 4.0 で新しくサポートされたものであるので,互換性に注意して使用することになる。