Perl/CGI研究室 'PERL-LABO'

Perl/CGI研究室 'PERL-LABO' TOPへ
戻る(History.Back)

フォームの色々

研究内容

ここまでの研究でフォームからのデータ受信についてはバッチリです。 今度はフォームについて研究しましょう。 フォームってどんなものがあるの?という研究です。

結果

テキスト input type=text

今までにも何度も使ってきたし、 これからも何度も使うだろう、テキストを入力するやつですね。 sizeでテキストボックスの幅を指定できます。 maxlengthで入力できる文字数を指定できます(ここでは30です)。

<input type=text name="input" value="これが初期値になります" size=50 maxlength=30>
チェックボックス input type=checkbox

チェックボックスです。ON/OFFとかYes/Noを選ぶような場合に使います。 チェックボックスの説明文は、valueの中に書くのではなくて、 INPUTタグのすぐ後に書くとかすればOKです。 CGIプログラムには、チェックが付いているときには name で指定した名前に value で指定した文字列が入って渡されます。 チェックが付いていないときは、何も渡されませんので注意しましょう。

<input type=checkbox name="input" value="チェックが付けられました"> 
チェックボックスの説明はINPUTタグの直後に書けばOKです。
チェックボックスの説明はINPUTタグの直後に書けばOKです。
チェックボックス(デフォルトON) input type=checkbox checked

チェックボックスはINPUTタグにcheckedという属性があると、初めからチェックされた 状態で画面に表示されます。他は普通のチェックボックスです。

<input type=checkbox name="input" value="チェックが付けられました" checked> 
チェックボックスの説明はINPUTタグの直後に書けばOKです。
チェックボックスの説明はINPUTタグの直後に書けばOKです。
ラジオ input type=radio

ラジオボタンです。複数のものの中から1つを選ぶという場合に使います。 checkedという属性が付いているものが最初に選択されています。 checkedを付けなければ、なにも選択されていない状態になります。

<input type=radio name="input" value="A" checked> checkedにしています。
<input type=radio name="input" value="B"> valueに設定した文字列がnameに設定されます。
<input type=radio name="input" value="C"> 何個でも並べることができます。
checkedにしています。
valueに設定した文字列がnameに設定されます。
何個でも並べることができます。
隠しフィールド input type=hidden

隠しデータ、というか見えないデータです。ブラウザ上にはなにも表示されませんが、 CGIプログラムに 名前=値 の情報を送ることができます。結構便利というか、 これがないと困っちゃうくらい有効に使えるものです。

<input type=hidden name="input" value="隠しデータ">
パスワード input type=password

パスワード入力ボックスです。画面上では入力した文字が見えません。 valueで指定した文字列が最初に入力されていますが、もちろんそれも見えません。 sizeで幅を指定できます。maxlengthで最大文字数を指定できます。

<input type=password name="input" value="秘密のパスワード" size=30 maxlength=20>
ファイル input type=file

ファイル名入力ボックスです。参照ボタンが自動的につきます。 sizeで幅を指定できます。 value属性は使用されないのでいらないです。 …どうやって使うのかはまだ分かってないです。

<input type=file name="input" size=30>
テキストエリア textarea

複数行のテキスト入力ボックスです。初期文字列はTEXTAREAタグで囲みます。 rowsで行数を、colsで幅を指定します。

<textarea name="input" rows=3 cols=70>
複数行入力ボックスです。初期文字列はこのようにタグで囲みます。
</textarea>
テキストエリア(折り返し無し)textarea wrap=off

複数行のテキスト入力ボックスです。 違いは、自動折り返しがないことです。 Enterキーで自分で改行することはできます。 横スクロールバーが付きます。

<textarea name="input" rows=3 cols=70 wrap=off>
自動折り返しがない複数行入力ボックスです。初期文字列はこのようにタグで囲みます。
</textarea>
ドロップダウンメニュー select 〜 option

複数の項目の中から1つの項目を選択するときに使います。 初期状態で選択させたい項目には selected 属性を指定しておきます。

<select name="input">
<option value="item1">項目1
<option value="item2" selected>項目2
<option value="item3">項目3
<option value="item4">項目4
<option value="item5">項目5
</select>

さて、optionをたくさん指定するとどうなるでしょうか?答えは、ドロップダウンにスクロールバーが表示されます。 このとき、ドロップダウンの高さ(言い換えると、何個以上だとスクロールバーが表示されるのか)は、試してみると、ブラウザによってバラバラ。 高さを指定する方法は、無いようです。

optionが50個のselectのサンプルです。


単一選択ボックス select size=n 〜 option

selectに size 属性を指定すると、選択ボックスになります。 size=1 の時はドロップダウンメニューになります。 項目数よりもsizeの方が小さい場合は、縦スクロールバーが付きます。

<select name="input" size=3>
<option value="item1">項目1
<option value="item2" selected>項目2
<option value="item3">項目3
<option value="item4">項目4
<option value="item5">項目5
</select>
複数選択ボックス select multiple 〜 option

selectに size 属性と multiple を指定すると、選択ボックスになります。 CtrlやShiftを押しながらクリックすることで、複数選択ができるようになります。 複数選択されていると、key=value1&key=value2のように、同じキーの複数のキーと値のペアがCGIプログラムに 送られます。(このサイトで作ったgetformdata()関数は、このデータに対応していません。)

<select name="input" size=3 multiple>
<option value="item1">項目1
<option value="item2" selected>項目2
<option value="item3">項目3
<option value="item4">項目4
<option value="item5">項目5
</select>

考察

フォームにはいろんなものがありました。 CGIプログラム側ではどのフォームも同じようにデータを受け取れます。 これでフォームはマスターですね?!

ここでは、1つずつに送信ボタンを付けましたが、複数のデータをまとめてCGIプログラムに 送ることももちろんできます。 ここではデータが1個だけなのでGETメソッドで送信していますが、 沢山のデータを送るときはPOSTメソッドにすることを 忘れないようにしましょう。

分かったこと

  1. フォームには色々ありました!
Perl/CGI研究室 'PERL-LABO' TOPへ
戻る(History.Back)

Copyright (c) 'PERL-LABO' All Rights Reserved.  リンクフリーです。