Формы. Часть 3

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

Например есть поле, где нужно ввести email. Если это будет обычный тип text, то невозможно будет проконтролировать корректность ввода. Пользователь сможет ввести любой текст, который не будет являться email-адресом.

Но если указать тип поля email, то браузер сам проверит корректность адреса и просто не позволит отправить невалидную форму.

Из наиболее употребительных типов стоит отметить: email, password, number, url. Есть ещё tel для ввода номера телефона, но он очень капризный, поэтому редко используется. Вместо него используют валидацию с помощью js-кода.

Из «новых» типов интерес представляют month, time, week, date, datetime-local.

Есть ещё range, который выводит ползунок. Используется когда нужно выбрать число из определенного диапазона.

Вот демо-форма, где можно проверить как работают эти поля.

<form>
<p><input class="form-input" type="text" placeholder="text"></p>
<p><input class="form-input" type="email" placeholder="email"></p>
<p><input class="form-input" type="password" placeholder="password"></p>
<p><input class="form-input" type="number" placeholder="number"></p>
<p><input class="form-input" type="url" placeholder="url"></p>
<p><input class="form-input" type="month"></p>
<p><input class="form-input" type="time"></p>
<p><input class="form-input" type="week"></p>
<p><input class="form-input" type="date"></p>
<p><input class="form-input" type="datetime-local"></p>
<p><input type="range" min="1" max="10" value="7"></p>

<p><button class="button button1" type="submit">Отправить</button></p>
</form>

Внешний вид этих полей (кроме текстовых) будет меняться в разных браузерах.

Скрытое поле

Очень часто нужно передать с формой дополнительную информацию. Например на странице несколько однотипных форм и нужно отследить какая из них наиболее популярна. Делается это с помощью типа hidden.

<input type="hidden" name="numForm" value="Первая форма">

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

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

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

Делается скрытое поле с тем же name, что и у чекбокса.

<input type="hidden" name="rules" value="0">
<label><input type="checkbox" name="rules" value="1"> I agree with the rules</label>

Когда чекбокс отмечен, значение rules будет равно 1. А когда не отмечено — 0 из скрытого поля.

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

Атрибуты для валидации данных

Их довольно много, поэтому рассмотрим лишь самые используемые.

• checked — для отметки чекбокса по умолчанию
• disabled — делает поле недоступным для редактирования
• required — требует, чтобы поле было заполнено
• tabindex — порядок перемещения фокуса с помощью клавиши Tab
• placeholder — подсказка в поле
• maxlength — максимальное кол-во символов в текстовом поле
• minlength — минимальное кол-во символов
• max — для числовых полей — максимальное значение
• min — для числовых полей — минимальное значение
• value — значение по умолчанию

Все эти атрибуты и типы полей нужны для того, чтобы обеспечить возможность ввода корректных данных пользователем. В HTML 5 их много и это очень хорошо. Раньше приходилось решать подобные задачи с помощью сложного html-кода и JavaScript-программирования. Сейчас же достаточно поиграть html-атрибутами.

Задания

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