フォームの作成

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

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

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

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

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

フォーム
フォームはHTML仕様の1部に組み込まれており簡単に作成できます。
これらを「構成部品」、または「入力フィールド」と呼びます。当講座ではフォームに関わる入力用のコントロール部品をを入力フィールドと呼びます。
以下の表は、フォームを構成するために利用する要素と属性です。
フォームを構成する要素と属性
要素名 属性 機能
form action データを処理するプログラムの URIを指定する
enctype 送信する際のデータの MIMEタイプを指定する
method データの送信方法の指定
  • get --- URIとフォームのデータをセットで送信
  • post -- フォームデータのみ送信
name スクリプトなどから参照することができるように設定する
古いブラウザの互換性のために残されている。正しくは id属性を使用する
input type input要素の形式を指定する
  • text 1行のテキスト入力フィールド
  • 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

任意の1文字をショートカットキーを割り当てる

(利用方法はブラウザや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 この選択肢が選択されたときに、サーバに送信される値を指定
selected 選択肢をあらかじめ選択された状態で表示させる
textarea name 入力フィールドに名前を付け、データと共に送信
cols 入力フィールドの表示幅を設定

ただし、文字数が制限されるわけではない

rows 入力フィールドの行数を設定

ただし、文字数が制限されるわけではない

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

お問い合わせ

性別: 男性 女性
職業: 学生 会社員 公務員 その他

年代:

サンプルのため、送信ボタンを押しても何も送信されません。念のため。参考までに上記フォームの HTML文はこちらに用意しました。 サンプルHTML
メールフォームの注意点とCGI
上記フォームにて問合せ内容を送信しても、メーラーで確実に読める保証はありません。つまり、enctype="text/plain" を設定しても HTMLでは定義されておらず、ユーザのブラウザ環境によってはデータの送信ができない場合もあります。そのためには CGI を使って、メール送信させるのが一般的です。
ただし、 CGI を初心者が新たにそのプログラムを作ることは非常に困難です。詳しくは、CGI入門 のページを参考にしてください。
初心者が CGI を設置する場合、ご自分の契約しているプロバイダ、あるいはサーバが CGI の設置を許可しているかどうかを調べる必要があります。ほとんどのプロバイダやレンタルサーバでは独自の CGI を用意しているので、最初はそれを使うようにしましょう。ただし、メールフォームである sendmail をサポートしているかどうかはプロバイダによります。
自前の CGIプログラムを許可しているのであれば、Web上にたくさんある CGI 専門のサイトから提供されている無償のプログラムをダウンロードして、自分なりに改造して設置する方法もありますのでお試しください。
(ほとんどのプロバイダでは自前のプログラムを許可していないようです。その場合、無料で利用できる掲示板やメールフォームの CGIページを提供しているサイトを使うのも方法です。)


This Page is HTML4.01 Valid! 初版公開日 2002年9月16日   最新更新日 2002年11月11日
Copyright(C) 2002〜2008 banban