HTML入力フォーム

カスタム検索

HTML入力フォーム

WebブラウザにHTMLファイルを表示させる通常の「静的なページ」に対し、メールフォーム、掲示板、ブログなどのようにWebブラウザから入力された要求に対して Webサーバ側でプログラムを呼び出し処理した結果を返すしくみを、CGI （Common Gateway Interface ）といいます。このようなページを、「動的なページ」といいます。

この動的なページには、サーバ側でPerl、PHPやC言語などのプログラムが使われたり、JavaScript のようにブラウザ側で処理します。このとき WebサーバのCGI プログラムに渡すパラメータは、テキストボックスやチェックボックスなどのフォーム部品で指定します。これらのデータを入力するためのユーザインターフェース部分を、HTMLでは<form>要素で記述します。

`form` 要素の構造

form 要素は、<form>～</form>で一つの入力フォームを形成します。フォームの中には <input>、<select>、<textarea> などのフォーム部品を配置して通常、一つのサブミット（実行）ボタンを持ちます。各入力部品に値を入力した後、サブミットボタンを押すと method 属性で指定した転送方法で、action 属性で指定したアクション（転送先 URI ）を呼び出します。

method 属性値はデータの送信方法により、get と post の二種類があります。これらはそれぞれ HTTP 要求メソッドの GET と POST に対応しています。

<form method="POST" action="URI"> ～ </form>

【表示例】

【記述例】

<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>

GET と POST

HTTP メソッドの GETと POSTは、データの送信方法が異なります。GETは action 属性に指定した URI に ? をつけ、その後にデータをつけて URI として送られます。それを受け取ったサーバは、 ? 以降を環境変数に入れて CGI プログラムに渡します。送信できる情報量には制限があります。

POSTは、URI の一部ではなく独立した本文として送られます。セキュリティの面でも有利な POST が、Web ページの入力フォームにはよく使われます。

Top ↑

`<input>`フォーム部品

フォーム<form>内のテキスト入力や実行ボタンなどの各フォーム部品を表示します。
下記の type 属性の値によって見栄えも動作も異なる部品となります。

【`type` 属性】

text: 一行テキストの入力を行なうフィールド
password: パスワードの入力フィールド
file: ファイルをアップロードするためのファイル入力フィールド
checkbox: チェックボックスで複数項目の選択
radio: ラジオボタンで一つの項目の選択
submit: 実行ボタンを形成して action 指定の URI にフォームデータを渡す
reset: 取消ボタンを形成してフィールド内すべてをデフォルト値にリセット
button: 汎用ボタンを形成してスクリプトを起動
hidden: 表示させないで、サーバ側にコントロールデータを渡す

【属性】

name: フィールドのデータ名で submit と reset 以外すべてのタイプに必要
value: スクリプトに渡される値で submit、reset はボタン名として表示
checked: 選択フォーム checkbox、radio の選択された初期値
size: text や password フィールドの長さを文字数で指定。初期値は20

以下、<input>フォーム部品の記述例と、表示例を示します。実行、送信ボタンはサンプルなのでできません。

`type="text"` ・・・一行テキスト入力フィールド

【記述例】


名前 <input type="text" value="日本太郎">

【表示例】名前

一般的な、「一行テキスト」を入力するフィールドです。フィールドの長さは size で半角英数字の文字数を指定します。デフォルト値は 20 文字です。

`type="password"`　・・・パスワード入力フィールド

【記述例】


パスワード <input type="password" name="pass" value="abcde">

【表示例】パスワード

他人にパスワードを見られないように、入力文字はすべてアスタリスク「＊」、または「●」で表示されます。 name 属性は通常、半角英数字にします。

`type="file"`　・・・ファイル名入力フィールド

【記述例】


ファイル名<input type="file" name="upfile">

【表示例】ファイル名

ブラウザからサーバーに、ファイルをアップロードする際に用います。入力フィールドの横には「参照」ボタンが表示されます。サーバー側には、ファイルを受け取るためのCGIスクリプトなどを設置しておく必要があります。セキュリティ上、初期値を設定したり、スクリプトで値を操作することはできません。

`type="checkbox"`　・・・チェックボックス

【記述例】


<input type="checkbox" name="hobby" value="映画" checked> 映画
<input type="checkbox" name="hobby" value="旅行"> 旅行
<input type="checkbox" name="hobby" value="テニス"> テニス

【表示例】映画旅行テニス

オン・オフの値を持つチェックボックスを表示します。複数項目を選択できます。通常、どれかのボックスに checked をいれて選択状態にしておきます。

Top ↑

