В этой статье мы создадим и проверим небольшую
Форма, которую мы создадим, содержит ряд входных данных: текстовые поля, переключатель, список выбора с несколькими вариантами, флажок и кнопку отправки. Эти входные данные будут проверены, чтобы гарантировать, что пользователь предоставил значение для каждого из них.
Если одно или несколько полей пусты, форма будет отображена снова. Однако на этот раз рядом с пустыми полями будет стоять строка ошибки «Отсутствует». Если ни одно из полей не пусто, предоставленные значения будут отображаться в упрощенном виде.
Вы можете найти код этой статьи на GitHub.
Первоначально загруженная форма
Давайте создадим
Данные пользователя (имя, адрес и адрес электронной почты)
Предпочтения пользователя в потреблении фруктов (количество фруктов, которые они съедают в день, и их любимые фрукты)
Если пользователь хочет получить бесплатную брошюру
Текстовые поля
Поля имени, адреса и электронной почты будут закодированы с помощью таких элементов labelи input:
Элементы ввода HTML имеют несколько атрибутов. Параметр определяет typeих textкак однострочные поля ввода, принимающие текст. Атрибут nameиспользуется для указания имени поля и используется для доступа к элементу во время обработки PHP. Атрибут ID связывает ввод с соответствующей меткой (через forатрибут метки), что делает форму более доступной.
Радиокнопка хранит, сколько фруктов пользователь съедает в день.
0
1
2
More than 2
Параметр typeдля radioотображает ввод в виде переключателя. Обратите внимание, что каждой кнопке присвоено одно и то же имя. Это рассматривает переключатели как группу, позволяя пользователю выбрать 0, 1 или 2. valueАтрибут различается для каждой кнопки, предоставляя разные значения, из которых пользователь может выбирать. Поскольку здесь входные данные заключены в метки, атрибуты forи idне нужны.
Выберите список
Элемент select хранит выбранные пользователем любимые фрукты:
Атрибут nameпредставляет собой массив (определяемый квадратными скобками после имени), поскольку допускается множественный выбор (благодаря наличию multipleатрибута). Без multipleатрибута можно было бы выбрать только один вариант.
Атрибут valueдля каждого элемента option — это значение, которое будет отправлено на сервер, а текст между открывающим и закрывающим optionтегами — это значение, которое пользователь увидит в меню выбора. Каждый optionэлемент должен иметь отдельное значение.
Флажок
Элемент флажка используется, чтобы позволить пользователю выбрать, нужна ли ему брошюра или нет. Его значение будет установлено на «Да», если флажок установлен. В противном случае для него фактически будет установлено значение «Нет».
Кнопка отправки
И последнее, но не менее важное — это кнопка «Отправить «. Значение его valueэлемента отображается как текст кнопки. Нажав на нее, вы отправите форму.
Элемент формы
<form method="POST"
action="
Далее идет formэлемент. Хотя
Значение actionозначает POST, что содержимое формы отправляется как часть тела
Основное различие между методами POSTи GETзаключается в наглядности. В Интернете есть множество статей о выборе между ними, но я советую придерживаться POST при использовании форм, если только у вас нет веской причины для передачи пользовательских данных в видимом
В приведенном выше примере actionустанавливается в результате передачи значения $_SERVER[«PHP_SELF"], которое является именем текущего исполняемого скрипта, в htmlspecialchars () метод PHP. Этот метод используется для преобразования определенных символов HTML в имена их объектов HTML. например, >будет преобразован в >.
Это делает две вещи:
Это предотвращает поломку формы, если пользователь отправляет
Это средство защиты от атак XSS (
Примечание: в реальном приложении вы, вероятно, будете использовать не htmlspecialcharsтолько очистку ввода формы, например, стороннюю библиотеку, например
Использование $_SERVER["PHP_SELF"]предпочтительнее простого жесткого кодирования местоположения, если вы хотите, чтобы ваша форма отправлялась обратно в тот же скрипт, который ее сгенерировал, поскольку вам не придется обновлять код, если вы измените имя скрипта.
Прежде чем мы закончим обсуждение форм, вот три вещи, которые следует помнить при работе с
Все элементы управления формы должны быть заключены в formтеги.
Выравнивание элементов управления текстом и формой может быть достигнуто разными способами. CSS является предпочтительным вариантом для этого, особенно со всеми новыми инструментами компоновки, доступными в наши дни, включая Flexbox и Grid. (Пожалуйста, не используйте таблицы для макета, так как элементы формы не являются табличными данными!)
Для дополнительной доступности стоит изучить fieldsetэлемент для группировки элементов формы.
Обработка формы
Теперь, когда вы определили форму в HTML, давайте поработаем с кодом, обрабатывающим форму. Прежде чем мы это сделаем, имейте в виду, что форма может находиться в одном из двух состояний:
Пустая форма загружается при первой загрузке страницы.
Форма загружается, если форма не прошла проверку. В этом состоянии поля, заполненные пользователем, будут содержать указанное значение. Другие поля будут пустыми с сообщением об ошибке рядом с ними.
Проверка содержимого формы
При отправке формы следующие записи будут сохранены в $_POSTмассиве (или $_GETмассиве в зависимости от methodатрибута формы). Значения в левом столбце берутся из nameатрибута элемента управления, и я также отметил, является ли поле обязательным для целей проверки.
Поле Тип Обязательный или необязательный
название однозначная переменная обязательное
адрес однозначная переменная обязательное
Эл. адрес однозначная переменная обязательное
сколько однозначная переменная обязательный — необходимо выбрать один
избранноеФрукты множество обязательный — необходимо выбрать один
брошюра однозначная переменная необязательный
Если пользователь не соблюдает эти правила, будет отображаться сообщение об ошибке. Любые уже заполненные поля останутся без изменений, что позволит пользователю просто изменить свой ввод и повторно отправить форму без необходимости повторного ввода данных.
Прежде чем мы продолжим, проверка, которую мы выполняем в коде в этой статье, чрезвычайно упрощена. Обычно вы выполняете гораздо более сложную проверку, например:
не являются ли определенные поля длиннее определенной длины
Соответствует ли адрес электронной почты спецификации адреса электронной почты
если дата начала была в правильном формате и до или после определенной даты
Для этого вы, скорее всего, воспользуетесь сторонней библиотекой, такой как
. Однако это выходит за рамки данной статьи.
Давайте посмотрим на PHP, необходимый для проверки формы, которая размещается в верхней части страницы перед HTML для формы:
<? php
$errors = [];
$fields = ['name’, 'address’, 'email’, 'howMany’, 'favoriteFruit’, 'brochure’];
$optionalFields = ['brochure’];
$values = [];
if ($_SERVER["REQUEST_METHOD»] == «POST») {
foreach ($fields as $field) {
if (empty ($_POST[$field]) &&! in_array ($field, $optionalFields)) {
$errors[] = $field;
} else {
$values[$field] = $_POST[$field];
}
}
Код инициализирует три массива:
$errors: изначально пусто, здесь хранятся поля формы, которые не прошли проверку
$fields: здесь хранятся все имена полей для обработки
$optionalFields: здесь хранятся необязательные имена полей.
$values: изначально пустой, это ассоциативный массив, который будет содержать предоставленные поля и их значения.
После этого он проверяет, был ли установлен метод, используемый для отправки формы POST. Если это так, он перебирает значения в массиве и проверяет, $_POSTсодержит ли суперглобальный объект соответствующее имя поля. Если это так, и поле имеет значение, поле и его значение сохраняются в $valuesмассиве. Однако если поле пусто и его нет в $optionalFieldsмассиве, оно добавляется в $errorsмассив.
В этом примере мы проверяем $_POSTмассив, потому что для метода формы задано значение POST. Если methodбыло установлено значение GET, код будет обновлен для проверки $_GETсуперглобального значения.
После проверки отправки на наличие ошибок код довольно примитивным образом выводит значения, отправленные пользователем, если ошибок не было зафиксировано:
if (empty ($errors)) {
foreach ($fields as $field) {
if ($field === «favoriteFruit») {
printf («%s:%s
», $field, var_export ($_POST[$field], TRUE));
} else {
printf («%s:%s
», $field, $_POST[$field]) ;
}
};
exit;
}
}
После выполнения этого кода отображается
Для полей ввода мы обновим их, чтобы установить их значения, как в следующем примере, который заполняет значение поля имени:
<input type="text"
name="name"
value="">
htmlspecialchars () используется здесь по той же причине, что и ранее PHP_SELF— для защиты от
<? php if (in_array ('name’, $errors)):? >
Missing
<? php endif;? >
Форма отправлена, но с ошибками
Использование класса errorобеспечивает хук для стилизации сообщения об ошибке с помощью CSS:
.error {
color: #FF0000;
}
Расширение юзабилити формы
Приложив немного больше усилий, вы также можете запомнить выбор, сделанный пользователем с помощью переключателей, и выбрать:
<input type="radio" name="howMany"
<? php if (isset ($howMany) && $howMany == «zero») echo «checked»;? >
value="zero"> 0
<input type="radio" name="howMany"
<? php if (isset ($howMany) && $howMany == «one») echo «checked»;? >
value="one"> 1
<input type="radio" name="howMany"
<? php if (isset ($howMany) && $howMany == «two») echo «checked»;? >
value="two"> 2
<input type="radio" name="howMany"
<? php if (isset ($howMany) && $howMany == «twoplus») echo «checked»;? >
value="twoplus"> More than 2
Добавлен код для проверки того, определена ли переменная, связанная с переключателем, в разделе проверки. Если это так, checkedвыводится как часть HTML элемента.
Теперь обратимся к меню выбора. На самом деле лучше реструктурировать код как цикл, чем слепо добавлять код для проверки каждого параметра вручную. Цикл может генерировать HTML для опций на лету, и в него может быть включена проверка того, выбрана ли опция или нет:
Если вы еще не знакомы с циклами PHP, вы можете прочитать статью «Learning Loops «.
Обратите внимание, что разница здесь заключается в использовании атрибута selected: используются радиокнопки checked, а selectиспользуются опции selected. Это всего лишь одно из тех незначительных несоответствий, с которыми нам приходится жить.
Одна тема, которую я не затронул и которая выходит за рамки этой статьи, — это то, что вы будете делать с данными после успешной проверки. Существует ряд возможностей, в том числе сохранение в базе данных или отправка данных по электронной почте самому себе. Что бы вы ни выбрали, вы должны быть уверены, что:
форма отправлена пользователем
введенные пользователем данные не содержат ошибок
Резюме
Проверка необходима, особенно если вы собираетесь сохранять отправленные данные в базе данных или в
Из этой статьи вы узнали четыре вещи:
как создать базовую форму HTML
как проверить форму с помощью PHP
как повторно отобразить ввод пользователя
как отображать сообщения об ошибках
