Селект
Изменение селекта сбрасывает фокус
Пользователи программ чтения с экрана и клавиатуры не нажимают на опции, чтобы выбрать их в раскрывающемся списке. Вместо этого они просматривают опции, перемещая стрелки или табуляторы вниз по списку. Перемещение по опциям таким образом по очереди меняет фокус на каждую последующую опцию. Это представляет проблему, когда объекты на странице запускаются для изменения при изменении фокуса в списке параметров. Каждый раз, когда программа чтения с экрана или клавиатура начинает перемещаться по параметрам, страница обновляется и фокус теряется. Это создает очень запутанный опыт, и во многих случаях все параметры в списке недоступны.
Решение
Убедитесь, что когда устройство чтения с экрана или пользователь клавиатуры перемещаются по опциям, страница не обновляется, а фокус остается в раскрывающемся списке. Кроме того, не перезагружайте страницу при изменении, лучше делать это когда пользователь нажимает клавишу ввода, ликает или или обрабатывать событие .
Обратите внимание, что после селекта есть кнопка, которая и будет запускать обработчик после изменения значения поля
Селект без лейбла
Все поля формы нуждаются в лейблах, которые видны и остаются видимыми для каждого пользователя. Лейблы помогают всем пользователям понять назначение поля формы. Лейблы, которые правильно связаны со своим полем формы с использованием стандартной разметки HTML, программно соединяют лейбл с полем формы независимо от визуального макета страницы. Это дает пользователям программы чтения с экрана четкое представление об использовании поля формы.
В ситуациях, когда ограниченное пространство или дизайн делают невозможным или нежелательным использование видимого лейбла, он может быть визуально скрыта (но быть доступной для программ чтения с экрана), за исключением случая, если первая опция в селекте выбранная по умолчанию включает текст, который маркирует поле.
Альтернативный вариант:
Добавьте элемент по умолчанию к элементу , который включает тот же или подобный текст, что и предполагаемый лейбл:
Кастомные селекты не доступны
Селект должен быть доступен для навигации по опциям с помощью клавиши Tab, у него должен быть правильно связанный лейбл, он должен указывать пользователю тип элемента управления, которым он является, и он должен указывать на текущий выбранный элемент или элементы.
Если это возможно, всегда отдавайте предпочтение системным селектам перед кастомными решениями.
Если все-таки вы должны использовать кастомный селект, вам нужно будет вручную контролировать состояние ряда атрибутов ARIA с помощью JavaScript. Рассмотрите, пожалуйста в качестве основы реализацию от рабочей группы WAI-ARIA.
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
- Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
- В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
- Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.
Логика работы PHP-программы будет такая:
- получаем значения переменных из тех данных, которые получил обработчик;
- готовим сообщение, где укажем все поля в форме;
- отправляем это сообщение и смотрим на результат выполнения функции отправки;
- если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
- через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода»
Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную в функции на свой настоящий адрес, чтобы самим получать письма из формы.
Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Если такое есть у вашего хостинга, то вы тоже сможете использовать все возможности PHP.
Обработка формы с GET-параметрами
Формы можно передавать с помощью методов GET и POST. Указывается метод с помощью атрибута method тега form:
Если метод не указан, то по-умолчанию форма отправляется методом GET.
Формы, отправляемые методом GET, передают данные через URL-адрес.
Соответственно GET-параметр — это параметр, передаваемый в URL-адресе. Например, разберём URL /index.php?name=Vasya&price=1000 по частям:
- /index.php — ссылка на сам скрипт
- ? — символ, с которого всегда начинается перечисление GET-параметров
- name=Vasya — это первый GET-параметр с ключом name и значением Vasya
- & — разделитель между GET-параметрами
- price=1000 — это второй GET-параметр с ключом price и значением 1000
Ну а раз мы эти параметры передали, значит теперь можем получить их в PHP. Для этого существует суперглобальный массив $_GET.
В отличие от обычных переменных, этот массив виден в любой области видимости, в т.ч. внутри функций. Внутри этого массива хранятся GET-параметры текущего запроса в виде ассоциативного массива.
Когда вы отправляете форму, браузер получает ключ и значение каждого элемента (ключ указывается в атрибуте name, значение — то, что ввёл пользователь) и подставляет их в новый URL-адрес, на который затем и переходит.
Поэтому важно указывать атрибут name каждому элементу формы, иначе этот элемент не отправится на сервер. Итак, создадим простенькую форму и добавим ей PHP-обработчик:
Итак, создадим простенькую форму и добавим ей PHP-обработчик:
Теперь при отправке заполненной формы PHP выведет на экран то, что мы в эту форму написали.
Методы GET и POST
Существуют два способа, с помощью которых клиенты через формы могут отправлять данные на веб-сервер — это методы и .
Методы GET и POST создают ассоциативный массив (например, array (key1 => value1, key2 => value2, key3 => value3, …)). Массив содержит пары , где ключи — это имена элементов управления формы, а значения — входные данные от пользователя.
И GET и POST рассматриваются как переменные и . Это суперглобальные объекты, а это значит, что они всегда доступны, независимо от области видимости — и мы можем получить к ним доступ из любой функции, класса или файла.
— это массив переменных, переданных текущему скрипту через параметры URL.
— это массив переменных, переданный текущему скрипту с помощью метода HTTP POST.
Метод GET
Информация, отправленная из формы с помощью метода GET, видна всем — GET создает длинную строку, которая отображается в логах сервера и в адресной строке браузера. Например:
index.html?page=title&name=Nicol
Здесь первая часть строки до символа — это полный путь к файлу, а остальная часть — передаваемые данные. Данные разделяются на блоки «имя=значение» посредством . В данном случае мы получили 2 глобальных переменных и , их содержимым являются «title» и «armed» соответственно. Поскольку переменные отображаются в URL-адресе, страницу можно добавить в закладки. В некоторых случаях это может быть полезно.
GET также имеет ограничения на объем отправляемой информации. Метод GET предназначен для отправки только до 1024 символов.
Метод GET не может отправлять на сервер двоичные данные, например изображения или текстовые документы.
GET может использоваться для отправки не конфиденциальных данных.
Примечание: Не используйте метод GET для отправки на сервер паролей или другой конфиденциальной информации!
Частые ошибки, возникающие при отправке PHP формы с сайта
Первая, наверное самая популярная ошибка, это когда вы видите пустую белую страницу без сообщений. Это означает, что вы допустили ошибку в коде страницы. Вам нужно включить отображение всех ошибок в PHP и тогда вы увидите, где допущена ошибка. Добавьте в код:
Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.
Таким образом, для корректной работы я рекомендую поместить файл send.php на хостинг сайта. Там, как правило, все уже настроено.
Еще одна частая ошибка, когда появляется оповещение «Сообщение успешно отправлено», а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:
Обработка данных формы
Когда пользователь заполняет форму и нажимает кнопку «Отправить», данные формы отправляются в PHP-обработчик «action_form.php».
Теперь, когда мы создали форму, нам нужно понять, как обрабатывать данные, введенные пользователем в нашем серверном PHP-скрипте. Существует два механизма передачи данных из HTML-формы на сервер: и . В нашем примере выше мы указали , но в любом случае задача чтения этих данных в нашем PHP-скрипте одинаково проста.
PHP помещает данные из формы в ассоциативный массив (информацию о массивах PHP смотрите в разделе «Массивы PHP» ), к которому можно получить доступ из сценария PHP на стороне сервера. Для методов и имена переменных массива соответственно и .
Чтобы показать пользователю заполненную в форме информацию, мы можем просто отобразить переменные. PHP-обработчик «action_form.php» можно записать так:
<html>
<body>
Вы ввели следующие данные:
Имя: <?php echo $_POST; ?>
Фамилия: <?php echo $_POST; ?>
</body></html>
Результат обработки данных будет примерно таким:
Вы ввели следующие данные: Имя: Иван Фамилия: Иванов
Такого же результата можно достичь с помощью метода HTTP GET заменив в форме method=»POST» на method=»GET», а в обработчике на .
Пример
Попробуй сам
Php-обработчик «send.php» выглядит так:
<html>
<body>
</body>
</html>
В вышеуказанном коде не хватает очень важного: Вам необходимо проверить данные формы, чтобы защитить скрипт от вредоносного кода. Примечание: Помните о БЕЗОПАСНОСТИ при обработке форм PHP! Правильная проверка вводимой пользователями данных необходима для защиты формы от хакеров и спамеров!
Примечание: Помните о БЕЗОПАСНОСТИ при обработке форм PHP! Правильная проверка вводимой пользователями данных необходима для защиты формы от хакеров и спамеров!
В каких случаях использовать POST и когда нужно использовать GET
В таблице ниже показаны распространенные варианты использования HTTP запросов с объяснением в чем разница между GET и POST запросами в конкретной ситуации.
| Ситуация | GET | POST |
|---|---|---|
| Фильтр товаров |
Пользователь получит страницу с подходящими ему товарами, сможет сохранить ее в закладки, переслать ссылку на страницу с параметрами другим и вернуться к странице позже без повторного заполнения формы фильтра. |
Для повторного посещения страницы пользователь должен будет повторно заполнить форму фильтра, страницей с параметрами нельзя будет поделиться, сохранить в закладки и вернуться к странице позже без повторного заполнения формы фильтра. |
| Форма авторизации |
Отсутствует защита конфиденциальной информации. Введенный пароль будет виден в адресной строке браузера, будет сохранен в истории посещенных сайтов. |
Хотя данные могут передаваться в незашифрованном виде, увидеть их можно только через инструменты разработчика или с помощью другого специального программного обеспечения. |
|
Онлайн заявка Оформления заказа Форма обратнойсвязи |
При повторном обращении по конечной ссылке на сервере будет произведена повторная обработка, например, будет создана повторная заявка, оформлен еще один заказ, создан еще один запрос на обратную связь. |
Повторное обращение по конечной ссылке не приведет к повторной обработке запроса с введенными ранее параметрами. |
| Через гиперссылку |
Переход по гиперссылке с параметрами равнозначен отправке запроса через HTML форму. |
Нет технической возможности поместить POST запрос в гиперссылку. |
| AJAX запросы | Используются оба метода. Выбор зависит от контекста. Принципы выбора метода такие же, как и для HTML форм. |
Escaping the output
The page directly displays the form data. If malicious hackers intentionally enter bad data, the page won’t work properly.
For example, if the following JavaScript code is entered in the field and the form is submitted.
…you’ll see that the page displays an alert.
Imagine that the script doesn’t just show an alert but loads the malicious code from another server to the user’s web browser, the risk is higher. This type of attack is called cross-site scripting (XSS) attack.
Therefore, before displaying user input on a webpage, you should always escape the data. To do that, you use the function:
Note that we will also show you how to sanitize and validate form data in the next tutorial.
HTML форма отправки данных
Форма на странице формируется тегами <form>…</form>, внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла.
Итак, простейшая форма отправки может содержать следующий код:
Элементы формы и их параметры:
action=»myform.php» – атрибут «action» определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл «myform.php», находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.
method=»post» – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье «Отличия методов POST или GET». Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.
Текст «Значение А:» и «Значение Б:» добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.
Теги <input> используются для формирования различных управляющих элементов формы.
type=»text» – атрибут «type» определяет вид поля. В зависимости от того, какой тип указан, меняется и внешний вид элемента, и его назначение. Значение атрибута «text» указывает, что в браузере элемент будет отображаться однострочным текстовым полем, куда пользователь сможет ввести свою строку.
name=»data1″ – атрибут «name», указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.
type=»submit» – тег <input> с таким значением параметра «type» будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав «Ввод» на клавиатуре. Но наличие кнопки делает форму более понятной.
value=»Отправить» – в данном случае (для type=»submit») определяет только надпись на кнопке. Для type=»text», например, это будет текст, который будет выведен в текстовом поле.
В итоге, на странице этот код будет выглядеть приблизительно так:
Текстовые поля
Под текстовыми полями в этой статье понимаются элементы, создаваемые тегам input со значением параметра type равным text и тегом textarea. Организовать обработку формы состоящей из нескольких таких полей проще всего. На листинге ниже приведен листинг с html-разметкой для такой формы.
<form action='do.html' method='post'> <input type='text' name='txt' value=''><br> <input type='text' name='txt' value=''><br> <input type='text' name='txt' value=''><br> <input type='text' name='txt' value=''><br> <input type='text' name='txt' value=''><br> <input type='submit' value='Отправить'> </form>
Как видно из листинга, имена для элементов формы, с точки зрения PHP, являются элементами массива. Поэтому PHP-сценарий, который будет обрабатывать эту форму, будет воспринимать все множество текстовых полей этой формы как единый массив. К отдельным элементам можно обращаться по индексам или использовать перечисление при помощи команд list и each, как это сделано в следующем примере.
<?php while(list($key,$val) = each($txt)) echo "ключ - $key, значение - $val<br>n"; ?>
Переключатели
Переключателями (checkbox) в этой статье называются элементы, создаваемые тегам input со значением параметра type равным checkbox. Форма для использования переменного количества «переключателей» строится абсолютно так же
Обратите внимание, что выбор конкретного значения переключателя (то есть значение свойства value) не важен. Пример приведен в листинге ниже:
<form action='do.html' method='post'> <input type='checkbox' name='chb' value='1'><br> <input type='checkbox' name='chb' value='1'><br> <input type='checkbox' name='chb' value='1'><br> <input type='checkbox' name='chb' value='1'><br> <input type='checkbox' name='chb' value='1'><br> <input type='submit' value='Отправить'> </form>
Однако обработка такой формы отличается от обработки, описанной для текстовых полей. В данном случае необходимо определить, включил или нет посетитель сайта тот или иной переключатель. Если включил — то соответствующий элемент массива существует, если нет — то отсутствует. В следующем листинге приведен пример PHP сценария, который распечатывает включенные переключатели:
Радио-кнопки
Перед тем как описывать обработку радио-кнопок необходимо вспомнить, как они работают. Суть радио-кнопок (элементы созданные тегами input со значением параметра type равным radio) заключается в том что, выбирая одну кнопку, пользователь автоматически снимает выделение с другой кнопки из этого же набора. Кнопки объединяются в набор очень просто: у всех кнопок в наборе одно и тоже имя.
А вот значения (то есть параметры value) у кнопок в наборе — разные. И на сайт будет отправлено значение выбранной кнопки с именем набора. Так же как и в случае с текстовыми полями и переключателями имена наборов радио-кнопок должны оформляться как имена элементов массива в PHP. Пример такой формы приведен в следующем листинге:
<form action='do.html' method='post'> // первый набор кнопок <input type='radio' name='rdi' value='1'> <input type='radio' name='rdi' value='2'> <input type='radio' name='rdi' value='3'><br> // второй набор кнопок <input type='radio' name='rdi' value='1'> <input type='radio' name='rdi' value='2'> <input type='radio' name='rdi' value='3'><br> // третий набор кнопок <input type='radio' name='rdi' value='1'> <input type='radio' name='rdi' value='2'> <input type='radio' name='rdi' value='3'><br> <input type='submit' value='Отправить'> </form>
Обработка радио-кнопок объединяет идеи, использование при обработке, как текстовых полей, так и переключателей. Если автор html-страницы не установил значение по умолчанию, а пользователь не выбрал определенную кнопку в наборе радио-кнопок, то данный элемент будет отсутствовать в массиве (как для переключателей).
Если же кнопка выбрана, то соответствующий элемент массива будет содержать ее значение (как для текстовых полей). Ниже приведен листинг примера, обрабатывающего форму с несколькими наборами радио-кнопок.
<?php while(list($key,$val) = each($rdi)) echo "ключ - $key, значение - $val<br>n"; ?>
Таким образом, ничего сложного в обработке сложных форм нет.
