■フォームとはネットサーフィンをちょっとでもしてみれば、あちこちのホームページに、アンケートなど入力のできるページがあるのを見つけることができます。

連載

WWW には、ホームページで情報を発信するだけでなく、読み手からのレスポンスがもらえる仕組みがあり、その入力部分をフォームと呼んでいます。
入力フォームには、次のような種類があります（図 1）。

・テキスト入力フィールド
文字列を入力してもらうためのもので、1 行で入力するフィールドと、複数行の入力が可能なボックスフィールドがあります。
・ボタン
ボタンには、「ラジオボタン」と「チェックボックス」、それに「送信」と「キャンセル」という種類のボタンがあります。マウスでクリックするだけでレスポンスする内容を選択したり、送信したりすることができるので、読み手の側にもっとも負担のかからない方法です。
・リスト
あらかじめ用意した複数の選択肢のリストから選んでもらうものです。ボタンと同様に、読み手はクリックするだけでいいので、これも負担がかかりません。選択肢の内容や種類

川添 歩 （かわぞえあゆむ）
アクセス株式会社

によって、ラジオボタンにするか、チェックボ

http://www.axes.co.jp/

ックスにするか、あるいはこのリストにするか第10回フォームを作るを考えて使います。

■入力内容を受け取るには？
入力用のフォームを作るのは、HTML でできますが、問題は入力された内容をどのように受け取るかです。

ホームページは、個人が自由に情報を発信できるすばらしいメディアです

一般的には、Web サーバーにフォーム内容が、せっかくのインターネット、発信するだけではもったいないですね。

を受け取るためのプログラム（CGI）を用意し今回は、ホームページを見てくれた人から情報を得るための、フォームにておく必要があります。しかし、ダイアルアついて解説します。

ップでプロバイダーに接続して、そのプロバイダーのディスクの中にホームページを置いてい294 INTERNET magazine 1996/11

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

d 図1：入力フォーム例

る場合には、このようなプログラムを用意すす。MAXLENGTH オプションは入力できるるのは難しい場合が多いでしょう。プロバイ

最大文字数を指定するものです。ここで指定

ダーやレンタルサーバーによっては、CGI をあした文字数より多く入力しようとしてもできらかじめ用意していたり、用意がなくてもユなくなります。SIZE とMAXLENGTH の部分ーザーが作ったCGI を置くことを許していたは省略できます。

りするところもありますので、とりあえずそのようなサービスがあるかどうかを調べましょう。

NAME で指定する名前は、英数字にしておいたほうが無難です。

こうしたサービスが用意されていない場合には、入力された内容をメールにして送る方法●スクロールのできるボックスフィールドがあります。多少の制限がありますが、この<TEXTAREA NAME="name" ROWS=n COLS=n>方法であれば、一般のユーザーでもフォーム〜 </TEXTAREA>での情報受信が可能になります。

ンボタン

ボックスフィールドに名前を付けて、ROWS

ト ト
リスオプションで行数を、COLS オプションで幅■フォームの定義
フォームは、FORM タグによって定義しま字列を入れておくと、ボックスフィールドに前す。複数の質問項目をひとまとまりとして、もってその文字列が入力された形で表示されこれをFORM タグで囲みます。

ます。特に文字を入れておく必要がなければ、<FORM ACTION="URL" METHOD=GET|POST><TEXTAREA NAME="comment" ROWS=4・・・・ラジオボタン

d 図1の HTML

COLS=40></TEXTAREA></FORM>のように間に何も挟まないようにします。という形式です。ACTION オプションでのURL の指定は、CGI を利用する場合はそれぞれのCGI の仕様によって異なります。

■ラジオボタンとチェックボックス
ラジオボタンまたはチェックボックスで回答

メールで受け取る場合には、をしてもらう方法は、もっともユーザーに負担がかからない質問方法でしょう。

<FORM ACTION="mailto:× @ ××××××"

ラジオボタンとチェックボックスの使いわけ
は、ユーザーが迷わないように、用途に応じ

