フォームついて

フォームについて

◆フォームとは
◆CGIって？
◆CGIを使用するために
◆フォームタグについて
◆フォームアクション
◆1行テキストボックス
◆テキストボックス
◆チェックボックス
◆ラジオボタン
◆選択リスト
◆入力モードについて

◆フォームとは

CGIにデータを渡すための機能を表します。フォームの中にはメールフォームが代表的ですが、その他BBS・チャット・などがあります。
具体的にいえば、テキスト欄、セレクトリスト、ラジオチェックなど入力をうながすような機能をいいます。
フォーム機能を知るためにはCGIを知る必要があります。
htmlだけでメールフォームは実行できません。
必ずCGIが必要であることを覚えておいてください。

◆CGIって？

common gateway interfaceの略で主にperl(パール)言語というUnix系サーバー用のOSで動く言語で書かれたプログラムのことです。
いわゆる基本的には一般のパソコンでは動かないものです。
しかし、HPなどを置くサーバーで動作しするもので、HPでのhtmlではできないことを可能にします。
htmlが静的ページだとすればCGIは動的ページだといえます。

解り易くいえば掲示板、チャット、検索エンジン、カウンタなどをいいます。これらはCGIを使って表現しています。これを作るのはプログラムを精通していなければ書けません。
ですが、ある程度のCGIプログラムは無料で配布されています。そこに行って探してみましょう。

その他CGIはperl言語というのは先ほどいいましたが、よく似た機能のPHP(ピーエイチピー)言語やWindowsサーバーで動くASP(エーエスピー)機能などもあります。

◆CGIを使用するために

CGIをするにはホームページを置くサーバーに利用できる環境がないとだめです。おおくの無料ホームページサービスではCGIは利用できません。
その理由として、CGIを使用することによって、サーバーにかなりの負荷がかかり、へたすれば、サーバーをダウンさせる原因となるためです。
ですから、あなたのサーバーがCGI可能かどうか調べる必要があります。
もし、不可なら、あきらめないでください。世の中には無料でチャットや掲示板、検索エンジン、カウンタなどレンタルしてくれるところがあります。

無料レンタルとは違って、CGIのプログラムを無料配布してくれているたくさんのサイトがあります。
またあっぷっぷの運営会社であるファーストネットジャパンのCGI BANKでもいくつかのフリーのCGIを配布しております。
ダウンロードし、各仕様に基づいて設置しましょう。設置方法はそれぞれ違いますし、サーバーによって改造しなくてはいけません。役立ちリンク集で探してください。

CGIって難しい？

CGIは最初から作ろうとすればはっきりいってプログラムを知らない人には難しいと私は思います。しかしながら、配布されているCGIをつかうなら比較的容易とまでいきませんが、勉強しだいで理解できます。

◆フォームタグについて

<form>フォームタグを使います。

フォームというのはCGIなどにアクションをおこしたり、その他チェックボックスなどのタグです。
例えば
　　

上のようなものです。

例えば、良くあるフォームでメールフォームがあります。これはボックスの中に文字を入れ送信を押せばメールを出したりできるものです。

上のようなものをいいます。
送信ボタンを押せばCGIを実行しデーターを送ることができます。

◆フォームアクション

フォームタグは
<form action="CGIのＵＲＬ" method="post">
・・・
</form>
とかきます。・・・の部分にテキストやチェックチェックボックスなどのタグを書いていきます。

ではその中のaction=""は何かといいますとＣＧＩのＵＲＬを書くことによって入力したデーターを処理させるわけなのです。

具体的にいいますと下のようなフォームがあったとすれば

お名前

メール

タグは
<form action="CGIのＵＲＬ" method="post">
お名前<br>
<input type=text name="NAME"><br>
メール<br>
<input type=text name="email"><br>
<input type=submnit value=送信><input type=reset value=リセット>
</form>

となります。

さてmethod=post　ってなんでしょうか？method=getの場合もあります。
まずgetから説明しますとこの場合例えば送信ボタンをおすと
ブラウザが
http://www.****.net/123.cgi?name=あっぷっぷ&email=info@apupu.net
のように長いＵＲＬをサーバーに送ります。
postの場合URLには埋め込まれません。
そちらを使うかはサーバーにもよりますが、大抵はpostがいいと思います。

input　・・・データを入力するテキストボックスやチェックボックス、ラジオボタン、送信ボタン、リセットボタンなどを表示します。
type="フォームの種類" ・・・フォームの種類を指定します。フォームの種類にはtext・checkbox・radio・password・submit・file・hiddenなどがあります。
各フォームの種類は順に説明していきます。

◆1行テキストボックス

<input type="text">インプットタグにtext属性を使います。

<input type="text" name="title" size="20" maxlength="100" value="タイトル名が入ります">

一行テキストボックスは名のとおり一行だけの文字列を入力できるフォームです。
ひとつづつ説明していきます。

input ・・・これは既述ですが内容を送信するためのタグです。
type="text" ・・・1行テキストを表します。
name="フィールド" ・・・このinputタグに名前をつけます。後から見てわかりやすいものにしておきましょう。記号は使わない様にしましょう。
size="20"　・・・テキストボックスのサイズを表します。半角文字数の大きさです。
maxlength="100"　・・・入力できる最大文字数を指定できます。(半角文字数の数値です。)
value="データ"　・・・CGIに送るデーターの内容です。

なお、vodafoneではmaxlengthを指定しない場合初期状態では28文字しか入らない機種がありますのであえて文字数を指定する必要があるようです。

◆テキストボックス

<textarea>テキストエリアタグを使います。

<TEXTAREA rows="2" cols="20">
</TEXTAREA>

テキストボックスは複数行を入力できるフォームです。複数行テキストボックスともいいます。
<textarea>～</textarea>で囲みます。

textarea　・・・複数テキストボックスのタグを表します。
rows="数値"　・・・行数を指定できます。
cols="数値" 　・・・横サイズを指定できます。20にすれば半角文字を20字の大きさといこと。

◆チェックボックス

<input type="checkbox">インプットタグにcheckbox属性を使います。

<input type="checkbox" name="apple" value="on" checked>りんご<br>
<input type="checkbox" name="orange" value="on">みかん

りんご
みかん

チェックボックスは複数設置できます。その際はname="***"の***をすべて異なるものにする必要がありますので注意してください。チェックボックスは複数選択できるような質問に使えますね。

type="checkbox"　・・・チェックボックスを表します。
name="フィールド"　・・・チェックボックスに名前を指定します。(半角英数字)
value="データー"　・・・送信したい初期データー。チェックするとCGIに「on」という文字を送信します。もちろんonである必要はありません。
checked　・・・初期状態でチェックされています。

◆ラジオボタン

<inpu type="radio">インプットタグにradio属性を使います。

<input type="radio" name="sex" value="男" checked>男<br>
<input type="radio" name="sex" value="女">女

男
女

ラジオボタンも複数設置できますが先ほどのcheckboxとは違いname="***"を同じグループ内では同名にする必要があります。
ラジオボタンは複数の中から１つしか選択できないようになります。

type="radio"　・・・ラジオボタンを表します。
name="フィールド"　・・・ラジオボタンに名前を指定します。(半角英数字)
value="データー"　・・・送信したい初期データー。チェックしているCGIに「男」という文字を送信します。もちろん女がチェックされれば女が送信されます。
checked　・・・初期状態でチェックされています。

◆選択リスト

<select>セレクトタグを使います。

<select name="pref">
<option value="東京">東京
<option value="名古屋">名古屋
<option value="大阪" selected>大阪
</select>

選択リストは項目が非常に多い場合に向いています。<select>～</select>で内容を囲みます。<option value="データー">表示データ　データ欄は実際におくる内容です。表示データーはページ上でみえる文字です。
わかりやすくいうと<option value="1">名古屋でも可能ということです。

select　・・・選択リストを表します。
name="フィールド"　・・・選択リストに名前を指定します。(半角英数字)
option="データ"　・・・　選択内容です。
selected　・・・初期状態で選択されています。

◆入力モードについて

既出の
<input type="text" ****>
<textarea **** >
などのタグに例えば<input type="text" istyle="1" ***>
のようにistyle="値"をいれることによって初期値に入力を全角かななどにすることができます。

istyle="1"・・・・・・全角かな
istyle="2"・・・・・・半角カナ
istyle="3"・・・・・・英字
istyle="4"・・・・・・数字

iモードのタグですがez-webでも使えます。

vodafoneの場合
mode="hiragana" ・・・・・・全角かな
mode="katakana"・・・・・・全角カナ
mode="hankakukna"・・・・半角ｶﾅ
mode="alphabet"・・・・・・・英字
mode="numeric"・・・・・・・数字

あっぷっぷ携帯ホームページ講座TOP - あっぷっぷ