ミスティーネットPerl・CGI講座 パール・CGIレッスン MISTY-NETレンタルサーバー・PERLプログラミング講座 CGI&PERL究極のレシピ
| HOME | ご利用について | 推奨環境 | リンクに関して | 免責/規約 | お問合せ | ミスティーネット | リンク集 |
Perl言語リファレンス

ミスティーネットPerl・CGI講座/基本編
ミスティーネットPerl・CGI講座/基本編
始めに 始めに
変数について 変数について
処理の制御1 処理の制御1
処理の制御2 処理の制御2
配列の処理 配列の処理
ハッシュの処理 ハッシュの処理
数値の扱い 数値の扱い
文字の扱い 文字の扱い
時間の処理 時間の処理
サブルーチン サブルーチン
ファイルの処理 ファイルの処理
ディレクトリの処理 ディレクトリ処理
CGIについて CGIについて
漢字の処理 漢字の処理
    (文字コード)
Cookie の処理 Cookie の処理
正規表現1 正規表現1
正規表現2 正規表現2
演算子について 演算子について
ライブラリ ライブラリ
デバッグ デバック
環境変数について 環境変数
ミスティーネットPerl・CGI講座/基本編

ミスティーネットPerl・CGI講座/応用編
ミスティーネットPerl・CGI講座/応用編
カウンターを作ってみよう カウンターを
     作ってみよう!
ミニゲームを作ってみよう ミニゲームを
     作ってみよう!
ミスティーネットPerl・CGI講座/応用編

  HOME >> CGI について >> フォームタグに関して
  1. フォームについて
  2. 各種フォームタグについて
  3. サンプルフォーム
■ フォームについて
データを入力してもらう為のフォームを作成するには、FORMタグを使用します。
「<FORM> 〜 </FORM>」 の間に、入力ボックスや、ラジオボタンなどの入力項目を配置します。

フォームタグの内容は下記のようになります。
フォームタグについてのより詳しい説明は、「ミスティーネット・HTML講座」 を御参照ください。


[FORM タグの使用方法]

<FORM action="URL" method="HTTPメソッド">
     この部分に各種フォームタグを配置
</FORM>
URL
HTTPメソッド
・・・
・・・
フォームのデータを送信するCGIファイルのURL
データの送信方法(POST か GETか)


■ 各種フォームタグについて

データを送信する為のフォームタグには下記のものが使用できます。
下記以外のフォームタグにつきましては、「ミスティーネット・HTML講座」 を御参照ください。

各フォームタグには「name="・・・"」というように、必ずタグの名前を設定してください。
CGI でデータを受け取ったときに、ハッシュ変数 $FORM{name} にデータが受け渡される為、 「name="・・・"」を設定していないと、正しくデータを扱うことが出来ません。

<INPUT type="text" name="名前" value="デフォルト文字" size="幅"
maxlength="最大文字数">

名前
デフォルト文字

最大文字数
・・・
・・・
・・・
・・・
入力ボックスの名前をつけます
あらかじめ入力されている文字
入力ボックスの幅(文字数)
入力可能な最大文字数

[使用例]

URLを入力してね::
<INPUT type="text" name="url" value="http://" size="40" maxlength="40">
       
URLを入力してね::
入力ボックスでは、使用するブラウザーによって表示される幅が大きく異なります。
是非、複数のブラウザーで確認を行なってHTMLファイルを作成されることをお勧めいたします。



<INPUT type="password" name="名前" value="デフォルト文字" size="幅"
maxlength="最大文字数"

名前
デフォルト文字

最大文字数
・・・
・・・
・・・
・・・
入力ボックスの名前をつけます
あらかじめ入力されている文字
入力ボックスの幅(文字数)
入力可能な最大文字数

[使用例]

パスワードを入力してね::
<INPUT type="password" name="pwd" size="40" maxlength="40">
       
パスワードを入力してね::
「type="password"」 では、入力された文字が 「***」 と表示され他人に見られないように
入力データを保護します。



<textarea name="名前" rows="行数" cols="幅" wrap="改行方法"> 〜 </textarea>
名前
行数

