Скрытое поле | htmlbook.ru
Часто возникает ситуация, когда требуется передать в форме некоторые промежуточные данные, которые не должны изменяться пользователем. Более того, такие данные не должны показываться пользователю, поскольку носят технический характер и обычно служат для передачи некоторой информации от страницы к странице. Для этой цели применяется скрытое поле, оно не отображается на странице и прячет своё содержимое от пользователя. Посетитель не может в него ничего внести или напечатать.
Синтаксис создания скрытого поля.
<input type="hidden" атрибуты>Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя поля для его идентификации обработчиком формы. |
| value | Значение поля, определяющее, какая информация будет отправлена на сервер. |
Пример 1. Использование скрытого поля
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скрытое поле</title>
</head>
<body>
<form action="handler.php" method="post">
<p><b>Напишите любимое слово и нажмите кнопку Отправить
(никакие данные не будут передаваться на сервер!):</b></p>
<p><input size="25" name="word">
<input type="hidden" name="name" value="Vasya">
<input type="hidden" name="password" value="pupkin"></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>В данном примере показано создание двух скрытых полей, одно из них носит имя name и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в атрибуте action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.
Скрытое поле в форме HTML
Это поле является невидимым, но его пользу переоценить сложно. Его так и называют – скрытое поле. Используют его в тех ситуациях, когда необходимо, помимо введенной пользователем информации, переслать еще и какие-то служебные данные, которые ему указывать не требуется.
Например, к таковым данным могут быть отнесены реквизиты заказа или порядковый номер заказа пользователя. То есть Вы сначала выбираете товары в интернет-магазине, складываете их в корзину. На сервере при этом запоминаются эти товары и хранятся в виде сущности «
Чтобы создать такое поле необходимо прописать тег <input> и указать тип hidden:
<form action="/pay" method="post">
<input type="hidden" name="orderId" value="123">
<input type="submit" value="Оформить заказ">
</form>Результат в браузере:
Как видите, поле с orderId не отобразилось, однако его значение будет отправлено на сервер, хоть для нас это и не будет очевидным.
Скрытое поле | WebReference
Часто возникает ситуация, когда требуется передать в форме некоторые промежуточные данные, которые не редактируются пользователем. Более того, такие данные не должны показываться пользователю, поскольку носят технический характер и обычно служат для передачи некоторой информации от страницы к странице. Для этой цели применяется скрытое поле, оно не отображается на странице и прячет своё содержимое от пользователя. Посетитель не может в него ничего внести или напечатать.
Синтаксис создания скрытого поля следующий.
<input type="hidden" атрибуты>Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя поля для его идентификации обработчиком формы. |
| value | Значение поля, определяющее, какая информация будет отправлена на сервер. |
Пример использования скрытых полей приведён в примере 1.
Пример 1. Использование скрытого поля
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скрытое поле</title>
</head>
<body>
<form action="handler.php" method="post">
<p><b>Напишите любимое слово и нажмите кнопку Отправить
(никакие данные не будут передаваться на сервер!):</b></p>
<p><input size="25" name="word">
<input type="hidden" name="name" value="Vasya">
<input type="hidden" name="password" value="pupkin"></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html> В данном примере показано создание двух скрытых полей, одно из них носит имя name и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в атрибуте action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Скрытые поля. HTML, XHTML и CSS на 100%
Вместе с формой можно передавать дополнительную информацию, которая не должна быть видна пользователю.
Для передачи служебной информации используются скрытые поля. Они не видны пользователю, однако информация из них передается обработчику. Такая информация часто носит служебный характер и не связана с данными, вводимыми пользователем. Это может быть, например, идентификатор посетителя в базе данных.
Для создания скрытого поля указывается значение атрибута type=»hidden». Для него нужны только атрибуты name и value – имя и значение переменной, передаваемые обработчику.
В листинге 6.14 представлен пример создания скрытого поля, в котором вы можете передавать идентификатор пользователя.
Листинг 6.14. Скрытые поля
<html>
<head>
<title>Конструирование форм</title>
</head>
<body>
<form action=»test.php» enctype=»multipart/form-data» method=»post» name= «test» target=»_blank»>
<input name=»id_user» type=»hidden» value=»27″ />
</form>
</body>
</html>
Мы разобрались со всеми возможностями элемента INPUT. Дальше рассмотрим поля, которые входят в форму, но создаются с помощью других элементов.
Данный текст является ознакомительным фрагментом.Читать книгу целиком
Поделитесь на страничке Следующая глава >Скрытое поле — База знаний FormDesigner
Дополнительный элемент «Скрытое поле» нужен в основном для того, чтобы передать какие-то дополнительные данные из сайта, где установлена форма в саму форму. Например, название товара или его ID. Пользователю эта информация не нужна, а вот администратору сайта нужно знать. Чтобы добавить элемент «Скртытое поле» в форму, вам необходимо кликнуть на выбранный пункт или перетащите его вправо, тогда справа вы увидите добавленный элемент:
После того, как вы добавили элемент «Скрытое поле», нажмите на иконку «Редактировать» и перед вами откроется всплывающее окно редактирования данного элемента:
Как передать значение в скрытое поле вы можете узнать здесь — «Динамическая подстановка значений в форму».
Как передать значение макросов в скрытое поле
С помощью скрытого поля можно передать несколько значений макросов в модули интеграций. Например, Вам необходимо, чтобы в Битрикс24 передались значения заполненных нескольких полей и выбранный вариант ответа в переключателе из формы, в лишь одно поле Срм системы. В нашем конструкторе можно осуществить такое действие, передав значение скрытого поля, в которое, в свою очередь подставились значения необходимых полей. Для передачи значений полей будем использовать макросы.
Открыв, макросы (список переменных), мы можем выбрать необходимые значения, которые будем передавать в скрытое поле:
Слева расположены макросы, справа — поля из формы. Мы взяли значения макросов и подставили в поле «Значение по умолчанию» в режиме редактирования элемента «Скрытое поле», как на предыдущем скрине. После отправки формы, в статистике и в e-mail уведомление придёт заявка, где в скрытом поле будут заданные данные:
Также, в некоторых ситуациях необходимо передать значения, только если выполнены определённые действия пользователя, т.е. когда он выполнил заданные условия. Например, в логике можно прописать:
Что если, пользователь выбрал: частный дом плюс 10 соток и больше, то только тогда заданные макросы будут переданы в скрытое поле.
Если условие, заданное в логике, не будет выполнено, то в скрытое поле не будут установлены значения макросов. Теперь оперативно можно администратору реагировать на данное поле, например, если он получит данные в этом поле, то будет обрабатывать клиента в первую очередь. Чтобы использовать данные этого поля в модулях интеграции, достаточно указать макрос скрытого поля и соответствующее поле в Срм системе.
Читайте также:
Защита от дурака | htmlbook.ru
«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.
Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.
- Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
- На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
- Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.
Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы — пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.
Обязательное поле
Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required, как показано в примере 1.
Пример 1. Атрибут required
HTML5IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обязательное поле</title>
</head>
<body>
<form>
<p>Логин: <input name="login" required></p>
<p>Пароль: <input type="password" name="login" required></p>
<p><input type="submit" value="Вход"></p>
</form>
</body>
</html>Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.
Рис. 1. Обязательное поле не заполнено
Корректность данных
Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.
- Веб-адрес (<input type=»url»>) должен содержать протокол (http://, https://, ftp://).
- Адрес электронной почты (<input type=»email»>) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.
У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.
В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.
Пример 2. Корректность данных
HTML5IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Корректность данных</title>
</head>
<body>
<form>
<p>Заполните форму (все поля обязательны)</p>
<p>Имя: <input name="name" required></p>
<p>Email: <input type="email" name="email" required></p>
<p>Сайт: <input type="url" name="site" required></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>Opera проверяет элемент формы только при наличии атрибута name.
Что происходит в Opera при вводе неверных данных показано на рис. 2.
Рис. 2. Предупреждение о неправильных данных
Шаблон ввода
Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern, а его значением выступает регулярное выражение. Некоторые типовые значения перечислены в табл. 1.
| Шаблон | Описание |
| ^[a-zA-Z]+$ | Любые латинские буквы. |
| ^[ 0-9]+$ | Любое количество цифр. |
| \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} | IP-адрес. |
| [0-9]{6} | Почтовый индекс. |
| \d+(,\d{2})? | Цена в формате 1,34 (разделитель запятая). |
| \d+(\.\d{2})? | Цена в формате 2.10 (разделитель точка). |
В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.
Пример 3. Шаблон ввода
HTML5IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ввод цвета</title>
</head>
<body>
<form>
<p>Введите шестнадцатеричное значение цвета
(должно начинаться с #)</p>
<p><input name="digit" required pattern="#[0-9A-Fa-f]{6}"></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>На рис. 3 показано предупреждение в браузере Chrome.
Рис. 3. Введённые данные не соответствуют шаблону
Отмена валидации
Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега <form>. В примере 4 показано использование этого атрибута.
Пример 4. Отмена валидации
HTML5IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут novalidate</title>
</head>
<body>
<form novalidate>
<p><input name="user" required placeholder="Ваше имя"></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>Для аналогичной цели применяется и атрибут formnovalidate, который добавляется к кнопке для отправки формы, в данном случае к тегу <input type=»submit»>. В этом случае форма из примера 4 будет иметь следующий вид.
<form>
<p><input name="user" required placeholder="Ваше имя"></p>
<p><input type="submit" value="Отправить" formnovalidate></p>
</form>