Как работает form action – Почему HTML форма не отправляется полностью в тот адрес, который указан в action (с готовыми параметрами)?

Атрибут action | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

<form action="URL">...</form>

Значения

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Обязательный атрибут

В HTML4 и XHTML обязателен, в HTML5 не обязателен.

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="handler.php">
  <p>...</p>
 </form> 

 </body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype="text/plain" в теге <form>.

Пример 2

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="mailto:[email protected]" enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form> 

 </body>
</html>

Атрибут action тега | HTML справочник

HTML тег <form>

Значение и применение

Атрибут action (HTML тега <form>) определяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).

Значение атрибута может быть переопределено с помощью атрибута formaction элементов <button>, или <input> относящиxся к форме.

Поддержка браузерами

Синтаксис:

<form action = "URL">

Значения атрибута

ЗначениеОписание
URLОпределяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу). Допускаются как абсолютные, так и относительные URL адреса.

Отличия HTML 4.01 от HTML 5

В HTML 5 атрибут не считается обязательным.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута action HTML тега <button></title>
	</head>
	<body>
		<form action = "somepage.php" novalidate> <!-- указываем адрес, куда отправляется форма и указываем, что проверка данных на корректность, введенных пользователем в форму не производится -->	
			Your phone: <input type = "tel" name = "user-phone"> <!-- определяем элемент управления для ввода телефонного номера -->
			<input type = "submit"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), указали относительный URL адрес, куда она отправляется и логическим атрибутом novalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится. Кроме того, мы разместили элемент управления для ввода телефонного номера и кнопку отправки формы.

Результат нашего примера:

Пример использования атрибута action HTML тега <form>.HTML тег <form>

Атрибут action | HTML | WebReference

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

<form action="<адрес>">...</form>

Значения

В качестве значения принимается полный или относительный путь к серверному файлу.

Значение по умолчанию

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>FORM, атрибут action</title>
 </head>
 <body>
 <form action="handler.php">
  <p>...</p>
 </form> 
 </body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введённую в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype="text/plain" в элементе <form>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>FORM, атрибут action</title>
 </head>
 <body>
 <form action="mailto:[email protected]" enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form> 
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег FORM

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

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Когда форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега INPUT, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.in-sites.ru/home/handler.cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Синтаксис
<form>
...
</form>

Закрывающий тег
Обязателен.

Параметры
action — адрес CGI-программы или документа, которые обрабатывает данные формы.
enctype — MIME-тип информации формы.
method — метод протокола HTTP.
name — имя формы.
target — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Пример 1. Использование тега FORM

html>
body>

<form action="/cgi-bin/handler.cgi">
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br>
<input type=radio name=answer value=a1>Офицерский состав<br>
<input type=radio name=answer value=a2>Операционная система<br>

<input type=radio name=answer value=a3>Большой полосатый мух
</form>

body>
html>

Описание параметров тега FORM

Параметр ACTION

Описание
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис
<form action=URL>...</form>

Аргументы
В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Значение по умолчанию
Нет.

Пример 2. Добавление обработчика формы

<html>
<body>

<form action=http://www.in-sites.ru/download/file.php>
...
</form>
</body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM.

Пример 3. Использование адреса электронной почты

<html>
<body>
<form action=mailto:[email protected] enctype="text/plain">
...
</form>
</body>
</html>


Параметр ENCTYPE

Описание
Устанавливает MIME-тип для данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (INPUT type=file), следует определить параметр enctype как multipart/form-data.

Синтаксис
<form enctype=MIME-тип>...</form>

Аргументы
Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.

Значение по умолчанию
application/x-www-form-urlencoded

Пример 4. Изменение типа данных

html>
body>

<form action=/cgi-bin/handler.cgi enctype="multipart/form-data" method=POST>
...
</form>

body>
html>

Параметр METHOD

Описание
Метод сообщает серверу о цели запроса. Различают два основных метода: GET и POST. Существуют и другие методы, но они пока мало используются.

Синтаксис
<form method=get | post>...</form>