METHOD=POST>て厳密にしなければなりません。のように、URL のところにはmailto:に続けて●ラジオボタン

送り先のメールアドレスを記述します。
そしてFORM タグで囲われた中に、入力用のタグを入れていきます。

ラジオボタンは複数の選択肢からただ1 つを選ぶ場合に使います。自動車に付いているラジオの選局ボタンは、どれか1 つを押すと、今■テキスト入力フィールドまで押されていたボタンが解除されて、必ずど●1 行入力フィールド

れか1 つだけが押された状態になるようになっ<INPUT NAME="name" SIZE=n MAXLENGTH=n>ています。それと同じ機能なので、この名前フィールドに名前を付けて、このタグを書けば、1 行分の入力フィールドが作られます。SIZE オが付けられています。
ラジオボタンはプションでフィールドの表示の長さを指定しまインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

テキスト入力フィールド

チェックボックス（1 行の文字数）を指定します。〜の部分に文<HTML><HEAD><TITLE>Form</TITLE></HEAD><BODY><FORM METHOD="POST"ACTION="mailto:xxx@xxxxxxxx">名前： <INPUT NAME="Name" SIZE=20> <BR>
住所： <INPUT NAME="Address" SIZE=40
MAXLENGTH=40> <BR>
E-Mail アドレス： <INPUT NAME="E-Mail" SIZE=40>
<BR>
<BR>
感想をどうぞ： <BR>
<TEXTAREA NAME="comment" ROWS=4
COLS=50></TEXTAREA>
<BR>
<BR>
性別：
<INPUT TYPE=RADIO NAME="sex" VALUE="male"
CHECKED> 男性<INPUT TYPE=RADIO NAME="sex" VALUE="Female">
女性<INPUT TYPE=RADIO NAME="sex" VALUE="unknown">
不明
<BR>
<BR>
家族：
<INPUT TYPE=CHECKBOX NAME="mate" VALUE="true"
CHECKED> 配偶者<INPUT TYPE=CHECKBOX NAME="children"
VALUE="true"> 子ども<BR><BR>
評価：<SELECT NAME="level"><OPTION> 最高！
<OPTION> いいんじゃない<OPTION> 普通<OPTION> ちょっとなあ<OPTION> 最低</SELECT>
<BR>
<BR>
<INPUT TYPE=SUBMIT VALUE="ポストする"><INPUT TYPE=RESET VALUE="リセットする"></FORM></BODY></HTML>

INTERNET magazine 1996/11295

f図 2 ：選択肢が 5 つとも見えている場合（上）とポップアップメニューになっている場合（下）f 図 3 ：入力されたフォーム

d図 4 ： 図 3 のフォームから送られたデータを受け取ったもの
評価：<SELECT NAME="level"SIZE=1><OPTION> 最高！
<OPTION SELCTED> いいんじゃない<OPTION> 普通<OPTION> ちょっとなあ<OPTION> 最低</SELECT>

評価：<SELECT NAME="level"SIZE=5><OPTION> 最高！
<OPTION SELCTED> いいんじゃない<OPTION> 普通<OPTION> ちょっとなあ<OPTION> 最低</SELECT>

Name=%88%F6%95w%81@%97%E7%8Eq&Address=%93%8C%8B%9E%93
s%90%E7%91%E3%93c%8B%E6%8EO%94%D4%92%AC+20&EMail=impress@impress.co.jp&comment=%82%C6%82%C1%82%C4%82%E
0%82%B7%82%CE%82%E7%82%B5%82%A2%83y%81%5B%83W%82%BE%82%C6%8Ev%82%A2%82%DC%82%B7%81B%0D%0AVery+Cool&sex=Fe
male&mate=true&children=true&level=%82%A2%82%A2%82%F1%82%B6%82%E1%82%C8%82%A2

1 つとは限らない場合に使います。

<INPUT NAME="name" TYPE="RADIO"

チェックボックスは

VALUE="value">

