<input type="hidden">

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

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

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

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

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

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

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

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

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

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

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

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

<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:

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