| 目次 | 索引 |
|---|---|
検索エンジンのホームページには、検索語を入力する欄や検索を開始するボタンがあります。 検索語を入力して検索ボタンをクリックしますと、検索結果が表示されます。 また、ウェブ・メールのホームページには、本文を入力する欄や送信ボタンがあります。 本文を入力して送信ボタンをクリックしますと、メールが送信されます。 このようなページでは、フォームとよばれるHTML要素が使われています。
フォーム （ form ）とは、HTMLドキュメントの中で、入力欄やボタンなどをまとめるている範囲のことです。 入力欄やボタンなどは、 コントロール （ control ）とよばれます。 一般的に、フォームはコントロールだけでなく、段落や強制改行なども含みます。
フォームが使われているホームページを表示しますと、コントロールは初期値の状態で表示されます。 ユーザは、入力欄にテキストを入力したりしてコントロールを変更し、フォームを完成させます。 最後に、ユーザが送信ボタンをクリックしますと、フォーム・データが送信され、指定されたフォーム処理プログラムが動くのです。
フォームを構成するタグは
<form>
です。
このタグには
action属性
が必要です。
この値は、フォーム処理プログラムのURLです。
また、
method属性
も指定できます。
この値は"get"か"post"で、これはフォーム・データの送信方法を意味しています。
残念ながら、情報処理センターのウェブ・サーバでは、フォーム処理プログラムは利用できないようです。
そこで、この授業で作成するホームページでは、
action
属性も
method
属性も書かないことにします。
この場合、送信ボタンをクリックしても、フォーム・データは処理されません。
授業の目的を、フォーム・データの処理ではなく、コントロールについて理解することとします。
授業で扱うコントロールは次の通りです。
HTMLでコントロールを表すには、一般的には
<input>タグ
を用います。
このタグに終了タグはありません。
また、一般的には、コントロールの種類は
type属性
、コントロールの名前は
name属性
、コントロールの初期値は
value属性
で指定します。
ただし、コントロールによってはこの通りではありません。
テキスト入力
（
text input
）は、テキストが一行入力できる欄です。
これは、
<input type="text">
と書きます。
パスワード入力
（
password input
）も、テキストが一行入力できる欄です。
ただし、入力中のテキストは隠されます。
これは、
<input type="password">
と書きます。
テキスト入力もパスワード入力も、
size属性
を使うと入力欄の大きさ（桁数）が指定できます。
<form> <p> ユーザ名: <input type="text" name="username" size="8"><br> パスワード: <input type="password" name="password" size="8"> </p> </form>
チェックボックス
（
checkbox
）は、クリックするとオン／オフが切り替えられるスイッチです。
これは、
<input type="checkbox">
と書きます。
チェックボックスは単独でも使えますが、いくつかのチェックボックスをまとめて、一つのグループにする場合もあります。
一つのグループの中から複数が選択可能という意味です。
name
属性の値を同じにすると、同じグループのチェックボックスと見なされます。
ラジオ・ボタン
（
radio button
）は、
<input type="radio">
と書きます。
ラジオ・ボタンは、いくつかまとめて一つのグループにするのが普通です。
クリックしたスイッチがオンになり、そのグループの他のスイッチがオフになります。
一つのグループの中から一つが選択可能という意味です。
name
属性の値を同じにすると、同じグループのラジオ・ボタンと見なされます。
チェックボックスとラジオ・ボタンの
value
属性は、初期値ではなく、グループの中でチェックボックスやラジオ・ボタンを特定する値になります。
また、
checked属性
を使いますと、そのチェックボックスやラジオ・ボタンは、初期状態でオンになります。
<form> <p> 性別: <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性<br> 食事の用意: <input type="checkbox" name="meal" value="dinner">夕食 <input type="checkbox" name="meal" value="breakfast" checked>朝食 </p> </form>
送信ボタン
（
submit button
）は、クリックするとフォーム・データが送信されるボタンです。
これは、
<input type="submit">
と書きます。
リセット・ボタン
（
reset button
）は、クリックするとフォームが初期値の状態になるボタンです。
これは、
<input type="reset">
と書きます。
送信ボタンとリセット・ボタンの
value
属性は、初期値ではなく、ボタンのラベルです。
<form> <p> <input type="submit" value="送信する"> <input type="reset" value="やり直す"> </p> </form>
メニュー
（
menu
）を用いますと、あらかじめ用意された項目の中から選択ができます。
メニューを表すには、
<input>
タグではなく、
<option>タグ
と
<select>タグ
を組み合わせます。
まず、メニューの各項目を
<option>
〜
</option>
で囲みます。
そして、この並び全体を
<select>
〜
</select>
で囲みます。
メニューの場合、
name
属性は
<select>
タグに書き、
value
属性は
<option>
タグに書きます。
ただし、
value
属性は初期値ではなく、メニューの中で項目を特定する値になります。
また、
<option>
タグで
selected属性
を使いますと、その項目は初期状態で選択されます。
<form> <p> 部屋の広さ: <select name="room"> <option value="j6">六畳間</option> <option value="j8" selected>八畳間</option> <option value="j10">十畳間</option> </select> </p> </form>
複数行テキスト入力
（
multi-line text input
）は、テキストが複数行入力できる欄です。
複数行テキスト入力には、
<input>
タグではなく
<textarea>タグ
を使います。
具体的には、初期値を
<textarea>
〜
</textarea>
で囲みます。
value
属性は使いません。
複数行テキスト入力の欄の大きさは、
rows属性
と
cols属性
で指定します。
rows
属性が行数、
cols
属性が桁数を表します。
<form> <p> その他の連絡事項:<br> <textarea name="other" rows="5" cols="30"> その他の連絡事項はここに記入してください。 </textarea> </p> </form>
アンケートのホームページを作成してください。 以下の例を参考にして、質問をいくつか考え、回答しやすいようにコントロールを配置してください。 できれば、今日紹介したコントロールをすべて使ってください。
（今回は、余力のある人の演習問題はありません。）
（授業中に例を与えました。近日中に例を補いますので、欠席者はそのとき問題を確認してください。）
今日の演習10に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け（6/25）を明記してください。