Атрибут value тега <input> — значення поля форми

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

На сервер відправляється пара "ім'я = значення", де ім'я задається атрибутом name елемента <input>, а значення - атрибутом value.

Залежно від типу елемента атрибут value виступає в наступній ролі:

• для кнопок (input type = "button | reset | submit") встановлює текстовий напис на них;
• для текстових полів (input type = "password | text") вказує попередньо введений рядок. Користувач може стирати текст і вводити свої символи, але при використанні в формі кнопки Reset користувальницький текст очищається і відновлюється введений в атрибуті value;
• для прапорців і перемикачів (input type = "checkbox | radio") унікально визначає кожен елемент, з тим, щоб клієнтська або серверна програма могла однозначно встановити, який пункт вибрав користувач.

правити

Загальний опис

правити

Нотатка

Атрибут value не може бути використаний з <input type="file">

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<input value="text">

Атрибут value може отримувати єдине значення:

text

Задає значення елемента <input>

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1+	1+	1+	1+	12+	2+

Підтримка: мобільні переглядачі

Переглядач
	1+	1+	1+	1+

Приклади

+ запропонувати свій приклад у пісочниці

<form>
    <p><b>З використанням атрибута "value"</b></p>
Логін: <input type = "text"  name = "login" value = "test_user"><br><br>
 Пароль: <input type = "text"  name = "password" value = "test_pass"><br><br>
  Повідомлення: <input type = "text"  name = "login" value = "message"><br><br>
    <p><input type="submit" value="Відправити"></p>
  </form>
<br><br>
<form>
    <p><b>Без використання атрибута "value"</b></p>
Логін: <input type = "text"  name = "login" ><br><br>
 Пароль: <input type = "text"  name = "password" ><br><br>
  Повідомлення: <input type = "text"  name = "login" ><br><br>
    <p><input type="submit"></p>
  </form>

<form>
  <p><label>Дата, <code>value="2026-08-03"</code><br>
    <input type="date" value="2026-08-03"></label></p>

  <p class="hyba"><label>Дата, <code>value="03.08.2026"</code> — поле лишилось порожнім<br>
    <input type="date" value="03.08.2026"></label></p>

  <p><label>Колір, <code>value="#0172ad"</code><br>
    <input type="color" value="#0172ad"></label></p>

  <p class="hyba"><label>Колір, <code>value="red"</code> — браузер підставив чорний<br>
    <input type="color" value="red"></label></p>

  <p><label>Число, <code>value="12.5"</code><br>
    <input type="number" step="0.1" value="12.5"></label></p>

  <p class="hyba"><label>Число, <code>value="12,5"</code> — поле порожнє<br>
    <input type="number" step="0.1" value="12,5"></label></p>

  <p><label><code>placeholder</code> замість <code>value</code> — сірий текст, який нікуди не відправиться<br>
    <input type="text" placeholder="Ваше ім'я"></label></p>
</form>

form {
  max-width: 460px;
}
label {
  display: block;
  line-height: 1.5;
}
input {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
}
.hyba {
  border-left: 3px solid #b3261e;
  padding-left: 10px;
}