HTMLフォームで結果を同じページに表示する方法

JavaScriptを使用して結果を表示する方法:

<html>
<head>
 <script>
   function displayResult() {
     var form = document.getElementById("myForm");
     var result = document.getElementById("result");
     result.innerHTML = "入力された値: " + form.input.value;
   }
 </script>
</head>
<body>
 <form id="myForm">
   <input type="text" name="input" />
   <input type="button" value="結果表示" onclick="displayResult()" />
 </form>
 <div id="result"></div>
</body>
</html>

上記の例では、JavaScriptを使用してフォームの結果を取得し、指定された場所に表示しています。

PHPを使用して結果を表示する方法:

<html>
<body>
 <?php
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
     $result = $_POST["input"];
     echo "入力された値: " . $result;
   }
 ?>
 <form method="post">
   <input type="text" name="input" />
   <input type="submit" value="結果表示" />
 </form>
</body>
</html>

上記の例では、PHPを使用してフォームの結果を取得し、直接HTML内で表示しています。

AJAXを使用して結果を表示する方法:

<html>
<head>
 <script>
   function displayResult() {
     var form = document.getElementById("myForm");
     var result = document.getElementById("result");
     var xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {
       if (xhr.readyState === 4 && xhr.status === 200) {
         result.innerHTML = "入力された値: " + xhr.responseText;
       }
     };
     xhr.open("POST", "process.php", true);
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send("input=" + form.input.value);
   }
 </script>
</head>
<body>
 <form id="myForm">
   <input type="text" name="input" />
   <input type="button" value="結果表示" onclick="displayResult()" />
 </form>
 <div id="result"></div>
</body>
</html>

上記の例では、AJAXを使用して非同期でフォームの結果を取得し、指定された場所に表示しています。

これらはいくつかの一般的な方法ですが、他にもさまざまな方法があります。どの方法が最適かは、具体的な要件や使用する技術によって異なります。