<input> c атрибутомtype="hidden" скрыт со страницы. Разработчик может использовать его, например, для хранения ID товара, который в данный момент заказывается через форму, или другой сопутствующей информации. Пользователи никак не смогут увидеть это поле ввода через свой интерфейс.

Значение

Для скрытых<input> атрибутvalue хранит непосредственно скрытые данные, которые затем можно отправить на сервер вместе с формой.

Дополнительные атрибуты

В дополнение к атрибутам, общим для всехinput, скрытые поля ввода позволяют иначе использовать следующий атрибут.

name

Скрытыеinput, чьи атрибутыname установлены в_charset_, не должны иметь атрибутvalue. При отправке формы он автоматически будет содержать значение с кодировкой символов, используемых в отправленной форме.

Использование скрытыхinput

Как упоминалось ранее, скрытыеinput можно использовать для хранение данных, которые пользователи не смогут увидеть или изменить через свой интерфейс. Посмотрим на примеры такого применения.

Отслеживание отредактированного контента

Одним из наиболее распространенных способов применения скрытых полей ввода является отслеживание того, какая именно запись базы данных должна быть обновлена после отправки формы. Типичный процесс редактирования выглядит так:

1. Пользователь решает отредактировать контент, например, запись в своём блоге или какое-то описание товара. Он начинает с нажатия на кнопку «Редактировать».
2. Контент для редактирования запрашивается из базы данных и подгружается в HTML форму, чтобы пользователь мог внести изменения.
3. После правок, пользователь отправляет форму, и обновлённые данные отправляются обратно на сервер для обновления базы данных.

Идея в том, чтобы на втором шаге сохранить ID редактируемой записи в скрытыйinput. Когда пользователь отправит форму на третьем шаге, скрытый ID отправится на сервер вместе с новыми данными. Это позволит серверу точно знать, какая именно запись должна быть изменена.

Вы можете посмотреть пример такой логики в секцииПримеры ниже.

Улучшение безопасности веб-сайта

Скрытыеinput также используются для хранения и отправки токенов безопасности. Основная идея заключается в том, что если пользователь заполняет некую конфиденциальную форму, например, в своём банковском аккаунте для перевода денег на другой счёт, ему будет выдан токен безопасности. Этот токен докажет, что отправитель действительно тот, за кого себя выдаёт, и что он использует нужную форму для отправки своего перевода.

Такой приём затрудняет для злоумышленников создание поддельных банковских веб-сайтов, чтобы обманом вынудить жертву перевести деньги не туда. Подобный вид атак называетсяподделкой межсайтовых запросов (CSRF); практически любой крупный серверный фреймворк использует токены безопасности для предотвращения атак этого типа.

Валидация

Скрытыеinput не участвуют в валидации.

Примеры

Посмотрим, как мы могли бы реализовать простую версию формы со скрытымinput для хранения идентификатора редактируемой записи:

<form>  <div>    <label for="title">Заголовок поста:</label>    <input type="text" name="title" value="Мой замечательный пост" />  </div>  <div>    <label for="content">Контент:</label>    <textarea name="content" cols="60" rows="5">Некий контент внутри поста.    </textarea>  </div>  <div>    <button type="submit">Обновить пост</button>  </div>  <input type="hidden" name="postId" value="34657" /></form>

Также добавим немного простого CSS:

html {  font-family: sans-serif;}form {  width: 500px;}div {  display: flex;  margin-bottom: 10px;}label {  flex: 2;  line-height: 2;  text-align: right;  padding-right: 20px;}input,textarea {  flex: 7;  font-family: sans-serif;  font-size: 1.1rem;  padding: 5px;}textarea {  height: 60px;}

Сервер свяжет ID "postId" скрытогоinput с ID записи блога, чтобы знать, какую часть базы данных следует обновить. Никакого дополнительного клиентского кода для этого не потребуется.

Результат:

При отправке на сервер данные формы будут выглядеть примерно так:

title=Мой+замечательный+пост&content=Некий+контент+внутри+поста.&postId=34657

Даже несмотря на то, что скрытыйinput не виден для пользователей при отправке формы, он содержит данные и они всё равно передаются на сервер.

Техническая сводка

Спецификации

Совместимость с браузерами

Смотрите также

• Руководство по HTML-формам
• <input> и интерфейсHTMLInputElement