ywork2020.com

Title

フォームの送信方式を指定する

目次 (INDEX)

methodとは

ここで説明するmethod とはHTML要素の属性です。
method
読み: メソッド
意味: 方法 、方式 、手法

目次に戻る

method属性の概要

この属性は、form要素から送信されるデータの送信方式を設定することができます。

送信方式は「GET」と「POST」のどちらかであり、「GET」は HTTP GET メソッドに相当し、「POST」は HTTP POST メソッドに相当します。

また、送信方式とは異なる「dialog」キーワードを設定することで、送信した時点でダイアログを閉じるメソッドも使用できます。 これはform要素が dialog 要素に包含されている場合に有効です。なお、dialog要素は open属性が付いていないと表面化されません。

目次に戻る

サンプルコードと実行結果: GET と POST

ここではformからデータを他のページに送信するサンプルを用意しました。

仕様は単純にテキストボックスの値を送信して、それを他のページで受信して表示するというものです。 送信されるデータは form 要素内に設置された入力要素の name 属性の値と、 value 属性の値を対にしたものです。

このサンプルの初期設定値で送信すると [ sendData=サンプルテキスト] となります。

GETとPOSTの表面的な違いは、下記の通りです。

  • GET
    送信先ページのURLの後にパラメーターを添付します。「 ?name属性値=value属性値 」の形式でデータが添付されます。 (主に軽量データの送信に使用します。)
  • POST
    送信先ページのURLの後にパラメーターは添付しません。ヘッダー情報とパラメータを含めたボディ情報の両方を送信します。 (主に大容量のデータ転送に使用します。)
サンプルコード: HTML
<body>
	<form method="GET" action="./php-get-and-post-receive.php">
		<p><input type="text" value="サンプルテキスト" name="sendData"></p>
		<p><input type="submit" value="送信"></p>
	</form>
</body>
  • 02: form (method="GET": この例はGETメソッドを使って送信することを意味します。)
  • 03: input type="text" (この要素のname値とvalue値が送信されるデータとなります。)
  • 04: input type="submit" (送信ボタンです。)
  • 補足: (ここではGETとPOSTの違いが理解しやすくするために、送信メソッドの切り替えができるように設定していますが、この属性をシンプルに理解するために掲載していません。)
サンプルコード: php-get-and-post-receive.php

これはPHPの単純なサンプルコードです。GETとPOSTのデータを受信して表示するためのものを別のphpファイルとして作成しています。

<?php
	error_reporting(0);
	$get = $_GET['sendData'];
	if(strlen($get) > 0){
		echo('<output>GETメソッドのデータを受信しました。-> '.$get.'</output>');
	};
	$post = $_POST['sendData'];
	if(strlen($post) > 0){
		echo('<output>POSTメソッドのデータを受信しました。-> '.$post.'</output>');
	};
?>
実行結果:

送信データの設定: name="sendData"

HTTPメソッドの選択:

送信の実行:

送信先のページに移動したら、ブラウザのURLを見てみてください。 GETとPOSTで結果が違うはずです。

目次に戻る

サンプルコードと実行結果: dialog

ここではformを dialog で開いた状態で表示し、送信されたらダイアログを閉じるサンプルを用意しました。

コードの説明については、このページの説明の主旨と異なり、属性の理解の妨げになる可能性もあるので、ここでは割愛させていただきます。

サンプルコード: CSS
<style>
	dialog{
		box-shadow: 5px 5px 5px ##gray;
	}
</style>
サンプルコード: script
<script>
	let elmDialog = document.getElementById("idDialog");
	let elmInText = document.getElementById("idInText");
	let elmInSubmit = document.getElementById("idInSubmit");
	let elmOutput = document.getElementById("idOutput");
	elmInSubmit.addEventListener("click", function(){
		this.value = elmInText.value;
	});
	elmDialog.addEventListener("close", function(){
		elmOutput.innerText = this.returnValue;
	});
</script>
サンプルコード: HTML
<body>
	<dialog open id="idDialog">
		<form action="" method="dialog">
			<p><input type="text" value="サンプルテキスト" id="idInText"></p>
			<p><input type="submit" value="送信" id="idInSubmit"></p>
		</form>
	</dialog>
	<p><output id="idOutput">innerText</output></p>
</body>
実行結果:

データの設定: id="idInText"

送信の実行: id="idInSubmit"

結果の表示: id="idOutput"
innerText

目次に戻る