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>');
};
?>
サンプルコードと実行結果: 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="idOutput"