フォームの作成/HTML基礎講座

普通、フォームといえば紙でできたものを連想します。現代社会では必ず何らかのフォームに書き込まなければならないことがあります。

ローンの申込書や国勢調査、コンテストの投票用紙、他の図書館から本を借りるためのリクエストなど、ほとんどの人は今までにフォームに書き込む必要に直面した経験があるはずです。

Web上でもフォームはいろいろな目的に使われます。調査、オンライン注文書、フィードバック、データベース検索、その他ユーザの入力が必要なあらゆる機能に用いられます。Webサーフィンをしていると、自分でも気がつかないうちにフォームを使っているということもありがちです。

Yahoo! や Google といったサーチエンジンを使ったことのある方なら、検索をする時に、キーワードを入力するという標準的なHTMLフォームを使ったことがあるはずです。

フォームのような対話的エレメントが使えなければ、World Wide Webは、一方通行の通信しかできない、読むだけのメディアになってしまいます。つまりフォームはWebの対話性にとって鍵となっているわけです。

■ フォーム

フォームはHTML仕様の１部に組み込まれており簡単に作成できます。

text、textarea　 --- テキスト入力欄
radio　　　　　　--- ラジオボタン
checkbox　　　　 --- チェックボックス
select、option　 --- メニュー選択リスト
submit、reset　　--- 送信、リセットボタン

これらを「構成部品」、または「入力フィールド」と呼びます。当講座ではフォームに関わる入力用のコントロール部品をを入力フィールドと呼びます。

以下の表は、フォームを構成するために利用する要素と属性です。

フォームを構成する要素と属性
要素名	属性	機能
form	action	データを処理するプログラムの URIを指定する
	enctype	送信する際のデータの MIMEタイプを指定する
	method	データの送信方法の指定 get --- URIとフォームのデータをセットで送信 post -- フォームデータのみ送信
	name	スクリプトなどから参照することができるように設定する古いブラウザの互換性のために残されている。正しくは id属性を使用する
input	type	input要素の形式を指定する text　１行のテキスト入力フィールド password　パスワード入力用 radio　ラジオボタンの指定 checkbox　チェックボックスの指定 submit　送信ボタン reset　リセット (取消) ボタン button　汎用ボタン image　src属性により指定された画像のボタン file　送信するファイルの選択 hidden　表示させずにサーバーに送信するデータ
	name	入力フィールドに名前を付けデータと共に送信
	value	type属性によって働きが変わる type属性が「text」の場合は入力フィールドに初期値として表示する type属性が「file」の場合は、選択するファイル名を指定する type属性が「submit」「reset」「button」の場合はボタンのラベルとして表示させる文字を設定 type属性が「checkbox」「radio」の場合は選択された値がサーバーに送信される
	size	入力フィールドの幅の設定 type属性が「text」あるいは「password」のときには文字数を、それ以外の値の場合はピクセルで設定する
	tabindex	タブキーを押して入力フィールドの移動順を設定
	accesskey	任意の１文字をショートカットキーを割り当てる (利用方法はブラウザやOSによって異なるが、Windowsであれば「altキー」Macintoshであれば「controlキー」などを一緒に押して利用する。マウスが使えない環境への配慮として利用する)
	maxlengh	type属性が「text」または「password」の場合、入力可能な最大文字数を設定
	checked	type属性が「checkbox」「radio」の場合に、そのボタンが選択されている状態にする
	disabled	入力フィールドに対して選択や変更などの操作ができないようにする場合に設定
	readonly	入力フィールドに対して選択はできるが、変更できないようにする場合に設定
	accept	type属性が「file」の場合に、サーバのプログラムがデータとして処理可能なMIMEタイプを指定
select	name	メニューに名前を設定。この名前とデータが組みになって送信される
	size	リストボックスとして表示させる場合の表示行数を設定 (この属性が設定された場合にはリストボックスとして表示される)
	multiple	メニューからの選択が複数選択できる
	disabled	メニューに対して選択や変更ができないように設定
option	value	この選択肢が選択されたときに、サーバに送信される値を指定
option	selected	選択肢をあらかじめ選択された状態で表示させる
textarea	name	入力フィールドに名前を付け、データと共に送信
	cols	入力フィールドの表示幅を設定ただし、文字数が制限されるわけではない
	rows	入力フィールドの行数を設定ただし、文字数が制限されるわけではない

これらの要素/属性を組み合わせてフォームを作成します。

お問い合わせ

サンプルのため、送信ボタンを押しても何も送信されません。念のため。参考までに上記フォームの HTML文はこちらに用意しました。　サンプルHTML

■ メールフォームの注意点とCGI

上記フォームにて問合せ内容を送信しても、メーラーで確実に読める保証はありません。つまり、enctype="text/plain" を設定しても HTMLでは定義されておらず、ユーザのブラウザ環境によってはデータの送信ができない場合もあります。そのためには CGI を使って、メール送信させるのが一般的です。

ただし、 CGI を初心者が新たにそのプログラムを作ることは非常に困難です。詳しくは、CGI入門 のページを参考にしてください。

初心者が CGI を設置する場合、ご自分の契約しているプロバイダ、あるいはサーバが CGI の設置を許可しているかどうかを調べる必要があります。ほとんどのプロバイダやレンタルサーバでは独自の CGI を用意しているので、最初はそれを使うようにしましょう。ただし、メールフォームである sendmail をサポートしているかどうかはプロバイダによります。

自前の CGIプログラムを許可しているのであれば、Web上にたくさんある CGI 専門のサイトから提供されている無償のプログラムをダウンロードして、自分なりに改造して設置する方法もありますのでお試しください。

（ほとんどのプロバイダでは自前のプログラムを許可していないようです。その場合、無料で利用できる掲示板やメールフォームの CGIページを提供しているサイトを使うのも方法です。）

初版公開日 2002年9月16日最新更新日 2002年11月11日

■ フォームの作成

お問い合わせ