html form скрытое поле
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Скрытое поле в форме html
Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать. Цель разработки скрытых полей — в передаче технической информации на сервер. В большинстве случаев это необходимо для передачи данных формы от страницы к странице.
Синтаксис разработки скрытого поля.
name — имя поля, которое позволяет программе идентифицировать его.
value — значение поля определяет какая информация будет отправлена на сервер.
Вариант использования скрытого поля показан в примере 1.
С помощью HTML hidden разработчики веб-форм могут хранить и отправлять информацию, скрытую от пользователей.
Скрытые поля можно использовать для сохранения текущего состояния многостраничных форм, собирать cookie-файлы для отправки вместе с формой, а также хранить данные, которые не вводятся пользователем.
Примечание : Не забывайте, что скрытые поля нельзя назвать полностью скрытыми — они просто недоступны большинству пользователей, но легко просматриваются в исходном коде страницы. Поэтому никогда не храните в них пароли или другие конфиденциальные данные.
Пример использования атрибута hidden в теге Input
Синтаксис использования hidden HTML input должен соответствовать строке, выделенной в коде, приведенном ниже в качестве примера:
Можно использовать hide HTML для хранения даты и времени ( в примере это сделано с помощью MySQL ):
В PHP можно воспользоваться следующим методом:
Это поле является невидимым, но его пользу переоценить сложно. Его так и называют – скрытое поле. Используют его в тех ситуациях, когда необходимо, помимо введенной пользователем информации, переслать еще и какие-то служебные данные, которые ему указывать не требуется.
Например, к таковым данным могут быть отнесены реквизиты заказа или порядковый номер заказа пользователя. То есть Вы сначала выбираете товары в интернет-магазине, складываете их в корзину. На сервере при этом запоминаются эти товары и хранятся в виде сущности «заказ«. В нём-то и содержатся все товары, итоговая стоимость, возможно что-то ещё. И когда вы готовы оплатить заказ, зачастую вам предлагается нажать только одну кнопку «Оформить заказ», при этом скрыто из этой формы передаётся номер заказа.
Чтобы создать такое поле необходимо прописать тег и указать тип hidden:
Результат в браузере: 
Как видите, поле с orderId не отобразилось, однако его значение будет отправлено на сервер, хоть для нас это и не будет очевидным.
Методы защиты веб-формы без капчи
О чём речь?
В последнее время на Хабре было предложено довольно много идей для капчи. Сложная, умная, смешная, капча остаётся одним из основных способов защиты формы от ботов.
Однако, одновременно с этим, капча является проблемой юзабилити, поскольку заставляет пользователя выполнять лишнее действие.
В этом обзорном посте я бы хотел рассмотреть незаметные для пользователя методы защиты от ботов.
Методы защиты
Минимальное время заполнения формы
Суть метода заключается в том, что сервер замечает время создания формы. Если пользователь заполнил форму меньше чем за определённое время, то он считается ботом. Время можно варьировать в зависимости от сложности формы.
Верно также, что если форма не была заполнена слишком долго, то что-то не так.
Скрытое поле
Этот метод может показаться странным, но он, похоже, работает. К форме добавляется скрытое поле (скрытое в смысле display:none ). Если поле заполнено, то пользователь считается ботом.
Удивительно, но многие простенькие боты заполняют все неизвестные поля.
Обфускация или шифрование HTML
Методы шифрования могут варьироваться от простого эскейпирования значений буковок (буква превращается ‘%код’ ) до некоторых алгоритмов шифрования (например, простенький XOR).
В интернете есть много готовых решений, например, вот тут.
Блокирование определённых user-agent
Некоторые боты используют весьма специфические заголовки user-agent. Можно блокировать запросы не содержащие user-agent вообще или содержащие заведомо плохой заголовок.
В интернете есть списки таких заголовков. Вот, например, от некого Нила Гантона.
«Ловушка» для ботов
Суть этого метода заключается в создании специального раздела сайта вроде «/bot/guestbook». Ссылка на этот раздел не видна для пользователя, однако если бот зайдёт в этот раздел и сделает там хоть что-нибудь, то его IP тут же блокируется.
Раздел должен содержать лакомые для бота слова вроде «email», «submit», «add comment» и тому подобные. Файл «robots.txt» предупреждает хороших ботов.
Хеширование формы (BarsMonster)
При сабмите формы на сервер вычисляется хеш полей формы и добавляется в одно из специальных скрытых полей. Сервер проверяет значение хеша.
Использование прозрачных кнопок (BarsMonster)
Динамическое создание формы (maxshopen)
Сама форма полностью создаётся javascript-методом динамчески. Таким образом, форму может увидить лишь пользователь, у которого отработал соответствующий скрипт.
Использование сторонних сервисов (le0pard)
Можно туннелировать трафик через специальный сервис, предназначенный для анализа контента на спам. Примером такого сервиса может быть Akismet
Гибридный подход
По умолчанию форма защищена каким-либо javascript-методом (динамическое создание формы или шифрование данных) или методом из приведённых выше. Если форма была засабмичена некорректно, то возвращается ошибка и просьба заполнить не очень простую капчу.
Важные замечания
Раз. Приведённые выше методы не являются универсальной защитой от ботов. Они не спасут от прямой атаки, но смогут помочь от ботов-пауков.
Два. Пост не рассматривает слабые стороны методов. Это можно обсудить в комментариях.
Три. Заинтересовавшимся рекомендую почитать пост некого Нила Гантона (на английском).
UPD: Добавил несколько методов из комментариев. Спасибо, BarsMonster.
UPD2: Добавил ещё один метод из комментариев.
Спасибо, maxshopen, за отличную критику методов.
UPD3: Добавил ещё один метод из комментариев. Спасибо, maxshopen.
UPD4: Добавил ещё один метод из комментариев. Спасибо, le0pard.
mprokopov кинул ссылку на спам-блок плагин для рельсов: snook
Заключение
Увы, мне удалось найти не так много методов защиты веб-форм.
А какие ещё безкапчевые методы защиты вы знаете?
Html form скрытое поле
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
Html form скрытое поле
Это поле, которое позволяет выбрать цвет.
Пример
Атрибут value используют для установки исходного цвета, его можно не указывать.
Поле ввода даты
Поле типа date позволяет ввести дату с помощью календаря.
Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.
Пример
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step=»any».
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.
Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.