そこから選ぶ形になります（図 2）。SIZE は省略することもでき、その場合には選択肢の数
やMULTIPLE かどうかに応じてポップアップのようにして作ります。
ラジオボタンにおいて1 つの質問に対する回<INPUT NAME="name" TYPE="CHECKBOX"

メニューになったり、リストの大きさが変化

VALUE="value">したりします。
通 常 選 べる選 択 肢 は 1 つだけですが、答群は、それらのNAME を同じものにして、VALUE にボタンの意味する内容を記述するようにします。
また、オプションとしてCHECKED を付加してのようにして作ります。

<SELECT NAME="name" MULTIPLE> のチェックボックスでも、ラジオボタンと同様ようにMULTIPLE を追加すると、選択肢かに、オプションでCHECKED を付加しておけらユーザーは複数を選べるようになります。複ば、あらかじめボタンがチェックされた形で表数選択できるようにした場合には、ポップア示されます。

ップメニューは使えません。
ボタンの C H E C K E D と同 じように、<INPUT NAME="name" TYPE="CHEKBOX"■リスト

CHECKED>

ラジオボタンやチェックボックスと同様に、のように書くと、すでにボタンが選ばれた形でいくつかあらかじめ用意した選択肢から選ば表示されます。

せる入力方法です。選択肢が多かったり、選ラジオボタンで選択肢を選ばせる場合には、択肢の文字列が長いなど、ボタンでは見にく選択肢のうちの1 つをCHECKED にしておく

かったり選びにくかったりする場合にはこちらとよいでしょう。たとえば、性別を選択するを利用します。

ラジオボタンを作る場合、あらかじめ女性が選ばれているようにするには、<OPTION SELECTED> とすることで、あらかじめその選択肢がすでに選択された形で表示されます。

■送付／キャンセルボタン
以上の入力を送付するためのボタンがないと、フォームの意味がありません。これを作るのを忘れてはいけません。

<SELECT NAME="name" SIZE=n>

送付用のボタンは<OPTION> 選択肢 1<INPUT TYPE="SUBMIT" VALUE="name"><INPUT TYPE=RADIO NAME="sex"<OPTION> 選択肢 2となります。

VALUE="Female" CHECKED> 女性 <BR>・・・・<INPUT TYPE="RESET" VALUE="name"><INPUT TYPE=RADIO NAME="sex"</SELECT>VALUE="Male"> 男性 <BR>て初期値、すなわちほとんどの場合には空白というようになります。

●チェックボックス

用意する選択肢は<OPTION> のうしろにに戻すボタンです。たいてい送付用のボタン続けて記述します。つまり、選択肢の数だけとセットで作られていますが、実際には、送<OPTION> が存在することになります。

信したくなければ送信ボタンを押さなければいSIZE オプションで指定する数字は、一度チェックボックスは、その名のとおりチェッに見せる選択肢の数です。この数が1 だとポクをして選択するボタンで、必ずしも回答がップアップメニューによる選択になり、2 以上だとその数字分の行数のリストが表示されて、296 INTERNET magazine 1996/11

で作られるボタンは、入力された内容をすべいだけですから、RESET のほうはどうしても必要なわけではありません。
VALUE はボタンに表示される名前です。日本語のページであれば、日本語でインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

<INPUT TYPE="SUBMIT" VALUE="送信">のように書いてもかまいません。

■メールで結果を受け取る

これは、基本的には各項目の名前の後に=Decoder/）にマック版が、前薗健一氏のペーで続けて回答内容があり、各項目間を&でつジ（http://www.st.rim.or.jp/˜ken-mae/

ないだものです。しかし、スペースや記号、漢ClipDec.html）にウィンドウズ版があります。

字の部分がコードに変換されているのです。英なお、メールでフォーム記入内容を受け取る

さて、このようにして作ったフォームに読み数字だけで構成して入力された内容であれば、場合、最近ではほとんどないと思いますが、古手が入力して送付してくれた内容は、mailto

このままでも内容は分かるのですが、かな漢いブラウザーによってはこの機能が使えないこで指定した場合はメールで送られてくるわけ

字を使っている場合には、内容は読むことがとがありますので、注意してください。

