Sep.14th, 2020
＃
“formmethod”属性について
“formmethod”属性は“type="submit"”を指定した“button”要素でフォームを送信したときにブラウザが使用するHTTPメソッドを指定します。
値に“dialog”を指定した場合、フォームを送信したときに“form”要素が含まれる“dialog”要素を閉じます。入力内容はサーバーには送信されず、スクリプトの“returnValue”プロパティに渡されます。
多くの場合、フォームを送信するHTTPメソッドは“form”要素の“method”属性で指定されますが、“button”要素に“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>
<button type="submit" formmethod="get">検索</button>
<button type="reset">リセット</button>
</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>
<button type="submit" formmethod="pop">登録</button>
<button type="reset">リセット</button>
</p>
</form>
ダイアログボックスを閉じる
<dialog id="sampledialog">
<form>
<p>
<label>
好きな魚:
<select id="fish" required>
<option value="">--選択--</option>
<option value="鮪">鮪</option>
<option value="鰹">鰹</option>
<option value="鮭">鮭</option>
<option value="鯵">鯵</option>
<option value="鮫">鮫</option>
</select>
</label>
</p>
<p>
<button type="submit" value="キャンセル" formmethod="dialog" formnovalidate>キャンセル</button>
<button type="submit" value="" id="confirm" formmethod="dialog">確定</button>
</p>
</form>
</dialog>
<p><button type="button" id="dialogopen">選択する</button></p>
<p><output id="result"></output></p>
<script>
var dialogopen = document.getElementById('dialogopen');
var sampledialog = document.getElementById('sampledialog');
var outputBox = document.getElementById('result');
var selected = document.getElementById('fish');
var confirm = document.getElementById('confirm');
dialogopen.addEventListener('click', function onOpen() {
if (typeof sampledialog.showModal === "function") {
sampledialog.showModal();
} else {
alert("Error");
}
});
selected.addEventListener('change', function onSelect(e) {
confirm.value = selected.value;
});
sampledialog.addEventListener('close', function onClose() {
outputBox.value = sampledialog.returnValue + "を選択しました。";
});
</script>
