<form method=""></form>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ（ただし、form要素は含められない）

form要素に method="" を追加すると、フォームの送信方法を指定することができます。


<form method="post" action="example.cgi"></form>
属性 値
任意属性
method="" フォームの送信方法 get URLの形式でデータを送信（既定値）
post 本文としてデータを送信
dialog 祖先のdialog要素を閉じる
  • 値の dialog は、form要素がdialog要素の中に置かれている場合に指定することができます。

postとgetについて

通常、method属性には post または get を指定します。これは、フォームを送信する際のHTTPメソッドを指定するもので、用途に合わせてどちらかを指定することになります。（この指定を省略した場合は get が使用されます）

POST方式

フォームのデータをHTTPリクエストの本文として送信します。（一度に大量のデータを送信することができます）

<form method="post" action="example.cgi">

</form>
GET方式

フォームのデータをURLの末尾に追加して送信します。（送信できるデータ量には制限があります）

<form method="get" action="example.cgi">

</form>

例えば次のような感じで送信されます。

https://www.example.com/demo.cgi?name=Taro&age=17

メールフォームなどの一般的なフォームでは、POST方式がよく使用されています。また、検索エンジンのフォームではGET方式が使用されているようです。

dialogについて

HTML5.2以降では、method属性の値に dialog を指定できるようになりました。

この値を指定すると、フォームの送信ボタンが押された際に、祖先のdialog要素が閉じるようになります。

次の例では、確定ボタンを押すとダイアログが閉じられます。

<dialog id="example">

<form method="dialog">
<p>ここにフォーム部品を配置</p>
<p><button type="submit">確定</button></p>
</form>

</dialog>
  • この値を指定する場合は、form要素をdialog要素の中に配置する必要があります。
  • この値は、送信時のHTTPメソッドを指定するものではなく、ダイアログを閉じる目的で使用するものになります。（ページの移動は行われません）
  • ダイアログの表示には、dialog要素の他にJavaScriptが必要となります。（詳細についてはdialog要素のページをご覧ください）

使用例

POST方式で送信する場合

<form method="post" action="formmail.cgi">

<p>お名前：<input type="text" name="name" size="30"></p>

<p>メッセージ：<br>
<textarea name="message" cols="30" rows="5"></textarea></p>

<p><input type="submit" value="送信する"></p>

</form>
表示例

お名前：

メッセージ：

  • サンプルのため送信できません。
dialogを指定した例

<p><button type="button" id="openButton">ダイアログを表示</button></p>

<dialog id="exDialog">

<h4>ダイアログ</h4>

<form method="dialog">
<p>ボタンを押すとダイアログが閉じます</p>
<p><button type="submit">閉じる</button></p>
</form>

</dialog>


<script>

var openButton = document.getElementById('openButton');
var exDialog = document.getElementById('exDialog');

openButton.addEventListener('click', function() {

    exDialog.showModal();

    // showModal() = モーダルダイアログ（周囲の領域は操作不能）
    // show() = モードレスダイアログ（周囲の領域も操作可能）

});

</script>
表示例

ダイアログ

ボタンを押すとダイアログが閉じます
  • 未対応のブラウザでは機能しません。