Form action: создание, отправка и обработка формы

Form action – это атрибут тега <form>, который определяет, куда должна быть отправлена информация, введенная пользователем при отправке формы. Этот атрибут указывает URL-адрес, на который должен быть отправлен HTTP-запрос после нажатия пользователем кнопки отправки формы.

Форма – это важный элемент веб-страницы, который позволяет пользователю взаимодействовать с сайтом, отправлять данные и получать обратную связь от сервера. Зачастую формы используются для регистрации пользователей, отправки сообщений, поиска информации и других подобных задач.

Лучший способ понять, как работает атрибут form action, – это показать примеры кода.

Пример 1: Код формы с указанием атрибута form action внутри HTML-документа:

<!DOCTYPE html>
<html>
<head>
<title>Пример формы с атрибутом form action</title>
</head>
<body>

<h2>Регистрационная форма</h2>

<form method="post" action="process.php">
  <label for="name">Имя:</label><br>
  <input type="text" id="name" name="name" required><br><br>
  <label for="email">E-mail:</label><br>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="Отправить">
</form>

</body>
</html>

В этом примере мы создали форму регистрации с двумя полями ввода (имя и электронная почта). Атрибут form action указывает, что данные, введенные пользователем, должны быть отправлены на обработку скрипту process.php.

Пример 2: Код формы с атрибутом form action, указывающим на внешний URL-адрес:

<!DOCTYPE html>
<html>
<head>
<title>Пример формы с атрибутом form action на внешний URL-адрес</title>
</head>
<body>

<h2>Поиск информации</h2>

<form method="get" action="https://www.google.com/search">
  <input type="text" name="q" required>
  <input type="submit" value="Поиск">
</form>

</body>
</html>

В этом примере мы создали форму для поиска информации. Атрибут form action указывает URL-адрес Google, таким образом, по нажатию кнопки отправки, поисковый запрос будет отправлен на сервер Google для обработки.

Пример 3: Код формы с AJAX-запросом и обработкой результата с помощью JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>Пример формы с атрибутом form action и AJAX-запросом</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("form").submit(function(event){
    event.preventDefault();
    
    var name = $("#name").val();
    var email = $("#email").val();
    
    $.post("process.php", { name: name, email: email }, function(data){
      // обработка ответа от сервера
      $("#result").html(data);
    });
  });
});
</script>
</head>
<body>

<h2>Регистрационная форма с AJAX-запросом</h2>

<form>
  <label for="name">Имя:</label><br>
  <input type="text" id="name" name="name" required><br><br>
  <label for="email">E-mail:</label><br>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="Отправить">
</form>

<div id="result"></div>

</body>
</html>

В этом примере мы использовали библиотеку jQuery для отправки данных формы на сервер без перезагрузки страницы. AJAX-запрос отправляет данные на серверный скрипт process.php, который выполняет обработку данных и возвращает результат. Результат выводится на странице в элементе с идентификатором "result".

Form action: создание, отправка и обработка формы

Похожие вопросы на: "form action "