<input type="hidden">

<input> элементы типа hidden позволяют веб-разработчикам включать данные, которые не видны и не могут быть изменены пользователями при отправке формы. Например, идентификатор контента, который в настоящее время заказывается или редактируется, или уникальный токен безопасности. Скрытые поля ввода полностью невидимы на рендеренной странице, и нет способа сделать их видимыми в содержимом страницы.

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

Помимо атрибутов, общих для всех элементов <input>, поля ввода hidden предлагают следующие атрибуты.

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

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

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

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

Идея в том, что во время этапа 2 идентификатор записи, которая обновляется, сохраняется в скрытом поле ввода. Когда форма отправляется на этапе 3, идентификатор автоматически отправляется обратно на сервер вместе с содержимым записи. Идентификатор позволяет компоненту серверной части сайта точно определить, какую запись нужно обновить с помощью переданных данных.

Полный пример того, как это может выглядеть, вы можете увидеть в разделе Примеры ниже.

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

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

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

Давайте рассмотрим, как мы можем реализовать простую версию формы редактирования, о которой мы говорили ранее (см. Отслеживание отредактированного содержимого), используя скрытое поле ввода для запоминания идентификатора редактируемой записи.

Форма редактирования HTML может выглядеть примерно так:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</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;
}

Сервер установит значение скрытого поля ввода с идентификатором "postID" в идентификатор поста в своей базе данных перед отправкой формы в браузер пользователя и будет использовать эту информацию при возвращении формы, чтобы определить, какую запись базы данных обновить с измененной информацией. Для этого не требуется скриптинг в содержании.

Вывод выглядит следующим образом:

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

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

Несмотря на то, что скрытое поле ввода вообще не видно, его данные все равно отправляются.

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