ホームページ作成講座

ホームページ作成講座 vol.07 …フォーム


FORM要素
フォームを送信するための要素。サーバによってそれぞれcgiフォームが設置してある場合も多いので、そのソースを流用して使う場合もあるでしょう。mailtoで送るメールフォームの場合、例えば『メールアドレスをクリックすると自動的に起動する設定のメールソフトのデフォルトデータを用いて送信する』など、メールソフトを起動するなどブラウザの動作に依存するので注意書きが必要です。
属性:action … 送信先の指定。cgiの置いてあるURLやmailtoで指定したメールアドレスなど。
属性:method … そのまま送信する場合はpost(mailtoの場合はこれに確定)、規定値を入れる場合はget(cgiなどの処理プログラムに送る場合はこちらを使うこともある)。
<FORM action="URL" method="post">〜</FORM>

INPUT要素 終了タグなし。
フォームの中身を形成するオブジェクト。入力/送信する項目をコントロールする。
属性:type … 表示される入力項目の形式を指定する。
・属性値:checkbox … チェックボックス。これを指定したらセットでValue属性もつく。
・属性値:radio … ラジオボタン。これを指定したらセットでvalue属性もつく。
・属性値:text … 1行のテキスト入力フィールドを表示。size属性と組み合わせる。
・属性値:button … 
・属性値:hidden … 
・属性値:submit … 送信用ボタン。value属性でボタンに表示する文字を決める。
・属性値:reset … リセットボタン。value属性でボタンに表示する文字を決める。
属性:name … 送信時に各コントロールに名前をつける。メールフォームの場合は好きな項目名で良いが、cgiフォームなどの場合は規定値がある場合も多いので注意。
属性:size … textなどの表示サイズを指定。
属性:tabindex … ユーザーがtabキーを押す事でフォーカスを移動させる順序を指定する。数字で属性値を指定しておくと、小さい数字から順に移動。
属性:value … 

TEXTAREA要素 
感想やお問い合わせ内容などのように、長いテキストを入力しやすい複数行のエリアを作りたい時に用いる。
属性:rows/cols … 表示する行数と幅を指定。
属性:name … 送信時に各コントロールに名前をつける。メールフォームの場合は好きな項目名で良いが、cgiフォームなどの場合は規定値がある場合も多いので注意。
<TEXTAREA rows=3 cols=30 name="inquiry">初期値を入れておいた方が良い</TEXTAREA>

SELECT要素
OPTION要素と組み合わせることで選択項目を作る。
属性:name … 送信時に各コントロールに名前をつける。メールフォームの場合は好きな項目名で良いが、cgiフォームなどの場合は規定値がある場合も多いので注意。
属性:size … 選択項目がリスト表示の場合の表示する行数。
属性:multiple … リスト表示の場合に複数項目の選択が可能になる。

OPTION要素
選択項目を決める。
属性:value … 送信する名前を指定。
属性:selected … 初期状態で指定しておく項目につけておく。
<SELECT name="timezone">
<OPTION value="no" selected>指定なし</OPTION>
<OPTION value="am">午前</OPTION>
<OPTION value="pm">午後</OPTION>
</SELECT>


Webデザイン制作
SEO:検索エンジン最適化
ホームページ作成講座
日刊運勢メールマガジン
Playstation2ゲーム攻略