このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“formmethod”属性HTML5で追加

記事Sep.16th, 2020
フォームを送信時のHTTPメソッドを指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

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リクエストの本文として送信
dialogHTML5.2で追加 フォームの送信時に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>

好きな猫を選んでください:

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク