May 11th,2016
＃
“method”属性について
“method”属性はフォームの送信時のにブラウザが使用するHTTPメソッドを指定します。
値に“dialog”を指定した場合、フォームを送信したときに“form”要素が含まれる“dialog”要素を閉じます。入力内容はサーバーには送信されず、スクリプトの“returnValue”プロパティに渡されます。
“method”属性を省略した場合の既定値は“GET”方式で送信する“get”です。
フォームの送信ボタンとなる“button”要素や“input”要素に“formmethod”属性が指定されている場合は“formmethod”属性が優先されます。
＃
HTTPメソッド
フォームの入力内容を送信するためのHTTPメソッドは“GET”方式(“get”)と“POST”方式(“post”)の2種類です。
- “GET”方式
- フォームに入力されたデータは“action”属性で指定したURLの末尾にURLエンコードした状態で付加されて送信されます。
- ウェブページを検索する場面など、フォームを送信した結果何らかの情報を取得するために使用します。
- 大容量のデータの送信にはURLが長大になるため向かず、サーバーやブラウザによっては字数が制限される場合があります。また、送信した内容(URL)がブラウザのアドレスバーや履歴、サーバーのログなどに残るためパスワードなどの秘匿されるべき情報を含む送信には不適切です。
- “POST”方式
- 入力されたデータをHTTPリクエストの本文として送信します。
- 掲示板への投稿やデータベースへ登録する場面など、フォームを送信した結果送信先のプログラムが内容の書き換えを行うときに使用します。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| get | 入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信 |
| post | 入力されたデータをHTTPリクエストの本文として送信 |
dialog |
フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる |
＃
サンプルコード
“GET”方式
<form method="get" action="sample-formtag5.php" target="_blank">
<fieldset>
<legend>猫を探す</legend>
<p>
<label><input type="radio" name="type" value="品種">品種</label>
<label><input type="radio" name="type" value="色">色</label>
<label><input type="radio" name="type" value="名前">名前</label>
</p>
<p><label>キーワード：<input type="search" name="query"></label></p>
</fieldset>
<p><input type="submit" value="検索する"></p>
</form>
“POST”方式
<form method="post" action="sample-formtag3.php" target="_blank">
<fieldset>
<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="name"></label></p>
<p>
<label>色：
<select name="color">
<option value="">--選択--</option>
<option value="白">白</option>
<option value="黒">黒</option>
<option value="白黒">白黒</option>
<option value="キジトラ">キジトラ</option>
<option value="茶トラ">茶トラ</option>
<option value="三毛">三毛</option>
<option value="その他">その他</option>
</select>
</label>
</p>
</fieldset>
<p><input type="submit" value="登録する"></p>
</form>
ダイアログボックスを閉じる
<p><button type="button" id="dialogopen">開く</button></p>
<p><output id="result"></output></p>
<dialog id="sampledialog">
<form method="dialog" id="agreement">
<p>
猫は尊い。
</p>
<p>
<button type="submit" value="同意しない">同意しない</button>
<button type="submit" value="同意する" autofocus>同意する</button>
</p>
</form>
</dialog>
<script>
var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
var selected = document.getElementById('agreement');
dialogopen.addEventListener('click', function onOpen() {
if (typeof sampledialog.showModal === "function") {
sampledialog.showModal();
} else {
alert("Error");
}
});
sampledialog.addEventListener('close', function onClose() {
outputBox.value = sampledialog.returnValue + "を選択しました。";
});
</script>
