<input type="hidden">

Елементи <input> типу hidden (прихований) дають веброзробникам змогу включати дані, що не можуть бути ані побачені, ані змінені користувачем, коли форма подається. Наприклад, ідентифікатор вмісту, що наразі впорядковується або редагується, або таємний ключ безпеки. Прихованих полів не видно на відтвореній сторінці, і не існує способу зробити їх видимими у вмісті сторінки.

[!NOTE] Події input і change не застосовуються до полів цього типу. Прихованим полям не можна передати фокус, навіть за допомогою JavaScript (наприклад, hiddenInput.focus()).

Значення

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

[!WARNING] Хоч це значення не видно користувачеві серед вмісту сторінки, його можна побачити та відредагувати за допомогою інструментів розробника в будь-якому браузері або функціональності "Переглянути вихідний код". Не слід покладатися на поля hidden як на інструмент захисту.

Додаткові атрибути

На додачу до атрибутів, спільних для всіх елементів <input>, поля hidden приймають наступні.

name

Фактично це один зі спільних атрибутів, але для прихованих полів він має особливе значення. Зазвичай атрибут name діє на прихованих полях як на будь-яких інших. Проте коли форма подається, то приховане поле, чий атрибут name має значення _charset_, автоматично подається зі значенням кодування символів, що використовувалося при поданні форми.

Застосування прихованих полів

Як писалося вище, приховані поля можуть використовуватися будь-де, де необхідно включити дані, котрі користувач не повинен бачити та змінювати, у форму при її поданні на сервер. Погляньмо на кілька прикладів, що ілюструють таке використання.

Відстеження редагованого вмісту

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

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

Ідея тут полягає в тому, що під час кроку 2 ідентифікатор оновлюваного запису зберігається в прихованому полі. Коли на кроці 3 подається форма, то ідентифікатор автоматично надсилається назад на сервер, з вмістом запису. Ідентифікатор дає компонентові на серверному боці знати про те, який саме запис слід оновити надісланими даними.

Повний приклад того, який вигляд це може мати, присутній в розділі Прикладів нижче.

Покращення захищеності вебсайту

Приховані поля також використовуються для зберігання та подання ключів безпеки, секретів, для потреб покращення захищеності вебсайту. Суть полягає в тому, що якщо користувач заповнює форму з потаємними даними, як то форму на вебсайті свого банку для переказу певних коштів на інший обліковий запис, то наданий секрет підтвердив би, що користувач є особою, за яку себе видає, і що для запиту на переказ використовується коректна форма.

Це запобігло б від надсилання користувачем-зловмисником підробної форми, що імітувала б банк, і надсилання цієї форми електронною поштою користувачам, які нічого не підозрюють, аби ті переказали свої гроші не туди. Атаки такого роду звуться підробкою міжсайтових запитів (CSRF); практично всі авторитетні серверні фреймворки використовують для запобігання таким атакам приховані секрети.

[!NOTE] Поміщення секрету в приховане поле саме по собі не робить форму захищеною. Це роблять композиція та кодування ключа. Цінність прихованого поля полягає в тому, що воно вміщає секрет, пов'язаний з даними, і автоматично додає цей секрет до форми при її надсиланні на сервер. Для реального захисту вебсайту необхідні добре продумані секрети.

Валідація

Приховані поля не беруть участь в валідації обмежень; вони не мають значень, котрі можна було б обмежувати.

Приклади

Погляньмо на те, як можна було б реалізувати просту версію форми редагування, описаної вище (дивіться у Відстеженні редагованого вмісту), використовуючи приховане поле, аби запам'ятати ідентифікатор запису, що редагується.

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:

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 – на основі ідентифікатора допису у своїй базі даних, перед надсиланням форми в браузер користувача, і використає ці дані, коли форма повернеться, аби дізнатися, який запис у базі даних оновлювати зміненою інформацією. Для обробки цього не потрібний жодний додатковий код.

Вивід матиме такий вигляд:

[!NOTE] Також цей приклад можна знайти на GitHub (дивіться його вихідний код, а також цей приклад в дії).

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

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, на якому він заснований