普通、フォームといえば紙でできたものを連想します。現代社会では必ず何らかのフォームに書き込まなければならないことがあります。
ローンの申込書や国勢調査、コンテストの投票用紙、他の図書館から本を借りるためのリクエストなど、ほとんどの人は今までにフォームに書き込む必要に直面した経験があるはずです。
Web上でもフォームはいろいろな目的に使われます。調査、オンライン注文書、フィードバック、データベース検索、その他ユーザの入力が必要なあらゆる機能に用いられます。Webサーフィンをしていると、自分でも気がつかないうちにフォームを使っているということもありがちです。
Yahoo! や Google といったサーチエンジンを使ったことのある方なら、検索をする時に、キーワードを入力するという標準的なHTMLフォームを使ったことがあるはずです。
フォームのような対話的エレメントが使えなければ、World Wide Webは、一方通行の通信しかできない、読むだけのメディアになってしまいます。つまりフォームはWebの対話性にとって鍵となっているわけです。
text、textarea ---
テキスト入力欄radio ---
ラジオボタンcheckbox ---
チェックボックスselect、option ---
メニュー選択リストsubmit、reset ---
送信、リセットボタン 要素名 | 属性 | 機能 |
---|---|---|
form | action | データを処理するプログラムの URIを指定する |
enctype | 送信する際のデータの MIMEタイプを指定する | |
method | データの送信方法の指定
| |
name | スクリプトなどから参照することができるように設定する 古いブラウザの互換性のために残されている。正しくは id属性を使用する | |
input | type | input要素の形式を指定する
|
name | 入力フィールドに名前を付けデータと共に送信 | |
value | type属性によって働きが変わる
| |
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
文はこちらに用意しました。 サンプルHTMLenctype="text/plain"
を設定しても HTML
では定義されておらず、ユーザのブラウザ環境によってはデータの送信ができない場合もあります。そのためには CGI を使って、メール送信させるのが一般的です。sendmail
をサポートしているかどうかはプロバイダによります。