<FORM ACTION="URL"> ... </FORM>FORMタグでは、次の属性が使用できます。
FORMタグの中には、FORM以外のタグを置くことができます。特に
INPUT、SELECTやTEXTAREAタグがフォームのインタフェースを指定す
るために使います。
FORMを複数記述した場合、フォーム形式の分割点がわからなくな
ってしまうので、HR(横線)などを使って区分けした方がはっきり
ます。
INPUTタグでは、つぎの属性が使えます。
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> The Text field: <INPUT NAME="entry"> <P> Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> The First Text field: <INPUT NAME="entry1"> <P> The Second Text field: <INPUT NAME="entry2"> <P> The Thrid Text field: <INPUT NAME="entry3"> <P> Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> Type in your street address: <INPUT NAME="address"> <P> Type in your phone number: <INPUT NAME="phone"> <P> <OL> <LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="sun"> Sun. <LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="dec"> Dec. <LI> <INPUT TYPE="checkbox" NAME="computer" VALUE="hp"> HP. </OL> <INPUT TYPE="submit" VALUE="Order Computer"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> The first text entry field, with default value "foo": <INPUT NAME="def-entry1" VALUE="foo"> <P> The second text entry field, with no default value "foo": <INPUT NAME="def-entry2"> <P> <OL> <LI> <INPUT TYPE="checkbox" NAME="box1" VALUE="first" CHECKED> The first checkbox, on by default. <LI> <INPUT TYPE="checkbox" NAME="box2" VALUE="second"> The second checkbox, off by default. <LI> <INPUT TYPE="checkbox" NAME="box3" CHECKED> The third checkbox, on by default. </OL> To submit the query, press this button: <INPUT TYPE="submit" VALUE="Submit query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> The first text entry field is twice as long (display up to 40 chars): <INPUT SIZE=40 NAME="entry51"> <P> The second text entry field is limited to five chars, and beeps when the user tries to enter more: <INPUT SIZE=5 MAXLENGTH=5 NAME="entry52"> <P> To submit the query, press this button: <INPUT TYPE="submit" VALUE="Submit query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> What would you like to do today? <SELECT NAME="what-to-do"> <OPTION> Drink Coffee <OPTION SELECTED> Read A Book <OPTION> Take A Walk <OPTION> Buy A Bagel <OPTION> Watch TV </SELECT> <P> Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> What would you like to do today? <SELECT NAME="what-to-do" SIZE=10> <OPTION VALUE="drink"> Drink Coffee <OPTION VALUE="read" SELECTED> Read A Book <OPTION VALUE=walk> Take A Walk <OPTION> Chop Down Rainforests <OPTION> Buy A Bagel <OPTION> Watch TV <OPTION> Sell Art <OPTION> Buy Jewelry <OPTION> Attend A Concert <OPTION> Read Poetry <OPTION> Excercise <OPTION> Whittle <OPTION> Cook Stir Fry <OPTION> Sip Espresso <OPTION value="Pig Out"> Munch Teddy Grahams </SELECT> <P> </FORM>
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> What items of clothing do you plan to wear? (Hold down <I>Control</I> to select or deselect disjoint items.) <P> <BLOCKQUOTE> <SELECT NAME="what-to-wear" MULTIPLE SIZE=8> <OPTION> T-Shirt <OPTION SELECTED> Jeans <OPTION> Sweater <OPTION SELECTED> Sweatshirt <OPTION SELECTED> Socks <OPTION> Cotton Sweater <OPTION> Rugby Shirt <OPTION> Leather Jacket <OPTION> Boots <OPTION> Running Shoes <OPTION> Windbreaker <OPTION> Vest <OPTION> Cape </SELECT> <P> </BLOCKQUOTE> Submit button: <INPUT TYPE="submit" VALUE="Submit Query"> <P> Reset button: <INPUT TYPE="reset"> <P> </FORM>
TEXTAREAでは、textフィールドには自動的にスクロールバーが表示
されます。
TEXTAREA要素には、かならず終了タグ</TEXTAREA>が必要です。つぎ
のように指定します。
<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>開始タグと終了タグとの間にテキストを入れると、デフォルトでそ
Please enter any negative comments below: <P> <TEXTAREA NAME="negative" ROWS=2 COLS=20></TEXTAREA> <P> Please enter your name below: <P> <TEXTAREA NAME="username" ROWS=1 COLS=40>Your Name Here</TEXTAREA> <P> To submit your comments, press this button: <INPUT TYPE="submit" VALUE="Submit Query"> <P> To clear the form, press this button: <INPUT TYPE="reset"> <P> </FORM>
submitボタンを押すことによって、FORMタグで入力されたデータ
が、指定されたCGIへの引数として渡され、CGIプログラムに渡され
ます。一般的なFORMタグおよびINPUTタグは、つぎのような方法で記
述します。
<FORM METHOD="POST" ACTION="/cgi-bin/foo"> <INPUT NAME="Test"> <p> Press the button to submit: <INPUT TYPE="submit" VALUE="Submit Query"> <p> </FORM>INPUTタグで入力されたデータは、つぎの形でACTIONで指定した
これらの点を考慮して処理しなければなりません。
action?name=value&name=value&name=value...
#!/bin/sh 前処理(プログラムの定義、初期値の設定など) cat << EOF Content-type: text/html <HEAD><TITLE>タイトル</TITLE></HEAD> <BODY> HTMLの文書 EOF 処理系(処理とその結果を記述する) echo '</BODY>'<HEAD>や<BODY>は、古いバージョンとの互換性を保つために記述
前処理の段階で、処理系に渡すためにデータを分割する。データ
の分割方法は、sedやawkを使うのが一般的です。いろいろな記述方
法があると思います。Content-type: text/htmlを先頭にHTML文書の
ヘッダ、タイトルと前書きを記述する。分割したデータを使って、
処理系を記述する。
#!/usr/local/bin/perl print "Content-type: text/html\n\n"; print "<TITLE>タイトル名</TITLE>; print "<H1>本文中のタイトル</H1>; read(STDIN, &buffer, $ENV{'CONTENT_LENGTH'}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; } 入力データがなかったときの処理 処理系foreach文の部分で、INPUTタグで名前(input_name)をつけたも
<INPUT NAME="your_name">としていた場合、$FORM{'your_name'}を使って処理できます。その
open (LOG, ">>/foo/log.html") || die "Can't open file\n"; print LOG "<title>Loggin data</title>\n" print LOG "<h1>Loggin data</h1>\n" print LOG "\n"; print LOG "$FORM{'your_name'} <p>\n"; print LOG "\n";のように書いておきます。
入力データが空の場合は、つぎのように処理します。
&empty_data unless $FORM{'name'}; : : sub empty_data { print "空である旨を伝える"; exit; }Perlでは、cgi-binを記述するための便利なライブラリもあります。
<FORM METHOD="POST" ACTION="/cgi-bin/post-query"> <INPUT NAME="Testimg" TYPE="image" SRC="rose.gif"> <UL> <LI> <INPUT TYPE="radio" NAME="zoom" VALUE="2" CHECKED> Zoom in 2x. <LI> <INPUT TYPE="radio" NAME="zoom" VALUE="4"> Zoom in 4x. <LI> <INPUT TYPE="radio" NAME="zoom" VALUE="8"> Zoom in 8x. </UL> To reset the form, press this button: <INPUT TYPE="reset"> <P> </FORM>