第7章：入力フォームを作る（その１）

今回は、サイトの感想を求めるメールフォームとします。CGIやサーバサイドスクリプトは使いません。

（文書型宣言〜body要素の開始タグ）

<form method="POST" action="mailto:（ご自分のメールアドレス）">
<p>お名前<br>
<input size="20" type="text" name="from"></p>
<p>メールアドレス<br>
<input size="40" type="text" name="mail_address"></p>
<p>パソコン歴<br>
<select name="pc">
<option selected>選択してください</option>
<option value="1">半年未満</option>
<option value="2">半年以上1年未満</option>
<option value="3">1年以上3年未満</option>
<option value="4">3年以上</option>
</select></p>
<p>使っているOS<br>
<input type="checkbox" name="os1" value="1">Windows　
<input type="checkbox" name="os2" value="1">MacOS　
<input type="checkbox" name="os3" value="1">その他</p>
<p>サイトの出来を評価すると<br>
<input type="radio" name="site" value="1">だめ　
<input type="radio" name="site" value="2" checked>まあまあ　
<input type="radio" name="site" value="3">よい</p>
<p>そのほかコメントがあればどうぞ。<br>
<textarea rows="5" cols="60" name="comment"></textarea></p>
<p><input type="submit" value="送信する"></p>

（body要素の終了タグ〜html要素の終了タグ）

実際にフォームを作るときの手順は以下のようになります。

1. フォームの作成
2. ブロック要素の配置
3. フォームの各部品の配置

フォームそのものは、メニュー → 挿入 → フォームと入力部品 → フォームで入力します。フォームを入力すると、入力部品の画面が出てきます。ページ編集画面には、黒の点線で囲われた枠が出てきます。HTMLソース編集画面にはform要素が挿入されます。

各項目の説明

アクション

送信されたフォームのデータを処理するURLを指定します。
ここで入力した値は、action属性の値となります。

メソッド

フォームのデータを送信する際にどのHTTPメソッドを使用するかを指定します。Postにするとフォームのデータはフォームの本文として送信されます。Getに指定すると、action属性でしてしたURLの後に「?」とフォームのデータを追加してURLの形式で送ってしまうので、セキュリティ上の問題が生じてしまいがちです。また、使える文字数にも制限がありますので、多くのデータのやりとりには向いていません。
ここで選択した値は、method属性の値となります。

エンコードの種類

フォームのデータを送信するときのMIMEタイプを指定します。ファイル選択を行う場合は、「multipart/form-data」を指定する必要があります。
ここで指定した値は、enctype属性の値となります。

名前

スクリプト言語から参照することができるようにするための名前です。
ここで指定した値は、name属性の値となります。

今回の例作成に必要な操作

1. 「アクション」に　mailto:自分のメールアドレス　と入力します。
2. メソッドはPostを選択します。

実は、HTML4.01 StrictDTDでは、form要素の直下にフォームの各部品（input,select,textarea）をおくことができません。以下にあげる要素の下に置くことになります。

ブロック要素

• address
• div
• fieldset
• h1〜h6
• pre

インライン要素

HTML4.01 StrictDTDで定義されているモノのうち、以下の要素を除いたもの

• br
• button
• img
• input
• select

そのほかの要素

• caption
• dd
• del
• dt
• ins
• legend
• li
• td
• th

お名前とメールアドレスの部分は、1行テキストボックスです。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →1行テキストボックス　とすると、以下のような画面になります。

各項目の説明

名前

この１行テキストボックスに対する名前を付けます。名前はほかの入力部品と重ならないようにする方がよいでしょう。名前にはアルファベット、数字、アンダーバー、ハイフン、ピリオド、コロンが使用可能です（最初の文字はアルファベットであること）。
ここに入力された項目はname属性の値となります。

入力タイプ

テキストかパスワードを選択します。テキストを選べば１行テキストボックスに、パスワードを選択すれば、パスワード入力ボックスになります。
ここで選択した値は、type属性の値となります。テキストがtext、パスワードがpasswordとなります。

カラム数

１行テキストボックス/パスワードテキストボックスの幅を半角文字数で指定します。
ここで入力した値は、size属性の値となります。

最大入力文字数

入力可能な最大文字数を半角文字数で指定します。
ここで入力した値は、maxlength属性の値となります。

初期値

入力フィールドの初期値を指定します。
ここで入力した値は、value属性の値となります。

無効化

チェックを入れると、入力操作が行えなくなります。サーバーにもデータが送信されません。
disabled属性が挿入されます

入力不可

チェックを入れると、入力値の変更が行えなくなります。サーバーにはデータが送信されます。
readonly属性が挿入されます。

今回の例作成に必要な操作

1. 名前に「from」と入力。（メールアドレスの時は「mail_address」に変更）
2. 入力タイプはテキストのままでよい
3. カラム数は20のままでよい（メールアドレスのときは40に変更）

パソコン歴の部分は、メニューになっています。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →オプションメニュー　とすると、以下のような画面になります。

各項目の説明

名前

このメニューに対する名前を付けます。
ここに入力された値は、select要素のname属性の値となります。

無効化

１行テキストボックスの項を参照のこと。

項目

メニューで表示される選択肢を入力します。
ここで入力した内容は、option要素の内容となります。

値

選択肢が選択されているときにサーバーに送信する値を入力します。
ここで入力した内容は、option要素のvalue属性の内容となります。

項目と値については、入力後に登録ボタンをクリックしないと、実際に反映されませんので気をつけましょう。

また、初期値については、選択肢の中で反転しているものとなります。特に指定をしなかった場合、最後に入力したものが初期値となってしまいますのでこれも気をつけてください。

今回の例作成に必要な操作

1. 名前に「pc」と入力。
2. 項目に「選択してください」と入力。
3. 「登録」ボタンをクリック。
4. 項目に「半年未満」と入力。
5. 値に「1」を入力。
6. 「登録」ボタンをクリック。
7. 4〜6の操作を残りの選択肢についても行う。
8. 一番上にある選択肢である「選択してください」をクリックする。
9. 「OK」ボタンをクリック。

使っているOSの部分は、チェックボックスとなっています。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →チェックボックス　とすると、以下のような画面になります。

各項目の説明

チェックボックス１個ごとにこの設定が必要です。

名前

このチェックボックスの名前です。
name属性の値となります。

値

項目が選択されているときに、サーバーに送信される値です。
value属性の値となります。

選択

チェックが入っていると、あらかじめ選択された状態に出来ます。
checked属性が挿入されます。

無効化/入力不可

１行テキストボックスの項を参照のこと。

今回の例作成に必要な操作

1. 名前に「os1」と入力する
2. 値に「1」と入力する
3. 「OK」ボタンをクリックする
4. 選択肢のラベルを入力する
5. 1〜4の操作を残りの選択肢についても行う。

サイトの出来を評価する部分はラジオボタンになっています。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →オプションメニュー　とすると、以下のような画面になります。

各項目の説明

グループ名

一連のラジオボタンに対する名前です。共通する項目すべてに同じ名前が必要です。
name属性の値となります。

選択値

選択されているときにサーバーに送信される値です。
value属性の値となります。

選択/無効化/入力不可

選択についてはチェックボックスの項を参照のこと。無効化/入力不可は１行テキストボックスの項を参照のこと。

今回の例作成に必要な操作

1. グループ名に「site」と入力する。
2. 選択値に「1」を入力する。
3. 「OK」ボタンをクリックする。
4. 選択肢のラベルを入力する。

今回、初期値は2番目の「まあまあ」となっています。初期値をセットするためには、2の操作のあとに、「選択」のチェックボックスをONにしてください。

コメントを入力してもらう部分は、複数行テキストボックスになります。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →チェックボックス　とすると、以下のような画面になります。

各項目の説明

名前

複数行テキストボックスに対する名前をつけます。
ここで入力した値は、name属性の値となります。

行数

複数行テキストボックスで表示させる行数を指定します。
ここで入力した値は、rows属性の値となります。

カラム数

１行あたりの表示幅を半角文字数で指定します。
ここで入力した値は、cols属性の値となります。

初期値

あらかじめ表示させるテキストを入力します。
ここで入力した値は、textarea要素の内容となります。

無効化/入力不可

１行テキストボックスの項を参照のこと。

今回の例作成に必要な操作

1. 名前に「comment」と入力。
2. 行数は「5」を入力。
3. カラム数は「60」を入力。
4. 「OK」ボタンをクリックする。

「送信する」と書かれたボタンは、送信ボタンです。ボタンをクリックするか、メニュー → 挿入 → フォームと入力部品 →プッシュボタン→送信ボタン　とすると、以下のような画面になります。

各項目の説明

名前

ボタンに対する名前を付けます。
name属性の値となります。

ボタンに表示するラベル

ボタンに表示するラベルを入力します。画像ボタンの場合は入力不要です。
ここで入力した値はvalue属性の値になります。

ボタンの種類

ボタンの種類を選択します。送信、リセット、画像、プッシュボタンの４種類から選択します。
ここで入力した値はtype属性の値になります。送信がsubmit、リセットがreset、画像がimage、プッシュボタンがbuttonです。

画像ファイル

ボタンの種類で画像を選択したときに、画像へのURLを入力します。
ここで入力した値は、src属性の値となります。

無効化/入力不可

１行テキストボックスの項を参照のこと。

代替テキスト

ボタンの種類で画像を選択したとき、画像を表示できない場合に表示する代わりのテキストです。
ここで入力した値は、alt属性の値となります。

今回の例作成に必要な操作

1. ボタンに表示するラベルに「送信する」と入力。
2. ボタンの種類は、「送信」のまま。
3. 「OK」ボタンをクリック。

今回は、実際の入力フォームを作りながら説明をしましたが、実はフォームの部品にはまだ紹介していないものがあります。次章で紹介します。

今回作成したメールフォームでは注意しなければいけない点があります。

• 送ったメールは、受信者側で再変換（デコード）する必要があります。そのままでは文字化けして読めません。
• メールフォームで送信ボタンを押すと、メーラーが起動しますが、mailto:リンクで自動起動するメーラーでないといけません。

ということで、環境に依存しないメールフォームが必要な場合は、CGIとの組み合わせとなります。