HTMLのformタグ
ウェブページから、Perl/CGIプログラムにデータを受け渡すときなどに使用するHTMLの「formタグ」について説明します。
formタグとは、訪問者からの入力情報を受け取るために各種入力エリアを定義するHTMLタグのことです。
formタグの使用用途は幅広く、一番イメージしやすいのが、インターネット上で買い物などをするときに入力する個人情報入力フォームですね。
さらに、検索フォームや、掲示板やウェブログなどの投稿用フォームなど、訪問者から何らかのアクションを起こして欲しいときなどは、必ずといっていいほどformタグが使用されています。
しかし、formタグは、訪問者から何らかの入力情報を受け付けるもので、入力データをチェックしたり加工処理するためには、このサイトで解説しているようなPerl/CGIなどのプログラムが必要になります。
- formタグ
- フォームの入力形式
- formの開始と終了
- formで直接送信
- formタグのテキスト入力
- formの複数行入力
- formのパスワード入力
- formのラジオボタン入力
- formのチェックボックス入力
- formのファイル入力
- formのセレクトボックス
- formのその他入力
formタグ
formタグは、訪問者に入力して欲しいデータのタイプを示すことと、実際に入力されたデータを、CGIプログラムにわたすまでの処理を担当します。
では、実際にformタグを見てみましょう。
<form method="POST" action="./formmail.cgi">
お名前：
<input type="text" name="name">
<br>
メールアドレス：
<input type="text" name="email">
<br>
<input type="submit" value="送信する">
</form>
この例では、名前とメールアドレスを入力するフォームが作成されます。
ちなみに、「submit」と書かれているところは、ボタンになります。
「送信する」とかかれたボタンということですね。
ボタンを押すと、「<form>」から「</form>」までのフォームに入力された各種情報がまとめられて、指定の処理が行われます。
<戻る>
フォームの入力形式
フォームでのデータ入力形式には、さまざまなタイプがあります。
通常のテキスト入力（１行入力タイプのものと、複数行入力タイプのものがあります）。
パスワード入力（入力すると、***と表示されるもの）。
ラジオボタン（複数項目の中から、一つを選択する）。
チェックボックス（複数項目の中から、複数選択する）。
セレクトボックス（複数項目の中から、一つを選択する）。
などなど、訪問者に入力して欲しい情報のタイプや、入力しやすさなどのアクセシビリティーなどを考慮して、適切だと思うものを組み合わせて使います。
前述したフォームタグの例では、名前もメールアドレスも通常のテキスト入力欄を表示させています。
入力して欲しい情報の質によって、入力フォームで提示する入力タイプが異なるのは当然ですね。
formの開始と終了
formタグの開始と終了を表すには、「<form>」と「</form>」を使用します。
開始タグ「<form>」と終了タグ「</form>」のあいだに、さまざまな入力項目を用意します。
感覚的には、表を作成するtableタグに少し似ています。
formタグの開始タグ「<form>」には、フォームから送信するデータの形式と、入力データを送信するCGIを指定することができます。
methodで送信形式を、actionで送信先を指定します。
methodで指定できる送信形式には、POST形式と、GET形式があります。
methodに送信形式を何も指定していなかった場合は、GET形式となります。
POSTとは、フォームのデータのみを送信する形式で、一度に大量のデータを送信することができます。
GETとは、フォームのデータをURLの末尾に追加して送信する形式です。
GET形式で送信した場合、送信できるデータ量には制限があります。
ですから、よくわからない場合は、POST形式を指定しておくのがぶなんです。
actionで指定するデータの送信先は、絶対パスまたは相対パスが使用できます。
POST形式で、formmail.cgiというCGIに送信する場合は、以下のように記述します。
<form method="POST" action="./formmail.cgi">
お名前：
<input type="text" name="name">
<br>
メールアドレス：
<input type="text" name="email">
<br>
<input type="submit" value="送信する">
</form>
formタグに、targetを指定すると、送信後の結果をどのウィンドウ（フレーム）に表示するのかを指定できます。
targetで指定できる項目には、以下のようなものがあります。
1. _blank
使用例：「<form … target="_blank">」
一連のフォーム処理が行われると、新たにインターネットエクスプローラなどのブラウザを立ち上げて表示させるオプションです。
2. _top
使用例：「<form … target="_top">」
フレームの分割を廃止して、画面全体で表示させるオプションです。
3. _self
使用例：「<form … target="_self">」
リンク元と同じウィンドウ（フレーム）に表示させるオプションです。
なにも指定がない場合は、この設定が使用されます。
4. _parent
使用例：「<form … target="_parent">」
親フレームに表示させるオプションです。
5. ウィンドウ名（フレーム名）
使用例：「<form … target="フレーム名">」
任意のウィンドウ（フレーム）に表示させるオプションです。
例えば、上のフレームに入力欄を置き、下のフレームに結果を表示する場合を考えてみます。
チャットなどでよく見られるパターンです。
上のフレームで入力したデータをプログラムに送信し、書き込み処理の結果を下のフレームに表示します。
下のフレームにフレーム名を付けて、target="" にそのフレーム名を指定します。
フレーム名の指定については、また別の機会に説明します。
次に、MIMEタイプの指定について説明します。
formタグにenctypeを設定すると、送信時のMIMEタイプを指定できます。
method="POST"を指定している場合に使用します。
しかしenctypeは、あまり使用しないので、なんとなく覚えておいてくれればいいです（笑）。
enctypeには、以下の指定ができます。
1. application/x-www-form-urlencoded
訪問者がフォーム内に入力した各種情報を、エンコード（変換）された状態で送信します。
エンコードされた内容を読むには、デコード（元に戻す）処理が必要です。
enctypeを指定しない場合は、このタイプが適用されます。
一般的なフォームでは、enctypeの指定は特に必要ありません。
2. multipart/form-data
添付ファイルとして送信されます。
後述するような、入力内容をメール送信させる場合などに使います。
3. text/plain
プレーンテキスト形式で送信されます。
これも、入力内容をメール送信させる場合などに使います。
<戻る>
formで直接送信
formタグに今から説明する方法を使うと、CGIプログラムを使わずに、フォームの入力内容をメールで送信することができます。
この送信方法は、使用環境によってはうまくいかない場合があります。
使用例としては、以下のように記述します。
<form method="POST" action="mailto:xxx@xxx.com?subject=問い合せ" enctype="text/plain">
お名前：
<input type="text" name="name">
<br>
メールアドレス：
<input type="text" name="email">
<br>
<input type="submit" value="送信する">
</form>
methodは、POSTを指定します。
actionは、mailto:に続けて、送信先のメールアドレスを指定します。
メールアドレスに続けて次のように指定すると、件名を指定することができます。
action="mailto:xxx@xxx.com?subject=問い合せ"
?subject= に続けて件名を記述します。
enctypeは、text/plainまたは、multipart/form-dataを指定します。
text/plainを使用した場合は、メールの本文として、入力内容が送信されます。
multipart/form-dataを指定した場合は、メールに添付される形で、入力内容が送信されます。
扱いやすさの点からtext/plainの指定をお勧めします。
しかし、文字化けなどの不具合が発生した場合には、multipart/form-dataも試してみてください。
この送信方法は簡易的なメールフォームとして利用できますが、環境によっては正常に機能しない場合があります。
また、メールソフトを使って送信するスタイルになるので、通常のメールフォームのイメージとは大きく違ってきます。
必須項目のチェックや確認画面の表示、送信完了画面の表示なども、HTMLタグの指定だけでは実現できません。
ちゃんとしたメール送信フォームを設置したい場合には、CGI等のプログラムを使用することをお勧めします。
ここから先は、HTMLのフォームタグの個々の要素について解説していきます。
<戻る>
formタグのテキスト入力
inputタグに、type="text"を指定すると、1行のテキスト入力欄を作成できます。
もしテキスト入力を複数行入力させたい場合は、textareaを使用します。
textareaについては後述します。
一行のテキスト入力欄を作成するには、以下のように記述します。
<form method="POST" action="./formmail.cgi">
お名前
<input type="text" name="name" size="30" maxlength="30" value="サンプル">
<input type="submit" value="送信する">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
フィールド名（項目名）を指定します。
一般的には半角英数字で指定します。
これは、入力項目を判別するための名前です。
項目ごとに違う名前を指定します。
名前の入力欄であれば「name」、メールアドレスの入力欄であれば「email」などです。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. size
入力フィールド（入力欄）の横幅を数値で指定します。
サイズを指定した場合でも、ブラウザにより見た目の長さは異なります。
同じような長さで表示したい場合は、スタイルシートで指定します。
3. maxlength
入力できる最大文字数を指定します。
例えば、maxlength="10"を指定した場合、11文字以降の文字は入力できなくなります。
4. value
入力フィールド（入力欄）にあらかじめ挿入しておく文字を指定します。
例えば、value="http://"を指定した場合、http://が最初から入力された状態になります。
<戻る>
formの複数行入力
textareaタグで、複数行のテキスト入力欄を作成できます。
例えば、以下のように記述します。
<form method="POST" action="./formmail.cgi">
メッセージ
<textarea name="message" cols="30" rows="10" wrap="hard">
複数行入力が可能
</textarea>
<input type="submit" value="送信する">
</form>
それでは、textareaタグに設定できる項目について説明します。
1. name
フィールド名を指定します。
一般的には半角英数字で指定します。
入力項目を判別するための名前です。
項目ごとに違う名前を指定します。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. cols
入力フィールドの横幅を数値で指定します。
サイズを指定した場合でも、ブラウザにより見た目の長さは異なります。
同じような長さで表示したい場合は、スタイルシートで指定します。
3. rows
入力フィールドの高さを数値（行数）で指定します。
この指定行数を超えて入力された場合は、フィールドにスクロールバーが表示されます。
4. wrap
自動改行のタイプを指定します。
入力した文字が横幅いっぱいになったとき、自動的な改行を入れるかどうかを指定します。
これには、hard、soft、offの三種類があります。
hardを指定した場合は、自動改行が入ります。
送信される内容にもその改行が維持されます。
softを指定した場合は、自動改行が入りますが、送信される内容にはその改行は入りません。
offを指定した場合は、自動改行は入りません。
横スクロールしながら延びていきます。
5. テキスト挿入
あらかじめ入力欄に文字を入れておきたい場合は、textareaタグで囲まれた部分にその文字を記述します。
上の例では、「複数行入力が可能」という部分です。
formのパスワード入力
inputタグにtype="password"を指定すると、パスワード形式の入力欄を作成できます。
入力した内容は、アスタリスク（ * ）などで表示されます。
<form method="POST" action="./formmail.cgi">
パスワード
<input type="password" name="pass" size="30" maxlength="30">
<input type="submit" value="送信する">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
フィールド名（項目名）を指定します。
一般的には半角英数字で指定します。
これは、入力項目を判別するための名前です。
項目ごとに違う名前を指定します。
名前の入力欄であれば「name」、メールアドレスの入力欄であれば「email」などです。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. size
入力フィールド（入力欄）の横幅を数値で指定します。
サイズを指定した場合でも、ブラウザにより見た目の長さは異なります。
同じような長さで表示したい場合は、スタイルシートで指定します。
3. maxlength
入力できる最大文字数を指定します。
例えば、maxlength="10"を指定した場合、11文字以降の文字は入力できなくなります。
4. value
入力フィールド（入力欄）にあらかじめ挿入しておく文字を指定します。
この指定で挿入した内容も、アスタリスク（ * ）などで表示されます。
<戻る>
formのラジオボタン入力
inputタグにtype="radio"を指定すると、ラジオボタンを作成できます。
ラジオボタンとは、選択項目が複数あり、その中から一つだけ選んで欲しいときに使用します。
例えば、「CGI」「JavaScript」「HTML」という選択肢があり、「CGI」がすでに選択状態であることを示すためには以下のように書きます。
（他のものを選択すると、選択状態が切り替わります。）
<form method="POST" action="./formmail.cgi">
<p>あなたの興味のあることは？</p>
<input type="radio" name="question" value="cgi" checked>CGI<br>
<input type="radio" name="question" value="javascript">JavaScript<br>
<input type="radio" name="question" value="html">HTML<br>
<input type="submit" value="送信する">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
ボタン名を指定します。
一般的には半角英数字で指定します。
name指定は、入力項目を判別するための名前です。
複数のボタンに同じボタン名を付けることで、1つのボタングループを作ることができます。
ラジオボタンは、グループ（複数項目）の中から1つだけ選べるタイプのボタンになります。
2. value
送信される内容を指定します。
そのボタンが選択されたとき、value=""の内容が送信されます。
3. checked
最初から選択された状態にします。
当然、同じラジオボタングループ（同じname=""で同じ名前を指定したもの）の中で使用できるのは一回だけです。
複数選択を使用したい場合は、ラジオボタンではなく、チェックボックスを使用します。
チェックボックスについては後述します。
<戻る>
formのチェックボックス入力
inputタグにtype="checkbox"を指定すると、チェックボックスを作成できます。
チェックボックスとは、複数の選択肢の中から、一つまたは複数選択していただくときに使用します。
複数の選択肢の中から、一つだけ選んで欲しいときには、前述したラジオボタンを使用します。
それでは先ほどのラジオボタンの例を、チェックボックスに変えてみます。
<form method="POST" action="./formmail.cgi">
<p>あなたの興味のあることは？</p>
<input type="checkbox" name="question" value="cgi" checked>CGI<br>
<input type="checkbox" name="question" value="javascript" checked>JavaScript<br>
<input type="checkbox" name="question" value="html">HTML<br>
<input type="submit" value="送信する">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
ボタン名を指定します。
一般的には半角英数字で指定します。
name指定は、入力項目を判別するための名前です。
複数のボタンに同じボタン名を付けることで、1つのボタングループを作ることができます。
チェックボックスは、グループ（複数項目）の中から1つまたは複数選べるタイプのボタンになります。
2. value
送信される内容を指定します。
そのボタンが選択されたとき、value=""の内容が送信されます。
3. checked
最初から選択された状態にします。
ラジオボタンとは異なり、チェックボックスでは、同じグループ（同じnameを指定した選択肢）の中でも複数回使用することができます。
<戻る>
formのファイル入力
inputタグにtype="file"を指定すると、ファイルをウェブサーバーにアップロードするための入力欄を作成できます。
通常あまり使用しませんが、画像も一緒に投稿できるような掲示板などでは、このHTMLタグが使用されます。
例えば、以下のように記述します。
<form method="POST" action="./formmail.cgi" enctype="multipart/form-data">
ファイルをアップロード：
<input type="file" name="upFile" size="40">
<input type="submit" value="送信">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
フィールド名（項目名）を指定します。
一般的には半角英数字で指定します。
これは、入力項目を判別するための名前です。
項目ごとに違う名前を指定します。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. size
入力フィールド（入力欄）の横幅を数値で指定します。
サイズを指定した場合でも、ブラウザにより見た目の長さは異なります。
同じような長さで表示したい場合は、スタイルシートで指定します。
3. type="file"
type="file"を指定すると、自動的に「参照...」ボタンが表示されます。
参照ボタンをクリックすると、ファイルを選択するためのウィンドウが表示され、選択を完了するとそのファイルへのパスが入力欄に挿入されます。
4. 注意事項
ファイルを送信するフォームでは、前述した「enctype属性」にmultipart/form-dataを指定する必要があります。
送信されたファイルを、ウェブサーバー側で受け取るには、その機能を持ったCGIプログラムが必要です。
formのセレクトボックス
この指定を行うと、プルダウン形式、またはリスト形式のメニューを作成できます。
これは、選択肢が本当にたくさんあるときなどに使用されます。
住所を入力するときなどの都道府県の選択などで、よく使用されています。
例えば、以下のように記述するとプルダウン形式で表示されます。
<form method="POST" action="./formmail.cgi">
<select name="question">
<option value="1" selected>CGI</option>
<option value="2">JavaScript</option>
<option value="3">HTML</option>
</select>
<input type="submit" value="送信する">
</form>
または、以下のように記述するとリスト形式になります。
<form method="POST" action="./formmail.cgi">
<select name="question" size="3">
<option value="1" selected>CGI</option>
<option value="2">JavaScript</option>
<option value="3">HTML</option>
</select>
<input type="submit" value="送信する">
</form>
さらに、複数選択を可能にする場合は、以下のように記述します。
「CGI」と「HTML」を選択しています。
<form method="POST" action="./formmail.cgi">
<select name="question" multiple>
<option value="1" selected>CGI</option>
<option value="2">JavaScript</option>
<option value="3" selected>HTML</option>
</select>
<input type="submit" value="送信する">
</form>
selectタグに囲まれた部分へ、optionタグを使って選択肢を並べていきます。
optionタグに囲まれた文字が、メニュー内に表示されることになります。
上記の例では、「CGI」「JavaScript」「HTML」ですね。
「</option>」は、省略することも可能です。
セレクトボックスには、プルダウン形式とリスト形式があります。
これはselectタグで指定することができます。
(1) selectタグ
selectタグとは、以下のようなHTMLタグのことです。
<select name="question" size="10" multiple>
～
</select>
では、selectタグについて、説明していきます。
1. name
メニュー名を指定します。
一般的には半角英数字で指定します。
入力項目を判別するための名前です。
項目ごとに違う名前を指定します。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. size
表示行数を指定します。
複数行を指定するとリスト形式のメニューになります。
size=""に「1」を指定するとプルダウン形式のメニューになります。
デフォルト（初期設定）では「1」です。
この指定を行わない場合は、size="1"が適用されます。
3. multiple
複数選択を可能にする指定です。
multipleを指定すると、メニューの中から複数を選べるようになります。
この指定を行ったメニューは、自動的にリスト形式の表示になります。
Windowsの場合、ShiftキーまたはCtrlキーを押しながらクリックすると、複数を選ぶことができます。
(2) optionタグ
optionタグとは、以下のようなHTMLタグのことです。
<option value="1" selected>選択肢１</option>
では、optionタグについて、説明していきます。
1. value
送信する内容を指定します。
その選択肢が選択されたとき、value=""の内容が送信されます。
2. selected
最初から選択された状態にします。
selectedを指定した選択肢は、最初から選択された状態になります。
<戻る>
formのその他入力
inputタグにtype="hidden"を指定すると、隠しデータを設定することができます。
例えば、以下のように記述します。
<form method="POST" action="./formmail.cgi">
<input type="hidden" name="secret" value="隠しデータ">
<input type="submit" value="送信する">
</form>
それでは、inputタグに設定できる項目について説明します。
1. name
フィールド名を指定します。
一般的には半角英数字で指定します。
送信データを判別するための名前です。
送信データごとに違う名前を指定します。
一つのフォームタグ（<form>から</form>まで）の中で、同じ名前がだぶらないようにします。
もしだぶった場合は、そのフォームから情報を受け取ったCGIがエラーを起こす原因になります。
2. value
送信される内容を指定します。
value=""の内容が送信されます。
3. 注意事項
隠しデータの内容はページ上には表示されません。
しかし、ソースを見れば確認できます。
予め設定しておいた情報を、密かに送信したいときに使用します。
<戻る>