Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

フォーム要素(input,selectタグ等)の概説

◆ はじめに

本ページは、フォーム要素をまとめてみました。

フォーム要素は、ユーザからデータを入力してもらう時に使う要素です。
尚、入力してもらったデータは、通常、CGIでサーバ側のプロセスが処理します。

また、HTML(JavaScript含む)には、VB等で作られた専用入力APのような細かな制御は出来ません。

まずは、フォームサンプルを見てください。

◆ フォームサンプル

個人情報
メッセージ

◆ フォームサンプルソース

<form method="POST" action="../bin/chaiko.cgi">
<fieldset>
<legend>個人情報</legend>
<label for="namefield">おなまえ</label>
<input type="text" name="name"  value="" size=30 maxlength=30 class="textbox" ID="namefield">
<br>
<label for="chiikifield">おところ</label>
<select name="area" class="textbox" ID="chiikifield"> 
<optgroup label="国内">
<option value="北海道" >北海道</option>
<option value="東北" >東北</option>
<option value="関東" selected="selected">関東</option>
<option value="甲信越" >甲信越</option>
<option value="東海" >東海</option>
<option value="北陸" >北陸</option>
<option value="近畿" >近畿</option>
<option value="中国" >中国</option>
<option value="四国" >四国</option>
<option value="九州" >九州</option>
</optgroup>
<optgroup label="国外">
<option value="外国" >外国</option>
<option value="その他" >その他</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>メッセージ</legend>
<label for="contarea">本文</label>
<textarea ROWS=10 COLS=60 name="body" class="textbox" ID="contarea"></textarea>

<br><label for="color">文字色</label>
<input type="radio" name="chacolor" value="iro01" checked ID="color">
<span class="iro01">■</span>
<input type="radio" name="chacolor" value="iro02">
<span class="iro02">■</span>
<input type="radio" name="chacolor" value="iro03">
<span class="iro03">■</span>
<input type="radio" name="chacolor" value="iro04">
<span class="iro04">■</span>
<input type="radio" name="chacolor" value="iro05">
<span class="iro05">■</span>
<input type="radio" name="chacolor" value="iro06">
<span class="iro06">■</span>
<input type="radio" name="chacolor" value="iro07">
<span class="iro07">■</span>
<input type="radio" name="chacolor" value="iro08">
<span class="iro08">■</span>
</fieldset>

<p>
<input type="hidden" name="inzfg"  value="2">
</p>

<p><label for="kakiko">書込み</label>
<input type="submit" value="書込み" class="bottun1" ID="kakiko">
<input type="reset" value="取消し" class="bottun2">
</p>
</form>

◆ フォームサンプル説明

このサンプルは、掲示板の入力フォームです。では、上から順番に説明していきましょう。

form要素

まずは、HTML概説リファレンスのform要素を参照してください。
ということで、属性の説明をいたします。

action属性(必須)
送信された入力データを処理するプログラムのURIを指定します。
method属性
getまたはpostのHTTPメソッドを指定します。詳しくは「CGI-Perlの基礎講座」を参照してください。
enctype属性
MIMEタイプを指定します。デフォルトは「application/x-www-form-urlencoded」で、type属性が"file"のinput要素を含む場合は、「multipart/form-data」を指定してください。
name属性
スクリプト言語(入力データを処理するプログラム)などから参照するための名前を指定します。
target属性
フレームや別ウィンドウに「入力データを処理するプログラムからの結果」を表示する時にフレーム名、ウィンドウ名等を指定します。
尚、フレーム名、ウィンドウ名以外には、_self(今開いているウィンドウ)、_blank(新しいウィンドウ)、_top(フレームを解除してトップウィンドウ)、_parent(親フレームウィンドウ)があります。

fieldset要素

HTML概説リファレンスのfieldset要素を参照してください。

legend要素

HTML概説リファレンスのlegend要素を参照してください。

label要素

HTML概説リファレンスのlabel要素を参照してください。

