Главная страница  /  Занятия  /  #12  /  html-формы, их валидация и обработка средствами PHP

html-формы, их валидация и обработка средствами PHP

Задание:

Рассказать о структуре html-форм, их валидации и обработке средствами PHP.

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

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>html-формы, их валидация и обработка средствами PHP</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <form action="action.php" method="get">
      <label for="userName">Ваше имя:</label>
      <input type="text" name="userName" id="userName"><br><br>
      <label for="userMessage">Ваше сообщение:</label>
      <textarea name="userMessage" id="userMessage"></textarea><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			{ 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; }

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

   window.onload = function()
   {
    document.forms[0].onsubmit = function()
    {
     if(!document.getElementById('userName').value)
     {
      alert('Укажите ваше имя!');
      document.getElementById('userName').focus();
      return false;
     }
     if(!document.getElementById('userMessage').value)
     {
      alert('Введите ваше сообщение!');
      document.getElementById('userMessage').focus();
      return false;
     }
    };
   };

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

   <?
    echo '<b>Ваше имя:</b><br><br>'.$_GET['userName'].'<br><br>';
    echo '<b>Ваше сообщение:</b><br><br>'.$_GET['userMessage'].'<br><br>';
    echo '<a href="../result/">Вернуться к&nbsp;форме</a>';
   ?>

Результат:

Результат выполнения задания можно посмотреть здесь.