初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL7.送信フォームを作ってみよう　その1.入力フィールドを作る

この章では、アンケートなどを取る際に用いるフォームを作るスクリプトについて学びましょう。HTMLスクリプト上で、フォームを示すタグは<FORM>〜</FORM>となります。このタグの間に内容を書いてゆくわけですが、まずヴィジターが自由に書き込むことの出来る入力フィールドから作ってみます。

�T.１行の入力フィールドを作る

上のような例を、ご覧になったことがあると思います。こういう１行の入力フィールドは、以下のように<INPUT>タグ内で指定します。

<INPUT TYPE="text (password, hidden)" 

NAME="フィールド名（項目名）"

SIZE="幅を文字数で指定"

VALUE="初期表示されるテキスト"

MAXLENGTH="入力可能な最大文字数" >

TYPE ... 訪問者が文字を入力した時にそれがそのまま文字として表示されるか、「*」で隠し文字として表示されるかを決めます。なお、この項目には管理者側だけが分かれば良い情報を一緒に送信する「隠しフィールド」を設定することも出来ます。複数の入力フォームを設置した時など、どのフォームからの送信かを知るためなどに使うと便利です。この項目だけは必須ですので必ず指定して下さい。

・text ... 文字をそのまま表示

・password ... 文字を「*」で表示（但し、画面上で「*」なるだけで、送信されるデータは入力されたまま表示されます。）

・hidden ... 隠しフィールドになるので、訪問者の画面上には表示されません。

NAME ... 送信された時に、どの項目に対する入力かを示すタイトルになります。

SIZE ... 表示されるフィールドの幅を文字数で指定

VALUE  ... 画面を読み込んだときに、初期表示されるテキストを指定します。

・TYPE="text"の時 ... フィールドに予め表示されるテキスを指定。

・TYPE="password"の時 ... 文字を指定しても「*」で表示されてしまいます。

・TYPE="hidden"の時 ... 訪問者には関係ないが、一緒に送信する内容を書き込んでおきます。

MAXLENGTH ... そのフィールドに入力可能な文字の最大数

上の例では、スクリプトは以下のようになっています。合わせてご覧下さい。

<FORM>

<p>お名前: <INPUT TYPE="text" NAME="yourname" SIZE="15" MAXLENGTH="20" ></p>

<p>ご住所: <INPUT TYPE="text" NAME="address" SIZE="50" VALUE="最大100文字まで入力できます。" MAXLENGTH="100" ></p>

<p>電話番号: <INPUT TYPE="text" NAME="tel" SIZE="20" MAXLENGTH="20" ></p>

<p>パスワード: <INPUT TYPE="password" NAME="pw" SIZE="10" VALUE="***" MAXLENGTH="10" ></p>

<p><INPUT TYPE="hidden" NAME="pagename" VALUE="homepage_primary1_7_1"></p>

</FORM>

★送信例★

�U.複数行の入力フィールドを作る

次に意見などを求める場合に複数行の記入が可能なテキスト・フィールドを作成してみましょう。

ex1.

これは<TEXTAREA>〜</TEXTAREA>で指定します。<INPUT...>タグとの違いは、これで挟まれたタグの間に文字を入力すると、フィールド内に表示させることが出来る点です。そのため、白紙のままで良い場合も最後の</TEXTAREA>が必要になります。

ex1.のスクリプトは以下の通りですが... 

<FORM>

<TEXTAREA NAME="opinion" COLS="50" ROWS="10"></TEXTAREA> 

</FORM>

ex2.のように書き込めば、フィールド内に文字を初期表示できることになります。

ex2.

<FORM>

<TEXTAREA NAME="opinion" COLS="50" ROWS="10">ご意見、ご感想、ご希望などありましたらどうぞ。</TEXTAREA> 

</FORM> 

NAME ... 送信された時に、どの項目に対する入力かを示すタイトルになります。

COLS ... 表示されるフィールドの幅を文字数で指定

ROWS ... フィールドの行数を指定

WRAP ... 改行方法の指定

　　※せっかくこのような大きいフィールドを作っても、このままでは自動改行されず、１行で長々と表示されてしまう場合があります。そこで、IEやNetscape では独自の属性WRAPが定義されており、<TEXTERIA>タグ内に指定すれば、以下のように改行設定することができます。しかし、この属性は他のブラウザでの動作は保証されていません。

・WRAP="soft" ... 画面上でのみ自動改行され、実際送信されるデータは改行されません。

・WRAP="hard" ... 画面上、実際送信されるデータともに改行されます。

・WRAP="off" ... 改行されません。

指定しなければIEでは"hard"、Netscapeでは"off"と同じになりますので、確定したければ指定しておく必要があります。なお、COLSで指定した文字数は半角英数で記入した場合の文字数なので、特に改行指定した場合やIEで見た場合は、１行で全角入力出来る文字数が約半分になります。またCOLS、ROWSは単に入力フィールドの画面表示サイズを指定するためのもので、実際に記入する人が指定されている行数以上に入力すると、内容がスクロール表示されるようになります。従って指定数以上の行数、文字数を送信することも可能になっています。

初級篇1.VOL6.フレームページを作ってみよう・その７ <<

>> 初級篇1.VOL７.送信フォームを作ってみよう・その２