input要素(やtextarea要素など)に入れられた値をサーバーに送信するには、サブミット(submit)する。
サブミットはフォーム単位で(フォームに対して)行う。
formタグのaction属性に(サーバー向けの)URIを書く。また、method属性で送信方法(POSTかGETか)を指定する。
<form action="/test/sample.do" method="POST"> 〜 </form>
JavaScriptからもこれらの値をセットすることが出来る。
<form name="form1"> 〜 </form> <script type="text/javascript"> function set_sample() { // フォームオブジェクトに対して値をセットする form1.action = "/test/sample.do"; form1.method = "POST"; } </script>
enctype属性にはどのようなデータをサーバーに送信するかの種類を指定する。[2008-10-25]
デフォルト(省略時)はenctype="application/x-www-form-urlencoded"。
ファイルアップロードの場合はenctype="multipart/form-data"である必要がある。(これはmethod="POST"しか使えない)
→ファイルアップロードのHTMLの記述例
最も基本的なサブミット方法は、サブミットボタンを使うこと。
<form> <input type="submit" value="サブミットボタンでーす"> </form>
他に、JavaScriptからもサブミットすることが出来る。
<form name="form2" action="/test/sample.do" method="POST"> <p><input type="button" value="ボタンからのサブミット" onclick="form2.submit();"></p> <p><a href="javascript:form2.submit()">リンクからのサブミット</a></p> <p><input type="button" value="ボタンからの関数経由でのサブミット" onclick="submit_func();"></p> <p><a href="javascript:submit_func()">リンクからの関数経由でのサブミット</a></p> </form> <script type="text/javascript"> function submit_func() { // フォームオブジェクトに対して値をサブミットを実行する form2.submit(); } </script>
サブミット対象のform内に入っているinput等のエリアの値(value)がサーバーに送られるので、inputタグはform内に書く必要がある。
<form> <input name="text1" type="text" value="abc"> </form>
inputにname(パラメーター名)を付けないと、サーバー側で値を取得することが出来ない。
サブミットボタン(input
type="submit")を押下したことによるサブミットの場合は、そのサブミットボタンに名前が付いていれば、同じように送信される。
その際に送信される値は、やはりvalue、すなわちボタンに表示されている文言。なので判定に使うにはちょっといけてない…。
(なお、他のボタンに名前が付いていても、あくまでクリックされたサブミットボタンだけが送信対象となる)
GETメソッドを指定してサブミットした場合、値はURIの一部(クエリー文字列:query string)としてサーバーに送信される。
本来のURIの末尾に「?」が付き、その後ろに「名前=値」が付加される。複数の名前/値がある場合は「&」区切りで全て指定される。
(その仕様はポスト本体と同じ [2008-10-25])
HTML | サーバーに要求されるURI |
---|---|
<form action="/test.do" method="GET"> <input name="text1" type="text" value="abc"> </form> |
/test.do?text1=abc |
<form action="/test.do" method="GET"> <input name="text1" type="text" value="abc"> <input name="text2" type="text" value="foo"> </form> |
/test.do?text1=abc&text2=foo |
<form action="/test.do" method="GET"> <input name="btn1" type="submit" value="submit_button"> </form> |
/test.do?btn1=submit_button |
POSTメソッドを指定してサブミットした場合、値はHTTPリクエストのボディー部(ポスト本体:post body)にセットされてサーバーに送信される。
したがってURIには値は現れてこない。
URIには現れてこないが、POST本体にはHTML内に書かれた順に「名前=値」が「&」区切りで書かれる。[2008-10-25]
(他にも、スペースが「+」に置き換えられたり%付きのコードに置換されたりする)
aタグのhref属性において、URIに#を付けてHTML内の<a name="名前">の名前を指定すると、その位置に移動する。
formタグのaction属性でも、URIに#を付けておくと、それと同じ動作をする。(メソッドはPOSTでもGETでも可)
<form action="/test/sample.do#zzz"> 〜 </form>
サーバー側に送信されるのは あくまで「/test/sample.do」というURI(GETメソッドの場合は?付きで値も送られる)であり、#で指定された場所に移動するのはブラウザー側の機能なんだろう。
formタグのtarget属性を指定すると、サーバーからの結果を受け取るウィンドウを指定できる。
(aタグのtarget属性と同じ)
<form action="/test/sample.do" target="popup"> 〜 </form>
ただし、この方法だと(新しくウィンドウが開かれる場合の)ウィンドウサイズ等を指定できない。
そうした指定をしたい場合は、JavaScriptのwindow.open()を併用する。→HTMLのポップアップ