Как работает действие формы (form action)

Веб-формы являются неотъемлемой частью любого веб-сайта. Они позволяют пользователям взаимодействовать с сайтом, отправлять данные и получать результаты. Важной составляющей форм является атрибут action, который определяет, куда данные будут отправляться после нажатия кнопки «Отправить». В этой статье мы рассмотрим основные принципы работы атрибута action и рассмотрим несколько примеров его использования.

Атрибут action может содержать URL, к которому будет отправляться запрос после отправки формы. Это может быть отноcительный или абсолютный URL. Если в значении атрибута action указан относительный URL, браузер будет обращаться к текущей директории, а затем добавлять относительный URL. Если значение action начинается с символа «/», браузер будет обращаться к корневой директории сайта.

Кроме URL, в атрибуте action можно указать специальные протоколы обработки формы, такие как «mailto» для отправки результатов на электронную почту, или «tel» для звонка на указанный номер. Также, в качестве значения атрибута action можно использовать язык JavaScript, чтобы обрабатывать форму на стороне клиента.

Принцип работы form action

Принцип работы form action заключается в следующих шагах:

1. Пользователь заполняет поля ввода формы данными.
2. При нажатии на кнопку отправки формы данные из полей ввода собираются в специальный объект формы (Form Data).
3. Затем эти данные отправляются на сервер по указанному в атрибуте form action адресу с использованием одного из методов передачи данных: GET или POST.
4. На стороне сервера информация из формы обрабатывается и, при необходимости, отправляется ответ обратно пользователю.

Пример использования form action:

<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<input type="submit" value="Submit">
</form>

В этом примере атрибут form action указывает на адрес «/submit», куда будут отправлены данные формы при ее отправке. Метод передачи данных установлен в «post», что означает, что данные будут отправлены в теле HTTP-запроса.

Основы тега form action

Синтаксис тега <form action> выглядит следующим образом:

<form action="URL" method="метод">

</form>

Атрибут action определяет адрес, на который будут отправлены данные формы. Может быть указан как относительный, так и абсолютный URL. Например, action="/submit_form" или action="https://example.com/submit_form".

Атрибут method определяет метод HTTP, который будет использоваться при отправке данных. Обычно, наиболее часто используемыми методами являются GET и POST. Метод GET отправляет данные в URL-строке запроса, а метод POST отправляет данные в теле HTTP-запроса.

Ниже приведен пример использования тега <form action> с методом POST:

<form action="/submit_form" method="POST">
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username">
<button type="submit">Отправить</button>
</form>

В приведенном примере, при отправке формы данные будут отправлены на адрес /submit_form методом POST.

Принцип работы form action в HTML

HTML-элемент <form> представляет собой контейнер для элементов формы, таких как поля ввода, кнопки и переключатели. Атрибут action определяет адрес, на который будет отправлен запрос при отправке формы. Данные формы будут переданы на сервер для обработки и дальнейших действий.

Принцип работы form action состоит в следующем:

1. Пользователь заполняет форму на веб-странице, вводя необходимую информацию в поля ввода (такие как текстовые поля, поле ввода email, поле для ввода пароля и т. д.).
2. При нажатии на кнопку <input type=»submit»> или использовании других способов отправки формы (например, нажатие клавиши Enter), браузер создает и отправляет HTTP-запрос на адрес, указанный в атрибуте action.
3. Сервер-получатель получает этот HTTP-запрос и обрабатывает данные формы. Для этого обычно используются серверные скрипты (например, PHP, Python, Ruby и т. д.), которые могут выполнять различные операции с полученными данными.
4. После обработки данных сервер может производить различные действия, такие как сохранение информации в базе данных, отправка уведомлений на почту или перенаправление пользователя на другую страницу.

Пример использования формы с атрибутом action:

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

В данном примере, при отправке формы данные будут отправлены по адресу «/submit» на сервере. Сервер может обрабатывать эти данные, используя свои собственные логику и действия.

Примеры использования form action

Веб-страницы могут использовать элемент form со свойством action для отправки данных на сервер для обработки. Вот несколько примеров использования form action.

Пример 1: Отправка формы на сервер

В этом примере форма с именем «myForm» отправляется на сервер по адресу «http://example.com/form-handler» для обработки данных, которые пользователь ввел в форму:


<form action="http://example.com/form-handler" name="myForm" method="post">
<label for="name"><strong>Имя</strong></label>
<input type="text" id="name" name="name" required><br>
<label for="email"><strong>Email</strong></label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Отправить">
</form>


При нажатии на кнопку «Отправить», данные, введенные пользователем в поля «Имя» и «Email», будут отправлены на сервер.

Пример 2: Отправка формы на ту же страницу

В этом примере форма также отправляется на сервер, но адресу, указанному в свойстве action, не присвоено никакое значение. Это означает, что данные будут отправлены на ту же страницу, на которой находится форма:


<form action="" method="post">
<label for="name"><strong>Имя</strong></label>
<input type="text" id="name" name="name" required><br>
<label for="email"><strong>Email</strong></label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Отправить">
</form>


При нажатии на кнопку «Отправить», данные будут отправлены на сервер, который обрабатывает текущую страницу.

Пример 3: Отправка формы с помощью JavaScript

В этом примере форма отправляется на сервер, используя JavaScript для обработки отправки данных:


<form name="myForm" onsubmit="submitForm(event)">
<label for="name"><strong>Имя</strong></label>
<input type="text" id="name" name="name" required><br>
<label for="email"><strong>Email</strong></label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Отправить">
</form>
<script>
function submitForm(event) {
event.preventDefault();
// Отправка данных на сервер с помощью AJAX или другой технологии
}
</script>


В этом примере при нажатии на кнопку «Отправить» будет вызвана функция submitForm, которая отменила стандартное поведение отправки формы и отправит данные на сервер с помощью AJAX или другой технологии.