<input type="hidden">
=====================

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

**Примечание:** События `input` и `change` не применимы для скрытых полей ввода. Их нельзя взять в фокус даже с помощью JavaScript (например, используя `hiddenInput.focus()`).

Значение
--------

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

**Предупреждение:** Несмотря на то, что поле ввода скрыто от пользователей, оно по-прежнему видимо и доступно для редактирования через консоль разработчика. Не храните конфиденциальную информацию в `input` с типом `hidden`, она не будет как-либо защищена.

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

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

### name

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

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

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

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

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

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

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

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

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

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

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

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

Валидация
---------

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

Примеры
-------

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


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


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


```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 записи блога, чтобы знать, какую часть базы данных следует обновить. Никакого дополнительного клиентского кода для этого не потребуется.

Результат:

**Примечание:** Вы также можете найти данный пример на GitHub (смотрите исходный код, а так же рабочее демо).

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

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

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

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

|  |  |
| --- | --- |
| **Значение** | Строка со скрытыми от пользователя данными. |
| **События** | Нету. |
| **Поддерживаемые общие атрибуты** | `autocomplete` |
| **Атрибуты IDL** | `value` |
| **DOM интерфейс** | `HTMLInputElement` (en-US) |
| **Методы** | Нету. |

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

| Specification |
| --- |
| HTML Standard # hidden-state-(type=hidden) |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Руководство по HTML-формам
* `<input>` и интерфейс `HTMLInputElement` (en-US)