萌えPerl｜フォーム

フォーム

　ＣＧＩが実行されるのはページを呼び出されるだけのときもありますし、何らかの値を受け取って処理をしてから動的に表示をする場合もあります。
　ここではまずよく使うＨＴＭＬのフォームを使ってＣＧＩに値を渡す方法を説明します。
　では以下のソースを見てください。

　データーを渡すＨＴＭＬのページ（seme01.html）

<html><head><title>TEST SEME</title></head>
<body>
<form action="cgi-bin/uke01.cgi" method="post">
  何か入力して送信するとその文字が表示されます。<br>
  <input type="text" name="x" size="8">
  <input type="submit" value="送信">
</form>
</body>
</html>

　データーを受け取るＣＧＩのページ（uke01.cgi）

#!c:/perl/bin/perl
use CGI;
my $form = new CGI;
my $x = $form->param('x');
print "Content-type: text/html; charset=Shift_JIS\n\n";
print 'おまえは「'. $x . '」と言う';

　これをそれぞれ以下の場所に保存します。

C:\Program Files\Apache Group\Apache2\htdocs\seme01.html
C:\Program Files\Apache Group\Apache2\cgi-bin\uke01.cgi

　すると次のような画面になります。↓をクリックしてみてください。

ウインドウを開く　　　　　　　　　　　　　　　　　　　　

　まずHTMLのほうですが、
　<form></form>がCGIにデーターを送信するためのタグです。
　これにはさまれている送信用のタグ全てが送信対象になります。
　送信ボタンを押すことによってCGIにデーターを送ります。
　以下にそのオプションを記します。
　最低でも action と method だけは入力しないと動きません。逆に言うとそれだけあればとりあえず動きます。

<form>…</form>
action	送信先のＵＲＬ
method	転送方法(GETかPOST、まあだいたいPOST)
enctype	データ形式（MIMEタイプ）
accept-charset	受け側の文字コード
accept	受け側のMIMEタイプ
name	参照用の名前
target	結果を表示用のフレームか窓

　<input></input>は送信用のタグです。
　オプションの type によって形が変わります。

<input>…</input> の type="タイプ"
text	文字
password	パスワード
file	アップロード
checkbox	チェックボックス
radio	ラジオボタン	さこつうなじ
select	セレクトボックス
hidden	隠しフィールド
submit	送信ボタン
reset	取消ボタン
button	ボタン
image	画像ボタン

　テキストエリアも送信用のタグとして使用します。
　inputのテキストが１行なのに対してこれは複数行扱えます。

<textarea>…</textarea>
(~~~ ﾟ ∀~)~~~ ﾟ　ﾒﾀﾞﾏﾎﾞｰﾝ

以下、属性一覧です。

共通属性
accesskey=key	例えば accesskey=X としておくと「ALT」＋「X」でフォーカスされます。
disabled	これを指定すると無効化されます。
tabindex=n	タブでフォーカスされる順番です。
type=type	入力形式。
datafld=datafld	データバインド機能を用いる際、列名を指定します。
datasrc=datasrc	データバインド機能を用いる際、ID を指定します。

一般属性
class=class	クラスを指定します。
dir=dir	文字の表示方向を指定します。
id=id	IDを指定します。
lang=lang	言語を指定します。
language=language	スクリプト言語を指定します。
name=name	CGIに渡す時の名前です。変数名と同じにしておくと分かりやすいです。
style=style	スタイルシートを指定します。
title=title	タイトルを指定します。

type=textの属性
autocomplete=onoff	offにするとオートコンプリート機能を無効にします。
istyle=n	i-mode用入力モード初期値。１：全角文字、２：半角文字、３：英字、４：数字。ポケットベル入力時は。１：全角文字、２：半角文字、３：小文字推奨半角文字、４：数字推奨半角文字
maxlength=n	最大入力文字数。
readonly	入力不可。
size=n	入力フィールドの大きさ。
value=value	入力フィールドの初期値。
<input type="text" name="adr" maxlength="50" size="50"></input>

type=passwordの属性
autocomplete=onoff	offにするとオートコンプリート機能を無効にします。
maxlength=n	最大入力文字数。
readonly	入力不可。
size=n	入力フィールドの大きさ。
value=value	入力フィールドの初期値。
<input type="password" name="pass"></input>

type=fileの属性
accept=accept	送信するデータのMIMEタイプの候補リストをカンマで区切ります。
maxlength=n	最大入力文字数。
size=n	入力フィールドの大きさ。
<input type="file" name="image" size="44"></input>

type=checkbox、type=radioの属性
checked	あらかじめチェックした状態にしておきます。
value	オン時の値。
<input type="checkbox" value="1" name="nanikano_chk"></input> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="3">女 <input type="radio" name="sex" value="5">他

selectの属性
name=name	フォーム部品を識別するための名前。
size=n	1:プルダウン、2 以上:リスト形式。
multiple	複数選択。ex.※「Shift」または「Ctrl」キーを押しながらクリック。
value=value	送信される文字列。
label=str	表示されるテキスト。
selected	選択された状態。
<form method="post" action="hoge.cgi"> <p> <select name="hoge1"> <option value="">選んでください</option> <option value="1">高坂桐乃</option> <option value="2">田村麻奈実</option> <option value="3">沙織・バジーナ</option> <option value="4" selected>黒猫</option> </select> </p> <p><input type="submit" value="送　信"></p> </form>

type=hiddenの属性
value	オン時の値。
<input type="hidden" name="page" value="top"></input>

type=submit、type=reset、type=buttonの属性
value	ボタンに表示するテキスト。
<input type="submit" name="login" value="ログイン"> <input type="reset" name="clear" value="クリア"> <input type="button" name="start" value="スタート">

