会話するコンテンツってええよな〜フォーム系要素〜
動的なHTMLの実現
HTMLは今まで単なる読まれるだけの文書として扱ってきましたが(それでも十分に価値はありますが)、JavaScriptと組み合わせることで閲覧者の働きかけに対して反応し、より広がりのある文書というものを実現することができます。このようなコンテンツをダイナミックHTMLと呼んだりします。閲覧者と会話する、これがHTML文書の理想像の一つだと私は考えています。
で、閲覧者と会話するためには少なくとも閲覧者が働きかけることができるような機構が必要です。その機構の一つとしてフォーム系要素が用意されています。フォーム系要素は閲覧者が入力する場を生み出します。会話はキャッチボールと言いますし、HTMLの方だけがぐだぐだしゃべっても会話は成立しないわけで、閲覧者の方から物を言えるようにしようぜ、ということです。・・・ぐだぐだですね、はい。
ここで一気に冷めたことを言いますが、フォーム系要素だけ覚えても何にもならないです。JavaScriptなどと組み合わせてユーザーの入力に反応しないと会話にはなりません。つまりはJavaScriptを勉強しろと言うことです。正直言ってフォーム系要素はJavaScriptを勉強するときに覚えればいいです。現に私がそうでした。この講座の執筆当初はJavaScriptを勉強してなかったので全くフォーム系要素を使ったことがなく、この講座でフォーム系要素について触れるべきかどうかも悩んでました。私自身知らなかったので。幸い今はJavaScriptもかじりだしてフォーム系要素も割りと使うようになったのですが、それでもなおここでフォーム系要素を説明する意義はあるのだろうか・・・悩ましいですw。今回はこんなスタンスでフォーム系要素を説明していきます。
フォーム系要素の面々
まずはform要素です。これから紹介するフォーム系要素を置くときの外枠となる要素です。イメージとしてはbody要素のフォーム版といったところでしょうか。フォーム系要素は原則この要素の中に記述します。
CGIにデータを送信する場合には以下のように記述します。
<form action="CGIのURL" method="データの受け渡し方法" name="フォーム名" enctype="MIMEタイプ">
method属性はgetとpostの二種類の値が選択できます。name属性はプログラムからデータを参照するときの目印のようなもので、英数字(ただし頭文字は必ず英字)の名前をつけます。これについてはこれ以降説明する要素でも同じです。enctype属性はデータを送るときのエンコード形式を設定します。省略すればデフォルトの設定が採用されるので気にする必要はないでしょう。
CGIへのデータ送信ではなくJavaScript用のインターフェースとして使う場合にはaction属性やmethod属性、enctype属性の設定は不要です。name属性はJavaScriptでも使います。
次にinput要素です。この要素がフォーム系要素のメインです。この要素はtype属性の設定によって様々な入力フォームを扱うことができます。各種設定は以下の通り。
| ソース | 設定内容 |
|---|---|
| <input type="text" name="テキストフィールド名" value="デフォルト表示文章" maxlength="入力できる最大文字数" size="テキストフィールドの横幅"> | 一行のみのテキストフィールドを生成する。 |
| <input type="button" name="ボタン名" value="ボタンに表示される文章"> | ボタンを生成する。 |
| <input type="radio" name="ラジオボタン名" value="データとして送られる文字列"> | ラジオボタンを生成する。ラジオボタン名が同一のものが一つのグループを形成する。 |
| <input type="checkbox" name="チェックボックス名" value="データとして送られる文字列"> | チェックボックスを生成する。チェックボックス名が同一のものが一つのグループを形成する。 |
| <input type="reset" value="ボタンに表示される文章"> | 同一のform要素内のフォームの値をリセットする。 |
| <input type="submit" value="ボタンに表示される文章"> | 入力データをCGIに送信する。 |
input要素はインライン要素である上にform要素の直下に置くことはできないのでp要素などの中に記述します。 正直言ってこの仕様はちょっと・・・って感じですがここは素直に従いましょう。しゃぁないっす。
記述例
<form name="myform"> <dl> <dt>テキストフィールド</dt> <dd><input type="text" name="mytext" value="デフォルト文章"></dd> <dt>ボタン</dt> <dd><input type="button" name="mybutton" value="ボタンだお"></dd> <dt>ラジオボタン</dt> <dd> <input type="radio" name="myradio" value="a"><label>a</label> <input type="radio" name="myradio" value="b"><label>b</label> <input type="radio" name="myradio" value="c"><label>c</label> </dd> <dt>チェックボックス</dt> <dd> <input type="checkbox" name="mycheck" value="a"><label>a</label> <input type="checkbox" name="mycheck" value="b"><label>b</label> <input type="checkbox" name="mycheck" value="c"><label>c</label> </dd> <dt>リセットボタン</dt> <dd><input type="reset" value="リセット"></dd> <dt>送信ボタン(＊実際にはどこにも送信されてないっす)</dt> <dd><input type="submit" value="送信"></dd> </dl> </form>
表示例
上の例に出てくるlabel要素はフォーム系要素の部品、特にラジオボタンやチェックボックスの部品に名前をつけるための要素です。例によってインライン要素です。form直下には置けません。
フォーム系要素については他にtextarea要素、select要素、option要素などがあります。
textarea要素は複数行の文章を入力するための要素です。name属性でテキストエリア名、rows属性で行数、cols属性で一行あたりの文字数を指定します。また、タグの間に挟まれた文章がデフォルトで表示される文章を示します。
記述例
<form name="myform02"> <p> <textarea name="mytextarea" rows="3" cols="20">デフォルト文章</textarea> </p> </form>
表示例
selct要素、option要素はセットで使います。select要素はname属性で選択ボックス名、size属性で表示する行数を指定します。 option要素はvalue属性でデータとして送られる文字列を指定します。
記述例
<form name="myform03"> <p> <select name="pulldown" size="1"> <option value="a">As</option> <option value="b">Br</option> <option value="c">Cl</option> <option value="d">Db</option> <option value="e">Es</option> </select> </p> <p> <select name="list" size="3"> <option value="a">ALGOL</option> <option value="b">BASIC</option> <option value="c">C++</option> <option value="d">Delphi</option> <option value="e">ECMAScript</option> </select> </p> </form>
表示例
select要素のsize属性が1のときはプルダウンメニュー、1より大きいときはリストボックスになります。
今回は以上です。いやぁ、まさかエターならないとは思わんかったわ。今回の講座で言いたいことは結構書いたし、まぁ満足です。心残りと言えばh1〜h6要素あたりのイメージの説明が微妙だったかもしれんかなぁ、と言ったところですね。
今回の講座を生かしていいHTMLを書いて欲しい。それが私の願いです。この講座で勉強したこと、さらにはこの講座自体のソースなども参考にして欲しい。芸は盗め、ってもんです。このページに限らず色々なページのソースを参考にしてみるのも良いと思います。ただ当たり外れはありますが・・・。