フォームを作成する

フォームとは

「フォーム」とはWebページに設置した記入欄や選択項目に閲覧者が入力し、その内容をWebサイトの管理人などに送信できるようにしたページのことです。
「フォーム」は、商品の注文やサービスの予約、アンケートなどの用途に利用できます。

フォームを定義するには、フォームの開始位置に<form>、終了位置に</form>を記述します。
<form>〜</form>の間に“フォームの部品”を配置します。

フォームの送信方法

「CGI」で送信する
フォームに入力された内容を送信するには、サーバーのCGIプログラムを利用するのが一般的です。
CGI（Common Gateway Interface）とは、ブラウザからの要求に応じて、サーバーがプログラムを起動し、結果をブラウザに返すしくみのことです。
CGIプログラムによって、利用方法が異なるので、提供元で確認しましょう。

<form action="CGIプログラムのファイルパス" method="post(またはget)" enctype=""データ形式">

「メール」で送信する
CGIの代わりにメールを利用してフォームの内容を送信することもできます。

<form action="mailto:メールアドレス" method="post(またはget)"enctype="データ形式">

※post…フォームのデータのみを送信。 get…URLとフォームのデータをセットで送信。

フォームの部品

ご注意！以下の入力欄・送信ボタン等は見本です。実際に内容を送信することはできません！

「テキストボックス」
<input type="text" name="名前" size="サイズ" maxlength="最大文字" value="初期の文字列">

「パスワード入力ボックス」
<input type="password" name="名前" size="サイズ" maxlength="最大文字">

「チェックボックス」
<input type="checkbox" name="名前注1" value="値" checked注2>

ダイレクトメールを希望する メールマガジンを希望する 定期訪問を希望する

「ラジオボタン」
<input type="radiox" name="名前注1" value="値" checked注2>

はい いいえ

注1，名前は共通の名前を指定しおくとよいでしょう。
注2，chekedはあらかじめチェック状態にしておく場合のみ記述します。

「ファイル入力ボックス」
<input type="file" name="名前" size="文字数">

ファイルのアップロードなどに使用します。

「選択リスト・プルダウン」
<select name="名前">
<option value="値">選択項目1</option>
<option value="値">選択項目2</option>
<option value="値">選択項目3</option>
</select>

「選択リスト・リストボックス」
<select name="名前" multiple>
<option value="値">選択項目1</option>
<option value="値">選択項目2</option>
<option value="値">選択項目3</option>
</select>

「option」要素に「selected」属性を加えるとあらかじめ選択済みにしておくことができます。
<option value="値" selected>

「テキストエリア」
<textarea name="名前" cols="幅" rows="高さ">
あらかじめテキストエリアに表示しておきた文字列を記述。表示しない場合は無記入。
</textarea>

「送信ボタン」「リセットボタン」
<input type="submit" name="名前" value="ボタンに表示する文字列">
<input type="reset" name="名前" value="ボタンに表示する文字列">

  

「画像の送信ボタン」
<input type="image" name="名前" src="画像のURL" alt="代替文字">

戻る