| 文書型 | 適用 | 子要素 | 開始タグ | 終了タグ | 分類 |
|---|---|---|---|---|---|
| Strict | ○ | ブロックレベル要素 script要素(form要素を除く) | 必須 | 必須 | ブロックレベル要素 |
| Transitional | ○ | インライン要素 ブロックレベル要素(form要素を除く) | |||
| Frameset | ○ |
<a href="sample.cgi?var=120">のように記述したリンクにアクセスしても同じ動作をします。大量のデータだと途中までしか送信できないことがあります。application/x-www-form-urlencodedです。フォームにtype="file"となっているinput属性を含むときはmultipart/form-dataにする必要があります。<input type="file">を設置し利用者に画像を送信してもらうとき、accept="image/png,image/jpeg,image/gif"と指定します。利用者が指定された形式以外のファイルを送信しようとしたときに、ブラウザが警告を出すといった動作が期待されます。ボタン、テキストボックス、チェックボックスなどの入力フォームをグループにまとめ、それらに入力されたデータを送信するための要素です。主にCGIプログラムにデータを送信するために使われます。Strict DTDでは子要素にブロック要素しか含むことができないことに注意してください。form要素直下にボタンやテキストボックスを配置することはできません。(Transitional DTDなら可能です。)
action属性に送信されたデータを処理するプログラムのURIを記述します。form要素にはaction属性が必ず必要です。一般に、送信されたデータをサーバ側のプログラムが処理し、その結果をクライアント側に返します。
method属性にはフォームのデータを送信するときに、どのHTTPメソッドを使うかを指定します。省略時の値は「get」ですが、大量のデータを送信しようとしたときに、内容が途中で途切れてしまう可能性があることに注意してください。「post」ならその心配はありません。
form要素の子要素に<input type="file">を含む時は、enctype="multipart/form-data"を指定する必要があります。
<form action="sample.cgi" method="get">
<p>
<label>名前：<input type="text" name="name"></label><br>
<label>E-mail：<input type="text" name="mail"></label><br>
<label>本文：<br><textarea rows="10" cols="30" name="body"></textarea></label><br>
<input type="submit" value="送信">
</p>
</form>フォームのデータは次のような手順で送信されます。
最初に、どのフォームの部品のデータを送信するかを決定します。名前と値を両方持つものがデータとして送信されます。
次のような部品のデータは送信されません。
上の手順で判定されたフォームの部品を、名前と値のペアの組にします。
form要素のenctype属性の値に従って、フォームデータをエンコードします。
enctype="application/x-www-form-urlencoded"enctype="multipart/form-data"エンコードされたデータをform要素のaction属性が示すURIへ送信します。method属性の値により、送信方法が異なります。
method="get"GET /program.cgi?name1=value1&name2=value2 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.example.com/method="post"POST /program.cgi HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://www.example.com/
Content-Type: application/x-www-form-urlencoded
Content-Length: 25
name1=value1&name2=value2action属性に「mailto:メールアドレス」とメールアドレスを指定することもできます。一般的なブラウザではOS標準のメールソフトが起動し、あて先(To:)の欄にaction属性で指定されたメールアドレスが入力されるようです。action属性のURIのスキームが「http」以外のときの動作は仕様書では未定義とされていますので、必ずしもこのとおりに動作するとは限りません。
<form action="mailto:elastic965@gmail.com?subject=MAIL%20TEST"
method="post" enctype="text/plain">
<p>
本文：<br>
<textarea rows="5" cols="40" name="message"></textarea><br>
<input type="submit" value="送信">
</p>
</form><!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
<!ATTLIST FORM
%attrs; -- %coreattrs, %i18n, %events --
action %URI; #REQUIRED -- server-side form handler --
method (GET|POST) GET -- HTTP method used to submit the form--
enctype %ContentType; "application/x-www-form-urlencoded"
accept %ContentTypes; #IMPLIED -- list of MIME types for file upload --
name CDATA #IMPLIED -- name of form for scripting --
onsubmit %Script; #IMPLIED -- the form was submitted --
onreset %Script; #IMPLIED -- the form was reset --
accept-charset %Charsets; #IMPLIED -- list of supported charsets --
>