Как сделать чтобы форма не отправлялась без ввода данных

Обновлено: 08.07.2024

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

Предварительные знания: Базовая компьютерная грамотность, понимание HTML и базовые знания по HTTP и программированию на стороне сервера.
Задача: Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера.

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

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

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

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

Элемент определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются action и method .

Атрибут action

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

Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:

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

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

Атрибут method

Метод GET

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


Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса ( ? ), за которым следуют пары имя / значение, каждая из которых разделена амперсандом ( & ). В этом случае мы передаём две части данных на сервер:

  • say , со значением Hi
  • to , со значением Mom

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

Метод POST

Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе GET выше, но с атрибутом method , установленным в post .

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

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

  1. Нажмите F12
  2. Выберите Network
  3. Выберите "All"
  4. Выберите "foo.com" во вкладке "Name"
  5. Выберите "Headers"

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


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

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

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


Пример: Python

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

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

    : Та же форма, что и выше The POST method , только с использованием action к > . (Это Jinja2 шаблон, который изначально HTML, но может содержать вызовы Python кода в фигурных скобках, которые запустятся веб-сервером. url_for('hello') буквально говорит: после отправки данных переадресуй их в /hello .) : Этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при отображении. Это сделано с помощью функции hello() , указанной выше, которая выполняется, когда запрос направляется в /hello URL.

Примечание: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно установить Python/PIP, потом установить Flask используя команду: pip3 install flask . После этого, вы сможете запустить файл из примера, используя команду: python3 python-example.py , потом открыть localhost:5000 в своём браузере.

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

    для Python (немного тяжеловеснее, чем Flask, но больше инструментов и опций) для Node.js для PHP для Ruby для Elixir

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

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

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

Атрибут enctype

Этот атрибут позволяет конкретизировать значение в Content-Type HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: application/x-www-form-urlencoded . На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."

  • Указать method атрибут POST , поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
  • Установить в enctype значение multipart/form-data , потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
  • Подключите один или более File picker виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.

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

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

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

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

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

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

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

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

CSRF-атаки аналогичны XSS-атакам в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники CSRF пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки XSS используют доверие пользователя к веб-сайту, в то время как атаки CSRF используют доверие веб-сайта к пользователю.

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

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

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

Для этого достаточно добавить свой обработчик на событие ввода данных. Делается это установкой кода, который при событии нажатия клавиши клавиатуры OnKeydown проверяет, является ли эта клавиша Enter. Если нажата клавиша ввода, то процедура действия останавливается. В противном случае продолжается обработка события по умолчанию – просто ввод данных.

Простейшим способом будет добавление атрибута события непосредственно в тег поля формы:

Здесь, на событие onkeydown (нажатие клавиши клавиатуры) выполняется простой скрипт проверки, не является ли код вводимого символа равным 13 (клавиша Enter ). Если код именно этот, то строка return false; останавливает выполнение обработку этого события.

Данное решение не очень удобно, если полей на форме много. Соответственно, нужно либо проставить этот обработчик для каждого поля, либо прописать общий скрипт для всех. Это проще сделать средствами библиотеки JQuery .

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

Или сделать для всех текстовых полей:

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

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

вы действительно должны использовать шаблон Post Redirect Get для обработки этого, но если вы каким-то образом оказались в положении, когда PRG нежизнеспособен (например, сама форма находится в include, предотвращая перенаправления), вы можете хэшировать некоторые параметры запроса, чтобы сделать строку на основе содержимого, а затем проверить, что вы ее еще не отправили.

довольно верный способ реализовать уникальный идентификатор в пост и кэшировать его в

тогда в вашем коде сделайте следующее:

  1. нет перенаправления
  2. нет re POST данные при обновлении страницы (F5)
  3. нет re POST при переходе на предыдущую/следующую страницу через историю браузера
  1. Setup NextPage заголовок вместо Location
  2. отображать результат обработки POST форма данных, как это будет отображаться для GET запрос post/redirect/get pattern
  1. настройки window.location С NextPage стоимостью
  2. когда пользователь обновит страницу, браузер будет вести переговоры GET запрос NextPage вместо re POST данные формы

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

после вставки его в базу данных, вызовите метод unset () для очистки данных.

unset ($_POST);

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

заголовок ('Location:'.$_SERVER ['PHP_SELF']);

  • на стороне клиента

    • отключить кнопку отправки, как только клиент нажмет на нее
    • если вы используете Jquery:Jquery.один
    • использование дифференцировать на основе хэширования timestamp / timestamp, когда запрос был отправлен.
    • токены Userequest. Когда основная загрузка назначает временный запрос tocken, который при повторении игнорируется.

    Я использую эту строку javascript, чтобы заблокировать всплывающее окно с запросом на повторную отправку формы при обновлении после отправки формы.

    просто поместите эту строку в нижний колонтитул вашего файла и увидеть магию

    другой вариант будет хранить в сеансе, если текст должен быть записан в вашу базу данных SQL следующим образом:

    Как говорили другие, невозможно выйти из использования post/redirect/get. Но в то же время это достаточно легко сделать, что вы хотите сделать на стороне сервера.

    на странице POST вы просто проверяете пользовательский ввод, но не действуете на нем, вместо этого вы копируете его в массив сеанса. Затем вы снова перенаправляетесь на главную страницу отправки. Ваша главная страница отправки начинается с проверки наличия массива сеансов, который вы используете, и если да, то скопируйте его в локальный массив и снимите его. Оттуда вы можете действовать на него.

    таким образом, вы только делаете всю свою основную работу один раз, добиваясь того, что вы хотите сделать.

    Я искал решение, чтобы предотвратить повторную отправку в огромный проект после этого. Код очень хорошо работает с $_GET и $_POST, и я не могу изменить поведение элементов формы без риска непредвиденных ошибок. Итак, вот мой код:

    Формы HTML


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: Очистить .

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

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

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

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

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

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

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

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

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

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

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

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

    Выбор даты

    Выбрать дату можно с помощью типа date все того же input’а. Полный код: .

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

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

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

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

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

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

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

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

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

    Анатолий Бузов

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

    Одним словом, урок очень полезный!

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

    Шаг 1 – создаем непосредственно саму HTML форму

    Давайте взглянем на наш html код. Мы начинаем с нашей основной html формы:


    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Вы могли заметить, что я включил div id contact_ form, который охватывает весь код формы. Вы также могли заметить, что я оставил параметры action и method пустыми. Это я сделал специально, т.к. об этом позже позаботиться jQuery.

    Еще одна важная вещь. Не забудьте включить значение id в каждое поле ввода (строка начинается с тега input). Эти id значения jQuery сценарий будет искать для обработки формы.

    Я добавил некоторый css стили и фоновое изображение в Photoshop для получения данной формы:

    Шаг 2 – начинаем добавлять jQuery

    Следующим шагом мы начнем добавлять по частям jQuery код. Я буду считать, что В уже скачали jQuery.

    Далее открываем новый файл JavaScript, ссылаемся на него в xtml документе также, как и на любой другой файл JavaScript. Добавляем следующий код:

    Шаг 3 – написание формы проверки введенных данных

    Объясняю, как данная вещь работает. В переменную “name” мы записываем значение, которое было введено в поле с идентификатором “name” – это всего одна строчка на jQuary.

    Читайте также: