Sep.16th, 2020
＃
“formmethod”属性について
“formmethod”属性は“type="submit"”もしくは“type="image"”を指定した“input”要素でフォームを送信したときにブラウザが使用するHTTPメソッドを指定します。
値に“dialog”を指定した場合、フォームを送信したときに“form”要素が含まれる“dialog”要素を閉じます。入力内容はサーバーには送信されず、スクリプトの“returnValue”プロパティに渡されます。
多くの場合、フォームを送信するHTTPメソッドは“form”要素の“method”属性で指定されますが、“input”要素に“formmethod”属性を指定した場合はボタンごとにHTTPメソッドを指定することができます。
“form”要素に“method”属性が指定されている場合は“formmethod”属性の値が優先されます。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| get | 入力されたデータを“action”属性で指定したURLにクエリ文字列として付加して送信 |
| post | 入力されたデータをHTTPリクエストの本文として送信 |
dialog |
フォームの送信時に“form”要素が含まれる“dialog”要素を閉じる |
＃
サンプルコード
“GET”方式
<form 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" formmethod="get" value="検索"></p>
</form>
“POP”方式
<form 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" formmethod="pop" value="登録"></p>
</form>
ダイアログボックスを閉じる
<p><button type="button" id="dialogopen">選択する</button></p>
<p><output id="result"></output></p>
<dialog id="sampledialog">
<form>
<fieldset>
<legend>好きな猫を選んでください：</legend>
<p>
<input type="submit" value="キャンセル" formmethod="dialog">
<input type="submit" value="鮪" formmethod="dialog">
<input type="submit" value="鰹" formmethod="dialog">
<input type="submit" value="鮭" formmethod="dialog">
<input type="submit" value="鯵" formmethod="dialog">
<input type="submit" value="鮫" formmethod="dialog">
</p>
</fieldset>
</form>
</dialog>
<script>
var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
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>