`type="radio"`　・・・ラジオボタン

【記述例】


<input type="radio" name="color" value="赤" checked>赤
<input type="radio" name="color"> value="青">青
<input type="radio" name="color"> value="黄">黄

【表示例】赤青黄

同じ name 属性をもつラジオボタンで、１つのラジオボタングループを形成します。複数の中でどれかひとつしかチェックできない点がチェックボックスと異なります。これもどれかのボタンに checked をいれてデフォルト値を選択状態にしておきます。

`type="submit"`　・・・実行ボタン

【記述例】


<input type="submit" value="実行">

【表示例】

このボタンを押すと、<form> タグの action 属性で指定したアクションが呼び出されます。

`type="reset"`　・・・取消ボタン

【記述例】


<input type="reset" value="取消">

【表示例】

このボタンを押すと、それまでに入力した情報をすべてキャンセルして、最初から入力をやり直すことができます。

`type="button"`　・・・汎用ボタン

【記述例】


<input type="button" value="Click !">

【表示例】

<input type="button" onclick="...">のようにボタンをクリックしたとき、JavaScript などを起動する際によく用いられます。

`button 要素`

button 要素は、type 属性により input 要素の button：汎用ボタン、submit：実行ボタン、reset：リセットボタンと同様のボタンを作成します。 form 要素内に配置してフォーム部品とするほか、フォーム以外のJavaScript でも利用できます。

【表示例】

【記述例】

<button type="button">クリック</button>

`type="hidden"`　・・・隠しフィールド

【記述例】

入力必須項目（メールアドレス、メッセージ）をCGIプログラムに指定する例

<input type="hidden" name="need" value="email メッセージ">
<input type="submit" value="送信">

【表示例】

実行ボタンが押されても、画面上には表示されません。ユーザが知る必要のないコントロールデータを CGI プログラムに送信する場合などに使用します。

Top ↑

`<textarea>`フォーム部品：テキストエリア

【表示例】

【記述例】

<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属性のほかに、入力エリアの横幅を示す列数（文字数）の cols 属性と、高さを示す行数のrows 属性を指定します。（必須）

`<select>`セレクト部品

<select> は、<form> で作成されるフォーム内の選択部品（セレクトボックス）を表示します。 size 属性で、画面に一度に表示する選択肢の行数を指定します。それぞれの選択肢を記述するには <option> を用います。どれかに selected を入れてデフォルト値を選択状態にします。

プルダウン式で表示する場合

size 属性指定しないデフォルト値（size=1）で、プルダウンメニュー表示します。

【表示例】

【記述例】

<form action="xxx.cgi">
<select name="OS">
<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 要素で選択肢の 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 ↑

`<fieldset>` フォームのグループ化

<form>で囲まれたフォームの入力部品をグループ化します。<legend>でグループのタイトルを記述することができます。グループ化することで、フォーム部品が多い場合などに見やすくなるのと、非視覚系ブラウザ（音声ブラウザ）などのアクセシビリティに役立ちます。

視覚的にはタイトル付き角丸ボックス表示（IEの場合）になるので、他の表示にも応用できそうですが、本来のフォームのグループ化以外には使用しないようにしましょう。非視覚系ブラウザなどでは、混乱することになります。フォーム以外に用いる場合は、スタイルシート CSS を使いましょう。こちらの CSS 応用例を参照してください。

【記述例】


<form method="POST" action="xyz.cgi"> 
<fieldset> 
<legend>申込者</legend> 
お名前：<input type="text" name="name1" size="20">
電話番号：<input type="text" name="tel1" size="20"><br> 
ご住所：<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>

【表示例】

フォーム上の実行、リセット操作の前に確認ダイアログを表示

確認ダイアログ

多くのフォーム部品で構成された入力フォームで入力した後、最後に「実行」ボタンや、「リセット」ボタンを押して CGI スクリプトに送信する前に、 JavaScript を使用して簡単に右図のような確認ダイアログを表示することができます。

特に「リセット」ボタンの場合、誤って消去してしまうと再入力する気力をなくし、いらだったりする要因になります。そのような操作ミスの可能性を減らすことができます。あるいは、リセットボタンは特別に必要性がないかぎり設置しないほうがよいかもしれません。

実行ボタンの場合は、通常 CGI スクリプトのほうで確認メッセージが入るでしょうから、ここで表示すると、「うっとうしい」と嫌がられるかもしれませんが・・・。

JavaScript の onsubmit 属性や、onreset 属性を使って下記のようにします。

【記述例】


<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 >>スタイルシートCSSの基礎 >>Top↑

ホームページ作成 Note