S-JIS[2008-09-04/2008-10-25] 変更履歴

サブミット(submit)

HTMLHTTP)でサーバーに値を送信する方法。

input要素(やtextarea要素など)に入れられた値をサーバーに送信するには、サブミット(submit)する。


form要素のaction・method・enctype

サブミットはフォーム単位で(フォームに対して)行う。

formタグのaction属性に(サーバー向けの)URIを書く。また、method属性で送信方法(POSTGETか)を指定する。

<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>

JavaScriptでフォームオブジェクトを取得する方法


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>

input要素

サブミット対象の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]
(他にも、スペースが「+」に置き換えられたり%付きのコードに置換されたりする)

Javaでパラメーターを取得する際の順序


#

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のポップアップ


HTMLへ戻る / 技術メモへ戻る
メールの送信先:ひしだま