что такое action в html

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

Всё об атрибуте action

Что такое атрибут action.

Если атрибут action отсутствует или пустой

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

Синтаксис атрибута action.

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

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

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

Значение по умолчанию атрибута action.

Пример использования атрибута action с якорем.

Также нам потребуется кнопка(можно input) с типом submit, по которой будем отправлять атрибут action

В action помещаем якорь, чтобы переместиться в заданную точку, после выполнения скрипта.

Перед формой ставим сам якорь:

Если кнопка отправить будет нажата, то присваиваем значение переменной

Где нам требуется выводим результат, естественно ниже выше приведенного условия!

Соберем код использования атрибута action.

Нажмите кнопку » Отправить »

Выполнение атрибута action на другой странице

Для этого нам потребуется:

Сделаем отдельную страницу :

Можно посмотреть на неё.

На ней размещаем условие:

Испытать пример работы атрибута action на другой странице

Нажмите кнопку отправить, чтобы получить результат!

Скачать пример использования атрибута action на другой странице

Выполнение атрибута action в новом окне

Берем выше приведенный код и вставляем в тег «form»

Источник

Отправка данных формы

Куда отправляются данные?

Здесь мы обсудим, что происходит с данными при отправке формы.

О клиентской/серверной архитектуре

WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.

Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

На стороне клиента: определение способа отправки данных

Атрибут action

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

В этом примере данные отправляются на абсолютный URL — http://foo.com :

Если атрибуты не указаны, как показано ниже, данные из формы отправляются на ту же страницу, на которой размещается данная форма:

Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.

Атрибут method

Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

Метод GET

Рассмотрим следующую форму:

HTTP-запрос имеет следующий вид:

Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

На стороне сервера: получение данных

Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.

Пример: Чистый PHP

Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

Пример: Python

Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).

Два шаблона из коде выше взаимодействуют так:

Другие языки и фреймворки

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

Особый случай: отправка файлов

Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.

Атрибут enctype

Если хотите отправить файл, нужно сделать следующие три шага:

Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.

Проблемы безопасности

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

В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:

XSS «Межсайтовый скриптинг» и CSRF «Подделка межсайтовых запросов»

Межсайтовый скриптинг (XSS «Cross Site Request Forgery») позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF «Cross-Site Scripting») может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный «фильтр», который удаляет элементы HTML

Источник

Тег form в html

Тег form в html — описание

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

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

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

Примеры

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

В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

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

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.

AUTOCOMPLETE

Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:

ENCTYPE

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

METHOD

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

Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.

ACCEPT

Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.

Источник

Помогите разобраться с Action в form?

Помогите, пожалуйста, понять:

Собственно, вопрос такой: пользователь вводит свои данные (логин и пароль) на index.php, к примеру. Каким образом необходимо задать action и организовать авторизацию, чтобы не перенаправлять авторизацию в другой файл, а обработать ее в index.php?

Что-то такого типа? То есть, по нажатию кнопки, будем вызывать php-функцию внутри index.php?

onsubmit – событие javascript и никакого отношения к PHP не имеет.

Что касается вашего вопроса, то разместите код проверки логина в index.php.
Ваша форма:

Помоему автор не совсем удачно задал вопрос.

Для любого программиста замена action и «не перенаправлять авторизацию в другой файл, а обработать ее в index.php» означает: вместо запроса к login.php сделать запрос к index.php и внутри него подгрузить модуль авторизации.
В этом случае ответ DevMan вполне себе приемлемое решение.

Но наличие onsubmit=«check_dataLogin()» настораживает и наводит на мысль, что автор все таки хочет прикрутить авторизацию через ajax.

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

Могу только обратить внимание на несколько подводных камней.
1. ваша функуция check_dataLogin() должна всегда возвращать false, в противном случае после того как она отработает бразуер пошлет стандартный post запрос на сервер (не ajax)
2. оставьте form action=login.php. это ваш fallback на случай если в браузере отключен JavaScript.
3. результат у login.php должен личный для обыного post запроса и для ajax: может быть редирект на index.php, либо снова форма логина ( если пароль не верный), или же json для вашего ajax запроса (а может и не json, как реализуете так и будет)

П.С. Я человек новый на хабре и не совсем уверен что в Q&A это у местно, но в мирей айти есть некая этика как задавать вопросы. Практически на всех irc каналах или maillist, в которых я учавствую, подобный вопрос могут проигнорирывать или заклевать вас за «отсутсвие культуры общения». Если повезет с вами сыграют в 10 вопросов, пытаясь выяснить чего же вы все таки добиваетесь.
Для того чтобы вам помогали, ответы были развернутые и быстрые, научитесь формулирывать вопросы в понятной для других форме. Ведь не даром говорят что правильно поставленный вопрос содержит в себе половину ответа.

может это поможет вам goo.gl/EiskH
и еще (без перевода прадва) whathaveyoutried.com

Спасибо!
Очень развернутый ответ! 🙂

К теме Q&A. Я не очень хорошо владею терминологией в веб-разработке. Поэтому вопрос показался, наверное, некорректным. Я попробую еще раз:

на одном из своих проектов я делал авторизацию таким образом:

Такой подход создает очень много php-файлов с одной функцией. Я и подумал: «а что если авторизовывать пользователя в том же php-файле, не создавая кучу этих самых файлов с одной функцией?»

Такой подход создает очень много php-файлов с одной функцией.

Источник

Что такое action в html

HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

Форма обратной связи в HTML

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

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега

Сделаем 100% ширину с помощью CSS.

Получим следующую форму.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент является универсальным, в отличии от элемента

. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Изменим нашу форму.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Добавим две кнопки:

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка очистки формы

Давайте дополним нашу форму.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

input type= «file» value=»Выберите файл»>

Дополним нашу форму. Создадим отдельную группу элементов.

Выбор даты

Добавим в нашу форму возможность выбора даты.

Выпадающий список

Выпадающий список создается с помощью тега select >, а элемент списка с помощью option >. Давайте создадим в нашей форме возможность указать адресата.

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник