Методы передачи данных формы скрипту-обработчику на PHP

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Методы передачи данных формы скрипту-обработчику на PHP</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <form action="action.php" method="get">
      <select>
       <option>GET</option>
       <option>POST</option>
      </select><br><br>
      <input type="text" name="name" value="" placeholder="имя"><br><br>
      <input type="text" name="phone" value="" placeholder="телефон"><br><br>
      <input type="submit" value="Отправить">
      <input type="reset" value="Очистить">
     </form>
    </body>
   
   </html>

CSS–разметка (styles.css):

   form						{ width: 100%; max-width: 500px; box-sizing: border-box; background-color: #f0f0f0; padding: 15px; font-family: Arial, Tahoma, Verdana; font-size: 16px; color: #404040; }
   input[type=text], textarea, select		{ width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; font-family: Arial, Tahoma, Verdana; font-size: 16px; outline: 0; color: #404040; padding: 4px; }
   textarea					{ resize: none; height: 8em; }
   label					{ display: block; margin-bottom: 6px; }
   input[type=submit], input[type=reset]	{ width: 130px; height: 26px; border: 1px solid #a0a0a0; font-size: 16px; background-color: #e0e0e0; color: #404040; outline: 0; }
   input[type=reset]				{ margin-left: 4px; }
   input[type=text]::placeholder		{ color: #d0d0d0; font-size: 14px; }
   input[type=text]:focus::placeholder		{ opacity: 0; }

JS–скрипты (scripts.js):

   window.onload = function()
   {
    document.forms[0].onsubmit = function()
    {
     switch(document.forms[0].elements[0].value)
     {
      case 'GET':
       document.forms[0].method = 'get';
       break;
   
      case 'POST':
       document.forms[0].method = 'post';
       break;
     }
     if(!document.forms[0].elements[1].value)
     {
      alert('Укажите ваше имя!');
      document.forms[0].elements[1].focus();
      return false;
     }
     if(!document.forms[0].elements[2].value)
     {
      alert('Укажите ваш телефон!');
      document.forms[0].elements[2].focus();
      return false;
     }
    };
   };

PHP–скрипты (action.php):

   <?
    $formMethod = $_SERVER['REQUEST_METHOD'];
    switch($formMethod)
    {
     case 'GET':
      $formVariablesArray = $_GET;
      break;
   
     case 'POST':
      $formVariablesArray = $_POST;
      break;
   
     default:
      exit;
    }
   
    echo '<b>Метод:</b><br><br>'.$formMethod.'<br><br><b>Переменные:</b><br><br>';
    foreach($formVariablesArray as $Key => $Value)
    {
     echo $Key.' - '.$Value.'<br>';
    }
    echo '<br><a href="../result/">Вернуться к&nbsp;форме</a>';
   ?>

Методы передачи данных формы скрипту-обработчику на PHP

Задание:

html-документ (index.html):

CSS–разметка (styles.css):

JS–скрипты (scripts.js):

PHP–скрипты (action.php):

Результат: