Скрытые поля (input type='hidden')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 29
Автор
Рек. время прохождения 2 минуты
Упражнений 6
Комментарии 0
Тренажер HTML
В этом наборе заданий мы поработаем со скрытыми полями в формах. Скрытые поля — это элементы `<input>`, которые не видны пользователю на странице, но их данные всё равно отправляются на сервер вместе с остальной информацией из формы. Зачем они нужны? Часто требуется передать служебную информацию, которую пользователь не должен видеть или изменять. Например, это может быть ID пользователя, номер заказа, специальный ключ безопасности (CSRF-токен) или источник, с которого была отправлена форма. В этих упражнениях вы научитесь создавать и правильно настраивать скрытые поля для передачи таких данных, невидимых глазу, но важных для логики веб-приложения.
Список тем

Создание первого скрытого поля

id: 37861_hidden-input-1

Формы могут содержать не только видимые поля, но и скрытые, которые нужны для отправки служебной информации. Давайте создадим простое скрытое поле. Для этого нужно указать правильное значение для атрибута `type`.

CSS
form {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.info {
  font-family: sans-serif;
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-bottom: 15px;
}
HTML
<form action="#" method="post">
  <p class="info">Эта форма отправит скрытые данные</p>

  <!-- Передаем ID пользователя, который не должен быть виден -->
  <input type="input1" name="user_id" value="12345">

  <button type="submit">Отправить</button>
</form>
Чтобы сделать поле ввода невидимым для пользователя, но при этом отправлять его данные на сервер, используйте атрибут `type` со значением `hidden`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут name для скрытого поля

id: 37861_hidden-input-2

Чтобы сервер понял, какие именно данные ему пришли, каждое поле формы, включая скрытое, должно иметь имя. Добавьте атрибут `name`, чтобы присвоить имя нашему скрытому полю.

CSS
form {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.info {
  font-family: sans-serif;
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-bottom: 15px;
}
HTML
<form action="#" method="post">
  <p class="info">Отправляем ID товара в корзину</p>

  <!-- Укажите имя для этого поля, чтобы сервер знал, что это ID товара -->
  <input type="hidden" input1="product_id" value="tz-459">

  <button type="submit">Добавить в корзину</button>
</form>
Для идентификации данных поля на сервере используется атрибут `name`. Например, `name="product_id"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Передача значения через value

id: 37861_hidden-input-3

Скрытое поле бесполезно без данных, которые оно передаёт. Эти данные указываются в атрибуте `value`. Добавьте в код необходимый атрибут для передачи значения.

CSS
form {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.info {
  font-family: sans-serif;
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-bottom: 15px;
}
HTML
<form action="#" method="post">
  <p class="info">Форма с секретным токеном</p>

  <!-- Укажите атрибут, который хранит значение этого поля -->
  <input type="hidden" name="csrf_token" input1="a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8">

  <button type="submit">Сохранить</button>
</form>
Чтобы задать отправляемое значение для любого поля ввода, используется атрибут `value`. Например, `value="some-secret-code"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Удаление элемента с подтверждением

id: 37861_hidden-input-5

Представьте, что пользователь хочет удалить свой комментарий. На сервер нужно отправить ID этого комментария, чтобы система знала, что удалять. Добавьте в форму скрытое поле, которое будет содержать `comment_id`.

CSS
.comment-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  max-width: 320px;
}

.comment-author {
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-text {
  margin-bottom: 15px;
  color: #333;
}

.delete-btn {
  padding: 8px 12px;
  border: none;
  background-color: #dc3545;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #c82333;
}
HTML
<div class="comment-card">
  <p class="comment-author">Алексей</p>
  <p class="comment-text">Отличная статья, спасибо!</p>
  <form action="#" method="post">
    <!-- Сюда нужно добавить скрытое поле с ID комментария -->
    <input type="input1" name="input2" value="891">
    <button type="submit" class="delete-btn">Удалить</button>
  </form>
</div>
Вам нужно вставить тег `<input>` и правильно указать его тип (`hidden`), имя (`name`) и значение (`value`). ID комментария уже дан в коде.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отправка нескольких скрытых полей

id: 37861_hidden-input-6

Иногда в одной форме нужно передать несколько служебных параметров. В этой форме для редактирования профиля нужно передать ID пользователя и токен сессии. Дополните оба скрытых поля, указав для них правильный тип.

CSS
form {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
}

label,
input[type="text"] {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
}

input[type="text"] {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
HTML
<form action="#" method="post">
  <label for="name">Ваше имя:</label>
  <input type="text" id="name" name="user_name" value="Екатерина">

  <!-- ID пользователя для отправки на сервер -->
  <input input1="hidden" name="user_id" value="92">

  <!-- Токен сессии для безопасности -->
  <input input2="hidden" name="session_token" value="b9f8-d6a4-c3b2-a1e0">

  <button type="submit">Сохранить изменения</button>
</form>
Для обоих тегов `<input>` используйте `type="hidden"`, чтобы скрыть их от пользователя.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Скрытое поле для UTM-метки

id: 37861_hidden-input-7

В маркетинге часто используют UTM-метки для отслеживания источников трафика. Давайте добавим в форму заказа скрытое поле, которое будет передавать UTM-метку. Создайте полный тег `input`, который будет невидим и будет передавать имя `utm_source` со значением `promo_email`.

CSS
form {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  max-width: 320px;
  font-family: sans-serif;
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #ffc107;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #e0a800;
}
HTML
<form action="#" method="post">
  <p class="product-title">Заказ товара 'Супер-гаджет'</p>

  <!-- Добавьте сюда скрытое поле для отслеживания источника заказа -->
  <input1 type="hidden" name="utm_source" value="promo_email">

  <button type="submit">Оформить заказ</button>
</form>
Вам нужно создать тег `<input>` с тремя атрибутами: `type="hidden"`, `name="utm_source"` и `value="promo_email"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру