ホームページ
ホームページ
ホームページ
ホームページ作成
作成
作成
作成 Note
Note
Note
Note
HOME HPビルダービルダービルダービルダー HTML/CSS CGI/Perl ez-HTML WebDesign Link SiteMap
WebブラウザにHTMLファイルを表示させる通常の「静的なページ」に対し、メールフォ ーム、掲示板、ブログなどのようにWebブラウザから入力された要求に対して Webサー バ側でプログラムを呼び出し処理した結果を返すしくみを、CGI （Common Gateway Interface ）といいます。このようなページを、「動的なページ」といいます。 この動的なページには、サーバ側でPerl、PHPやC言語などのプログラムが使われた り、JavaScriptのようにブラウザ側で処理します。このときWebサーバのCGIプログラムに 渡すパラメータは、テキストボックスやチェックボックスなどのフォーム部品で指定します。 これらのデータを入力するためのユーザインターフェース部分を、HTMLでは<form>要素 で記述します。 form 要素は、<form>～</form>で一つの入力フォームを形成します。フォームの中に は <input>、<select>、<textarea> などのフォーム部品を配置して通常、一つのサブミ ット（実行）ボタンを持ちます。各入力部品に値を入力した後、サブミットボタンを押すと method 属性で指定した転送方法で、action 属性で指定したアクション（転送先 URI ）を 呼び出します。
method 属性値はデータの送信方法により、get と post の二種類があります。これら はそれぞれ HTTP 要求メソッドの GET と POST に対応しています。
【 記述例 】
<form method="POST" action="./cgi-bin/xxx.cgi"> 名前<input type="text" name="名前" value="太郎"> <input type="radio" name="性別" value="男" checked>男性
<input type="radio" name="性別" value="女">女性 <input type="submit" value="送信">
<input type="reset" value="取消"> </form> Top Top Top Top ↑ ↑ ↑ ↑ HTML入力入力入力入力フォームフォームフォームフォーム form form form form 要素要素要素の要素ののの構造構造構造構造
<form method="POST" action="URI"> ～ </form>
名前 男性 女性 【 表示例 】 太郎 送信 取消 GET と と と POST と
HTTP メソッドの GETと POSTは、データの送信方法が異なります。GETは action 属性に指定した URI に ? をつけ、その後にデータをつけて URI として送られます。 それを受け取ったサーバは、 ? 以降を環境変数に入れて CGI プログラムに渡しま す。送信できる情報量には制限があります。
POSTは、URI の一部ではなく独立した本文として送られます。セキュリティの面で も有利な POST が、Web ページの入力フォームにはよく使われます。
フォーム<form>内のテキスト入力や実行ボタンなどの各フォーム部品を表示します。 下記の type 属性の値によって見栄えも動作も異なる部品となります。 以下、<input>フォーム部品の記述例と、表示例を示します。実行、送信ボタンはサン プルなのでできません。 type="text" type="text" type="text" type="text" ・・・・・・・・・・・・一行一行一行一行テキストテキスト入力テキストテキスト入力入力入力フィールドフィールドフィールド フィールド 一般的な、「一行テキスト」を入力するフィールドで す。フィールドの長さは size で半角英数字の文字数 を指定します。デフォルト値は 20 文字です。 type="password" type="password" type="password" type="password" ・・・・・・・・・・・・パスワードパスワードパスワード入力パスワード入力入力入力フィールドフィールドフィールドフィールド 他人にパスワードを見られないように、入力文字は すべてアスタリスク「＊」、または「●」で表示されます。 name 属性は通常、半角英数字にします。 type="file" type="file" type="file" type="file" ・・・・・・・・・ファイル・・・ファイルファイルファイル名入力名入力名入力フィールド名入力フィールドフィールド フィールド ブラウザからサーバーに、ファイルをアッ <input> <input> <input> <input>フォームフォームフォームフォーム部品部品部品部品 名前 【 表示例 】 日本太郎 パスワード 【 表示例 】 表示させないで、サーバ側にコントロールデータを渡す hidden 汎用ボタンを形成してスクリプトを起動 button 取消ボタンを形成してフィールド内すべてをデフォルト値にリセット reset 実行ボタンを形成して action 指定の URI にフォームデータを渡す submit ラジオボタンで一つの項目の選択 radio チェックボックスで複数項目の選択 checkbox ファイルをアップロードするためのファイル入力フィールド file パスワードの入力フィールド password 一行テキストの入力を行なうフィールド text 【type 属性 】 text や password フィールドの長さを文字数で指定。初期値は20 size 選択フォーム checkbox、radio の選択された初期値 checked スクリプトに渡される値で submit、reset はボタン名として表示 value フィールドのデータ名で submit と reset 以外すべてのタイプに必要 name 【 属性 】
名前 <input type="text" value="日本太郎">
【 記述例 】
パスワード <input type="password" name="pass" value="abcde">
【 記述例 】
ファイル名<input type="file" name="upfile">
プロードする際に用います。入力フィール ドの横には「参照」ボタンが表示されます。サ ーバー側には、ファイルを受け取るための CGIスクリプトなどを設置しておく必要があります。セキュリティ上、初期値を設定したり、 スクリプトで値を操作することはできません。 type="checkbox" type="checkbox" type="checkbox" type="checkbox" ・・・・・・・・・・・・チェックボックスチェックボックスチェックボックス チェックボックス オン・オフの値を持つチェックボックスを表示しま す。複数項目を選択できます。通常、どれかのボック スに checked をいれて選択状態にしておきます。 Top ↑ Top ↑ Top ↑ Top ↑ type="radio" type="radio" type="radio" type="radio" ・・・・・・・・・ラジオボタン・・・ラジオボタンラジオボタンラジオボタン 同じ name 属性をもつラジオボタンで、１つのラジオ ボタングループを形成します。複数の中でどれかひと つしかチェックできない点がチェックボックスと異なりま す。これもどれかのボタンに checked をいれてデフォルト値を選択状態にしておきます。 type="submit" type="submit" type="submit" type="submit" ・・・・・・・・・実・・・実実実行行行ボタン行ボタンボタンボタン このボタンを押すと、<form> タグの action 属性で 指定したアクションが呼び出されます。 type="reset" type="reset" type="reset" type="reset" ・・・・・・・・・取消・・・取消取消取消ボタンボタンボタンボタン このボタンを押すと、それまでに入力した情報をす べてキャンセルして、最初から入力をやり直すことが できます。 type="button" type="button" type="button" type="button" ・・・・・・・・・汎用・・・汎用汎用汎用ボタンボタンボタンボタン
<input type="button" onclick="...">のようにボ ファイル名 【 表示例 】 Browse... 映画 旅行 テニス 【 表示例 】 赤 青 黄 【 表示例 】 【 表示例 】 実行 【 表示例 】 取消
<input type="checkbox" name="hobby" value="映画" checked> 映画 <input type="checkbox" name="hobby" value="旅行"> 旅行
<input type="checkbox" name="hobby" value="テニス"> テニス
【 記述例 】
<input type="radio" name="color" value="赤" checked>赤 <input type="radio" name="color"> value="青">青
<input type="radio" name="color"> value="黄">黄
【 記述例 】
<input type="submit" value="実行">
【 記述例 】
<input type="reset" value="取消">
【 記述例 】
<input type="button" value="Click !">
タンをクリックしたとき、JavaScript などを起動する際 によく用いられます。 type="hidden" type="hidden" type="hidden" type="hidden" ・・・・・・・・・隠・・・隠隠隠しししフィールドしフィールドフィールド フィールド 実行ボタンが押されても、画面上には表示されませ ん。ユーザが知る必要のないコントロールデータを CGI プログラムに送信する場合などに使用します。 Top ↑ Top ↑ Top ↑ Top ↑ 【 記述例 】
<form method="POST" action="xyz.cgi"> <textarea name="msg" cols="25" rows="4"> ここにメッセージをどうぞ
</textarea>
<input type=submit value="送信"> <input type=reset value="クリア"> </form> 複数行のテキストを入力するフィールドです。input 要素とは異なり開始タグと終了タグ を使います。タグの間に記述された内容が初期値となります。データの名前を指定する name属性のほかに入力エリアの行数、列数を示す rows属性と、cols属性を指定しま す。（必須） <select> は、<form> で作成されるフォーム内の選択部品（セレクトボックス）を表示し ます。 size 属性で、画面に一度に表示する選択肢の行数を指定します。それぞれの選択 肢を記述するには <option> を用います。どれかに selected を入れてデフォルト値を選 択状態にします。 プルダウン プルダウン プルダウン プルダウン式式式式でででで表示表示表示表示するするするする場合場合場合場合 size 属性指定しないデフォルト値（size=1）で、プルダウンメニュー表示します。 【 記述例 】 <form action="xxx.cgi"> <select name="OS"> 【 表示例 】 Click ! 【 表示例 】 送信 <textarea> <textarea> <textarea> <textarea>フォームフォームフォーム部品フォーム部品部品：部品：：：テキストエリアテキストエリアテキストエリアテキストエリア 【 表示例 】 ここにメッセージをどうぞ 送信 クリア < <<
<select>select>select>select>セレクトセレクトセレクトセレクト部品部品部品部品
【 表示例 】
Windows 送信
button 要素は、type 属性により input 要素の button：汎用ボタン、submit：実行 ボタン、reset：リセットボタンと同様のボタンを作成します。 form 要素内に配置してフォ ーム部品とするほか、フォーム以外のJavaScript でも利用できます。 【 記述例 】 <button type="button">クリック</button> 【 表示例 】 クリック button 要素 入力必須項目（メールアドレス、メッセージ）をCGIプログラムに指定する例 <input type="hidden" name="need" value="email メッセージ"> <input type="submit" value="送信">
<option value="WIN" selected>Windows</option> <option value="MAC">Macintosh</option>
<option value="UNIX">UNIX</option> <option value="OTHER">その他</option> </select>
<input type="submit" value="送信"> </form> リスト リスト リスト リスト形式形式形式形式ででで表示で表示表示する表示するするする場合場合場合場合 size 属性で表示行数を指定することで、リストボックス形式で表示します。 【 記述例 】 <form action="xyz.cgi">
<select name="browser" size="4">
<option value="IE6">Internet Explorer6</option> <option value="IE7">Internet Explorer7</option> <option value="Fox2">Mozilla Firefox2</option> <option value="Opera9" selected>Opera9x</option> <option value="OTHER">その他</option>
</select>
<input type="submit" value="送信"> </form> <optgroup> <optgroup> <optgroup> <optgroup> オプショングループオプショングループオプショングループ オプショングループ メニューは、選択肢が多くなると使いにくくなります。そこで、optgroup 要素で選択肢の option 要素をグループ化します。グループには label 属性で名前を付けます。（必須） 【 記述例 】 <select name="area"> <optgroup label="首都圏">
<option selected>東京都</option> <option>千葉県</option> <option>神奈川県</option> <option>埼玉県</option> </optgroup> <optgroup label="京阪神"> <option>大阪府</option> <option>京都府</option> <option>奈良県</option> <option>兵庫県</option> </optgroup> </select> Top ↑ Top ↑ Top ↑ Top ↑ <form>で囲まれたフォームの入力部品をグループ化します。<legend>でグループのタ イトルを記述することができます。グループ化することで、フォーム部品が多い場合などに 見やすくなるのと、非視覚系ブラウザ（音声ブラウザ）などのアクセシビリティに役立ちま す。 視覚的にはタイトル付き角丸ボックス表示（IEの場合）になるので、他の表示にも応用 できそうですが、本来のフォームのグループ化以外には使用しないようにしましょう。非視 覚系ブラウザなどでは、混乱することになります。フォーム以外に用いる場合は、スタイル シート CSS を使いましょう。こちらの CSS 応用例を参照してください。 【 表示例 】 Internet Explorer6 Internet Explorer7 Mozilla Firefox2 Opera9x 送信 【 表示例 】 東京都 <fieldset> <fieldset> <fieldset> <fieldset> フォームフォームフォームのフォームののグループのグループグループグループ化化化化
<form method="POST" action="xyz.cgi"> <fieldset>
<legend>申込者</legend>
お名前：<input type="text" name="name1" size="20"> 電話番号：<input type="text" name="tel1" size="20"><br>
【 表示例 】 多くのフォーム部品で構成された入力フォームで 入力した後、最後に「実行」ボタンや、「リセット」ボタ ンを押して CGI スクリプトに送信する前に、 JavaScript を使用して簡単に右図のような確認ダイ アログを表示することができます。 特に「リセット」ボタンの場合、誤って消去してしまう と再入力する気力をなくし、いらだったりする要因になります。そのような操作ミスの可能 性を減らすことができます。あるいは、リセットボタンは特別に必要性がないかぎり設置し ないほうがよいかもしれません。 実行ボタンの場合は、通常 CGI スクリプトのほうで確認メッセージが入るでしょうから、 ここで表示すると、「うっとうしい」と嫌がられるかもしれませんが・・・。
JavaScript の onsubmit 属性や、onreset 属性を使って下記のようにします。 お名前 ： 電話番号 ： ご住所 ： 申込者 お名前 ： 電話番号 ： ご住所 ： お届け先 送信する リセット フォーム フォーム フォーム フォーム上上上上のののの実実行実実行行行、、、、リセットリセットリセットリセット操作操作の操作操作ののの前前前に前ににに確認確認ダイアログ確認確認ダイアログダイアログダイアログをををを表示表示表示表示 お名前 ： 電話番号 ： ご住所 ： 【 表示例 】
ご住所：<input type="text" name="address1" size="60"> </fieldset>
<fieldset>
<legend>お届け先</legend>
お名前：<input type="text" name="name2" size="20"> 電話番号：<input type="text" name="tel2" size="20"><br> ご住所：<input type="text" name="address2" size="60"> </fieldset>
<input type="submit" value="送信する"> <input type="reset" value="リセット"> </form>
<form method="POST" action="xyz.cgi"
onsubmit="if( !confirm('本当に送信していいですか？')) return false;" onreset ="if( !confirm('本当に消去していいですか？')) return false;"> <input ～（省略）>
<input type="submit" value="送信する"> <input type="reset" value="リセット"> </form>
Next >>スタイルシートスタイルシートスタイルシートスタイルシートCSSCSSCSSCSSのののの基礎基礎基礎基礎 >>Top↑Top↑Top↑Top↑
送信する リセット
HOME HPビルダー HTML/CSS CGI/Perl ez-HTML WebDesign Link SiteMap