type=imageの属性
align=align	表示位置。
alt=alt	画像の代わりに表示するテキスト。
border=n	枠線の太さ。
dynsrc=url	動画（*.avi）を表示。
height=n	画像の高さ。
ismap	クリッカブルマップを使用します。
lowsrc=url	画像を転送する間に表示する容量の小さい画像の URL
src=url	画像の URL
width=n	画像の横幅。
<input type="image" name="up" src="img/uppoint.gif">

textareの属性
name=name	CGIに渡す時の名前です。変数名と同じにしておくと分かりやすいです。。
cols=n	入力フィールドの横幅を数値で指定します。
rows=n	入力フィールドの高さを数値（行数）で指定します。
wrap=wrap	自動改行のタイプを指定します（hard、soft、off）。
<textarea name="intext" rows="2" cols="40">あらかじめ入れておきたい何かの文字</textarea>

hard：自動改行が入ります。送信される内容にもその改行が維持されます。
soft：自動改行が入りますが、送信される内容にはその改行は入りません。
off ：自動改行は入りません。横スクロールしながら延びていきます。

ＣＧＩで受け取る

　ＣＧＩの方ではモジュールの使用によって簡単に受け取ることが出来ます。
　さきほどの例をみてみましょう。

#!c:/perl/bin/perl
use CGI;
my $form = new CGI;
my $x = $form->param('x');
print "Content-type: text/html; charset=Shift_JIS\n\n";
print 'おまえは「'. $x . '」と言う';

　まず use CGI; は「ＣＧＩモジュールを使いますよ」と言う意味です。そして my $form = new CGI; は「そのモジュールを $form という名前で使いますよ」という意味で、 $form->param('x')は「送信されてきたデーターのなかで「x」と名づけられたデーターの値」という意味です。
　まとめると

最初に use CGI; my $変数名 = new CGI; と書く。
送信された値は $変数名->param('HTMLのINPUTのNAMEで付けられた名前')。

　ですねー。
　モジュールとはサブルーチンだけが書かれたテキストファイルで、use は他のテキストファイルをはじめに取り込む命令で、-> は「その中身にある」ぐらいの意味で、param はＣＧＩモジュールの中に書かれているサブルーチン名です。（ためしに以下の場所にあるファイルの中を検索すると sub param { というサブルーチンがあります）
C:\Perl(←或いはActivePerlをインストールした場所)\site\lib\CGI.pm
（モジュールについては後で詳しく説明します）

　これでひとまずブラウザーから入力された値を受け取ることができます。

添付ファイルを受け取る

　フォームに入力されたデーターを param で受け取ることは出来ましたが、type=file でファイルのアップロードをするのはちょっとややこしいです。
　とりあえず例を見てください。

　データーを渡すＨＴＭＬのページ（seme02.html）

<html><head><title>TEST SEME</title></head>
<body>
<form action="cgi-bin/uke.cgi" method="post" enctype=multipart/form-data>
  画像をアップロードします。<br>
  画像ファイルを選んで送信をクリックして下さい。<br>
  <input type="file" name="image" size="44"><br>
  <input type="submit" value="　　送　　信　　">
</form>
</body>
</html>

　データーを受け取るＣＧＩのページ（uke02.cgi）

#!c:/perl/bin/perl
use CGI;
my $form = new CGI;

# ファイル名
my $updfile = $form->param('image');
my $savename=(reverse(split /\\/,$updfile))[0];
my $buffer;

# ファイル保存
if ($updfile) {
  open (FILE, "> $savename");
  binmode(FILE);
    while (read($updfile,$buffer,1024)) {
      print FILE $buffer;
    }
  close (FILE);
}

print "Content-type: text/html; charset=Shift_JIS\n\n";
print '以下のファイルをアップロードしました<br>'; print $updfile .'<br>';; print $savename;

　これをそれぞれ以下の場所に保存します。

C:\Program Files\Apache Group\Apache2\htdocs\seme02.html
C:\Program Files\Apache Group\Apache2\cgi-bin\uke02.cgi

　そして、ブラウザーのＵＲＬ欄に

http://localhost/seme02.html

　と入力するとアップロード画面が出て、実際にアップロードできるようになります。アップロードされたファイルは uke.cgi と同じフォルダーに保存されます。
　これはごく単純な最小限のソースです。
　実際には拡張子のチェックや容量のチェック、ロック処理などいろいろ準備したほうが良いのですが、ローカルでのアップロードのテストはこれで可能です。

HTML側の<form>タグ内に enctype=multipart/form-data を書きます。
(reverse(split /\\/,"ディレクトリとファイル名"))[0] は文字操作や正規表現でファイル名だけを抜き出しています。他にもいろいろ方法はありますし、保存するファイル名を固定にするなら不要です。
if ($updfile) は「入力値があるなら処理するお」という感じの意味です。
open (FILE, "> $savename"); ファイルを書き込みモードで開きます。→保存するファイル名と場所を指定します。
binmode(FILE); ファイルをバイナリモードで処理します。サーバーが unix ならどっちでも良いですが Windows では必須です。
while (read($updfile,$buffer,1024)) ファイルを 1024ﾊﾞｲﾄずつ読んで $buffer に代入します。それをデーターが全部読み終わるまで繰り返します。べつに1024でなくてもなんでも良いです。
print FILE $buffer; 保存用のファイルに書き足します。
close (FILE); 「処理が終わったお」と言う意味です。無くてもプログラムが終わったら勝手にクローズしますが一応書くほうがおりこうちゃんぽいので書きます。

　いじょうです。
　ファイルの操作も後で説明します。(^-^;「後で」が多いですね。

このページのトップへ戻る