改行方法
・・・
・・・
・・・
・・・
入力ボックスの名前
入力ボックスの行数
入力ボックスの幅(文字数)
off -- 改行しない
soft -- 改行して表示
hard -- 改行して送信

[使用例]

ご感想::<br> <textarea name="message" rows="3" cols="30"></textarea>
       
ご感想::
入力ボックスにあらかじめ入力しておきたい文字がある場合は、「textarea タグ」 の間に文字を入力します。


ラジオボタンは、複数の選択肢の中から1つだけを選択する形式のボタンです。

<INPUT type="radio" name="名前" value="送信文字" checked>
名前
送信文字
checked
・・・
・・・
・・・
ラジオボタンの名前
選択された結果として送信される文字
あらかじめ選択状態にする場合に指定します

[使用例]

● このサイトの評価は?
<INPUT type="radio" name="fine" value="1" checked>最高
<INPUT type="radio" name="fine" value="2">まあまあ
<INPUT type="radio" name="fine" value="3">だめだめ
       
● このサイトの評価は?
最高 まあまあ だめだめ

* 共通の項目の選択肢には同じ名前を設定する必要があります。



複数の選択肢の中から複数の項目を選択できるようにする場合に使用します。

<INPUT type="checkbox" name="名前" value="送信文字" checked>
名前
送信文字
checked
・・・
・・・
・・・
チェックボックスの名前
選択された結果として送信される文字
あらかじめ選択状態にする場合に指定します

[使用例]

● あなたのパソコンのメーカーは?(お持ちのパソコンすべて)
<INPUT type="checkbox" name="corp" value="1">NEC
<INPUT type="checkbox" name="corp" value="2">富士通
<INPUT type="checkbox" name="corp" value="3">東芝
<INPUT type="checkbox" name="corp" value="4">SONY
<INPUT type="checkbox" name="corp" value="5">Apple
<INPUT type="checkbox" name="corp" value="6">その他
       
● あなたのパソコンのメーカーは?(お持ちのパソコンすべて)
NEC 富士通 東芝 SONY Apple その他




複数の選択肢の中から1つだけを選択するメニューを作成します。

<SELECT name="名前">      ← メニュー開始
     <OPTION value="送信文字" selected>      ← メニューの項目
     ・・・
</SELECT>      ← メニュー終了

名前
送信文字
selected
・・・
・・・
・・・
メニューの名前
選択された結果として送信される文字
あらかじめ選択状態にする場合に指定します

[使用例]

● あなたの血液型は?
<SELECT name="blood">
     <OPTION value="a" selected>A</OPTION>
     <OPTION value="b">B</OPTION>
     <OPTION value="o">O</OPTION>
     <OPTION value="ab">AB</OPTION>
</SELECT>
       
● あなたの血液型は?




このボタンをクリックするとフォーム内のデータが送信されます。

[使用例]

<INPUT type="submit" value="送信">
  



このボタンをクリックするとフォームが初期状態に戻ります。

[使用例]

<INPUT type="reset" value="クリア">
  




■ サンプルフォーム
このフォームでは、入力されたアンケートの内容をCGIで受け取り、HTMLとして表示しています。
実際に動作しますので、試してみてください。
このHMTLとCGIのソースを見ることが出来ますので、実際の表示や動作とソースを見比べてみて参考にしてください。
このサンプルでは、日本語変換を行なう為に「日本語ライブラリ jcode.pl」 を組み込んでいます。
このサンプルソースをそのまま試される場合は、別途 「jcode.pl」 をご用意していただく必要がございます。
     → 日本語ライブラリについて


     → このアンケートのHTMLソース
     → アンケート処理のCGIソース


-*=-*= アンケート(サンプル) -*=-*=

お名前:
年齢:
血液型: AB
好きな色(複数選択可): 桃色 黄色 橙色
ご希望のパスワード:
備考欄:





| HOME | ご利用について | 推奨環境 | リンクに関して | 免責/規約 | お問い合わせ | ミスティーネット |
(C)Copyright 2002 ミスティーネット Inc. All Right Reserved.