input要素

まずは、HTML概説リファレンスのinput要素を参照してください。
ということで、属性の説明をいたします。

type属性
input要素の形式を指定します。形式は以下の通りです。
  • text - 一行テキスト入力フィールド(デフォルト値)
  • password - パスワード入力用フィールド(入力文字を * 等に伏せて表示)
  • chekbox - チェックボックス(複数選択可)
  • radio - ラジオボタン(1つのみ選択可)
  • button - 汎用ボタン
  • submit - 送信ボタン
  • reset - リセットボタン(フォーム内を初期状態にします。)
  • file - 送信するファイルを選択
  • image - src属性で指定した画像を送信ボタンにする。(画像のどこをクリックされたかの座標が送信される)
  • hidden - 表示されず送信されるデータ
name属性
部品の名前を指定します。フォームのデータが送信されるとき、この名前とデータが組になって送信されます。
value属性
type属性によって、いろいろです。
  • type属性がtextの場合 - 入力フィールドの初期値。
  • type属性がpasswordの場合 - この場合のvalue属性は、たぶんありません。
  • type属性がchekboxの場合 - 選択されるべき初期値(必ず指定する)。
  • type属性がradioの場合 - 選択されるべき初期値(必ず指定する)。
  • type属性がbuttonの場合 - ボタンのラベルとして表示される文字。
  • type属性がsubmitの場合 - ボタンのラベルとして表示される文字。
  • type属性がresetの場合 - ボタンのラベルとして表示される文字。
  • type属性がfileの場合- 選択されるファイル名のデフォルト値。
  • type属性がimageの場合 - この場合のvalue属性は、たぶんありません。
  • type属性がhiddenの場合 - 表示されず送信されるデータ。
size属性
type属性がtext,passwordの場合は文字数で、それ以外はピクセルで指定します。
maxlength属性
type属性がtext,passwordの場合、入力可能な最大文字数を指定します。
checked属性(checked="checked")
type属性がchekbox,radioの場合、選択状態を明示します。
disabled属性(disabled="disabled")
その部品に対して、操作が出来ないようにし、データはサーバーへ送信しないようにします。
readonly属性(readonly="readonly")
その部品に対して、操作が出来ないようにし、しかし、データはサーバーへ送信します。(また、しかし、選択操作のみは出来るみたいです。)
accept属性
type属性がfileの場合、サーバーで処理できるMIMEタイプを指定します。また、選択できるファイルを制限することが出来ます。
tabindex属性
タブキーでの部品間移動の順番を指定します。順番は0から32767を指定できます。
accesskey属性
部品にショートカットキーを割り当てます。
src属性
type属性がimageの場合の画像のURIを指定します。
alt属性
type属性がimageの場合で画像が表示できないときの代替テキストを指定します。

select要素

HTML概説リファレンスのselect要素を参照してください。

optgroup要素

HTML概説リファレンスのoptgroup要素を参照してください。

option要素

HTML概説リファレンスのoption要素を参照してください。

textarea要素

HTML概説リファレンスのtextarea要素を参照してください。
ということで、属性の説明をいたします。

rows属性
入力フィールドの表示行数を指定します。この値は、見かけを決めるもので、入力制限ではありません。
cols属性
入力フィールドの表示幅を文字数で指定します。この値は、見かけを決めるもので、入力制限ではありません。
name属性
部品の名前を指定します。フォームのデータが送信されるとき、この名前とデータが組になって送信されます。
disabled属性(disabled="disabled")
その部品に対して、操作が出来ないようにし、データはサーバーへ送信しないようにします。
readonly属性(readonly="readonly")
その部品に対して、操作が出来ないようにし、しかし、データはサーバーへ送信します。
tabindex属性
タブキーでの部品間移動の順番を指定します。順番は0から32767を指定できます。
accesskey属性
部品にショートカットキーを割り当てます。

Home/Menu/HTML概説リファレンス