form要素

Home>HTML>要素リファレンス>form

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

form要素の役割

form要素は、form要素内に配置したパーツ（input要素など）に入力されたデータを、指定したURLに送信することができます。送信した結果はCGIなどで処理をして、インタラクティブな結果表示をさせることができます。

form要素によってプログラムと連動させるためには、CGIの知識も要します。

form要素に設定できる属性

属性名 意味
accept 受付可能なMIMEタイプを指定。
accept-charset 受付可能な文字コードを指定。
action formのデータを送信するURL。cgiファイルなどを指定する。
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右（ltr）と、右から左（rtl）を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
enctype データ送信時のMIMEタイプを指定。
id ID名。CSSを適用するときに使用する。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
method HTTPメソッド。get、postのいずれかで指定。
name フォームの名前。
style スタイルシートを直接記述する。
target actionで指定したurlを開くときの表示先フレーム、ウィンドウ名。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。

form要素の使い方

<form action="xxx.cgi" method="post">
<input type="text" name="data">
<input type="submit" value="submit">
</form>

form要素内には、input要素など、フォームを構成する要素を配置することができます。この例では、input要素でテキストの入力を受けつけ、submitボタンで内容をxxx.cgiに送信します。

accept属性

input要素のtype属性にfileが指定された場合に、送信先のURLのサーバが受け取ることができるMIMEタイプを指定のものに制限します。
例えば掲示板でアップロードできるものを特定のファイル形式のものだけにしたいときなどに使います。
ただし、ほとんどのブラウザでは実装されていないのであまり使いません。

accept-charset属性

action属性に指定したURLのファイルが、データを受け入れる際に使用するエンコードに用いる文字コードを指定します。半角スペースやカンマによって複数指定することができますが、ブラウザによっては対応していないこともあるので、あまり使用しません。

設定できる値

euc-jp 、 utf-8　、　shift_jis　、　iso-2022-jp

enctype属性

method属性にpostが指定されているときに、送信するデータのMIMEタイプを明示します。

application/x-www.form-urlencoded

enctype属性の指定がないときの既定値です。%と英数字で構成されるURLエンコード形式で送信します。

multipart/form-data

添付ファイルを送信する場合に指定します。input要素のtype属性にfileを指定して、ファイルをアップロードする場合には、こちらを指定します。

method属性

getとpostのどちらかを指定します。

get

method="get"

action属性に指定したURLの最後に[　?　]をつけて、その後に記述した文字列を、そのURLに送信します。
また、form要素を使用せずに、リンクのURLに?がついているCGIファイルを指定した場合は、getで渡されます。

getで送信すると、データは環境変数に格納されてCGIの渡されます。

getの場合には、渡せるデータに限度があります。これは、URLや環境変数に指定できる字数に制限があるためです。この制限は、サーバやブラウザによって異なります。

post

method="post"

action属性に指定したURLに、form要素内に配置した要素のデータを渡します。getと違い、postには容量の制限はありません。

関連リンク

よく読まれている記事

UpDate:2010-3-28