<input type="hidden"> значение атрибута

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

Значение

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

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

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

name

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