ですが、実は書き込まれたものがそのまま送できません。

られてくるわけではありません。フィールドな

そこで、このコード化されたものを普通の読どの名前とともに、一部コード化されて1 行めるデータ形式に変換する必要があります。
このためのツールとして、「ClipDecoder」の文字列として送られてきます。
たとえば、図 3 のように入力された内容ががあります。フォーム結果をメールで受け取

ClipDecoderは本誌 CD-ROMに収録されています

メールで送られてきた結果は、図4 のようになる方法について説明している田中求之氏のペc MAC → ClipDecoder

ります。

ー ジ （ http: //mtlab.ecn.fpu.ac.jp/Clipc WIN → CLIPDEC

自然から受け取る情報
東京生まれの東京育ちだからかえってそうなしいことではないかと考えている。

いる情報は都会から離れれば離れるほど、多のかもしれないが、私は月に一度ぐらいは、自新しい何かや変わっていく何かを発見したく豊富になる。インターネットという技術を然の中に行かないとストレスが解消されない。

ときに、1 行でいいから日付けと天候ととも使って、ちまちました自然に喜んでいる東京

東京という街はとても好きだけれど、緑のににそのことを記録してホームページに載せる。

モンに、その比べものにならない「情報格差」

おいのする空気をかいだり、川の流れの音をもちろん、デジタルカメラで撮った写真やスを見せつけてほしい。

聞いたりすることは、都会の中の楽しみではケッチをスキャナでとりこんで画像入りのペ代替できない何ものかを持っている。そんなージにできればすばらしい。

それから、子どものいる方は、ぜひ子どもといっしょにホームページ作りをやっていただ

1 年たてば、それが自分の住んでいる場所できたい。HTML にするのはおとうさんやおかの歳時記になる。2 年目は1 年目と比較でき

あさんの役目として、その材料、観察記録や自然の中に行く機会をなかなか持てないでる形でページにしていくと、なお楽しいだろう。

スケッチや写真を、子どもに書いてもらった

いる間は、しかたがないので街の中の自然をそして、せっかくのインターネット。日本

り、集めてきてもらう。他の地方の子どもと探して歩くことになる。気を付けていると、各地、世界各地の自然やその移り変わりを自メールの交換をしたり、お互いのホームペー

都会の中にも季節の移り変わりを示すさまざ分のところのそれと比較してみることだってジを見ながら作っていけば、学校の授業で学まな自然の営みが発見できる。

できるはずだ。たとえば、日本の南から北まぶ理科や社会よりずっと楽しく、そして実感

空き地を占領しながらみるみる大きくなるで、各地にいる人とともに、桜の花が自分のにもとづいた知識を得ることになるだろうし、セイタカアワダチソウ、駅の改札に迷い込ん家のそばで咲いてゆく様子を記録していった

インターネットというものをじかに体験するいだカラスアゲハ、いつのまにか道ばたで鳴き出ら、そしてそれを日本地図の上にプロットしい機会となると思う。

しているコオロギ。ていったら、桜の花がしだいに南から咲いて思いで、私のホームページはForest と名付けている。

年を経るごとに、東京の中での自然との出ゆくのをまさに実感できるはずだ。

実は私のホームページでは、こうした内容をまだ何も作っていないのだけれど、書いて会いはどんどん減っていることを感じるが、そ東京のような都会では、ずいぶん気を付けいるうちにとても作りたくなってきた。もし、れだからこそ、数少ない機会を大切にして、ていないと季節を示す自然のメッセージを受こうしたページを作ってみたい、あるいはすで見逃さず、忘れず、記録にとどめておきたい

け取れないけれど、もっとたくさんの自然がに作っているという方がいたら、私のホームと思う。

あるところであれば、毎日のようにいろいろページ（http: //www.axes.co.jp/˜ayumu/）

その記録を、ただ自分だけのノートに記すな変化があるだろう。一般に、情報は東京にからメールをください。いっしょに作りませんのでなく、ホームページに載せていくのは楽集中しているとされるけれど、自然が発してか。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/11297

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.