Аргументы
Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода — GET и POST.

GET
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST
Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д

Значение по умолчанию
GET

Пример 5. Метод отправки формы

<html>
<body>
<form action=/cgi-bin/handler.cgi method=POST>
...
</form>
</body>
</html>


Параметр NAME

Описание
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты.

Синтаксис
<form name=имя_формы>...</form>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.

Значение по умолчанию
Нет.

Пример 6. Использование имени формы

<html>
<head>
<script language="JavaScript">
function validForm() {
alert("Имя " + document.forms('form1').nick.value)
}
</script>
</head>
<body>
<form action=/cgi-bin/handler.cgi name=form1>
Имя: <input type=text name=nick>
<input type=button value="OK">
</form>
</body>
</html>


Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис
<form target=имя_окна>...</form>

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы

<html>
<body>
<form action=/cgi-bin/handler.cgi taget=_blank>
...
</form>
</body>
</html>

Form action как работает. Взаимодействие с OpenID

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к серверному файлу.

Значение по умолчанию

Пример

FORM, атрибут action

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto: . При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введённую в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype="text/plain" в элементе

. FORM, атрибут action

Браузеры

В таблице браузеров применяются следующие обозначения.

  • - элемент полностью поддерживается браузером;
  • - элемент браузером не воспринимается и игнорируется;
  • - при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Это третья статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.

Цель данного руководства - разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.

Краткое повторение
В предыдущей части мы определили простой шаблон для домашней страницы и использовали мнимые объекты в качестве прототипов вещей, которых у нас еще нет. К примеру пользователи или записи.

В этой статье мы собираемся заполнить один из пробелов, которые есть в нашем приложении. Мы рассмотрим работу с формами.

Формы являются одними из самых основных блоков в любом веб-приложении. Использование форм позволит пользователям оставлять записи в блоге, а также логиниться в приложение.

Чтобы следовать этой части, ваше приложение микроблога должно быть таким, каким мы оставили его в конце предыдущей. Пожалуйста, убедитесь, что прилолжение установлено и работает.

Конфигурация
Для обработки форм мы будем использовать расширение Flask-WTF , которое является оберткой WTForms и прекрасно интегрируется с Flask приложениями.

Многие расширения Flask требуют некоторой настройки, поэтому мы создадим файл конфигурации внутри нашей корневой папки microblog, так что он будет легко доступен для изменения, если понадобится. Вот с чего мы начнем (файл config.py):
CSRF_ENABLED = True SECRET_KEY = "you-will-never-guess"

Все просто, это две настройки, которые нужны нашему расширению Flask-WTF . CSRF_ENABLED активирует предотвращение поддельных межсайтовых запросов. В большинстве случаев вы захотите включить эту опцию, что сделает ваше приложение более защищенным.

SECRET_KEY нужен только тогда, когда включен CSRF . Он используется для создания криптографического токена, который используется при валидации формы. Когда вы пишете свое приложение, убедитесь, что ваш секретный ключ сложно подобрать.

Теперь у нас есть конфиг, и мы должны сказать Flask"у прочесть и использовать его. Мы сможем сделать это сразу после того, как объект приложения Flask создан. (файл app/__init__.py):
from flask import Flask app = Flask(__name__) app.config.from_object("config") from app import views

Форма входа
В Flask-WTF формы представлены в виде объектов подкласса от класса Form . Подкласс форм просто определяет поля форм как переменные в классе.

Мы создадим форму логина, которая будет использоваться вместе с системой идентификации. Механизм входа, который мы будем поддерживать в нашем приложении, не стандартного типа имя пользователя/пароль, - мы будем использовать OpenID в качестве логинов. Преимущество OpenID в том, что авторизация пройдена у провайдера OpenID, поэтому нам не нужно проверять пароли, что сделает наш сайт более защищенным для наших пользователей.

OpenID логин требует только одну строку под названием OpenID. Также мы закинем чек

Отправить ответ

avatar
  Подписаться  
Уведомление о