Атрибут value тега <input>
Описание
Атрибут value задаёт начальное значение элемента <input>. Значение может быть изменено пользователем или программно через JavaScript. Для разных типов input значение интерпретируется по-разному.
<!-- Текстовое поле с начальным значением -->
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" value="Гость">
<!-- Радиокнопка с предвыбранным значением -->
<label>Пол:</label>
<input type="radio" name="gender" value="male" checked> Мужской
<input type="radio" name="gender" value="female"> Женский
Особенности для разных типов:
| Тип | Формат value | Пример |
|---|---|---|
| text, password, email, tel, url | Строка | value="Пример" |
| number, range | Число | value="25" |
| checkbox, radio | Отправляемое значение | value="yes" |
| date | ГГГГ-ММ-ДД | value="2023-12-31" |
| time | ЧЧ:ММ | value="14:30" |
| color | HEX-цвет | value="#ff0000" |
| hidden | Любые данные | value="secret_token" |
Пример динамического изменения:
<label for="counter">Счётчик:</label>
<input type="number" id="counter" name="counter" value="0">
<button onclick="increment()">+1</button>
<script>
function increment() {
const counter = document.getElementById('counter');
counter.value = parseInt(counter.value) + 1;
}
</script>
Рекомендации:
- Используйте для предзаполнения часто вводимых значений
- Для дат используйте текущую дату как начальное значение
- Для чекбоксов/радиокнопок сочетайте с
checked - Не используйте для паролей и конфиденциальных данных
- Проверяйте формат для специальных типов (date, time, color)
Пример с временными данными:
<label for="meeting-time">Время встречи:</label>
<input type="time" id="meeting-time" name="meeting-time"
value="09:00" min="09:00" max="18:00">
<script>
// Установка текущего времени + 1 час
const now = new Date();
now.setHours(now.getHours() + 1);
document.getElementById('meeting-time').value =
now.toTimeString().substring(0, 5);
</script>
Ограничения:
- Не работает для
type="file" - Для
type="range"требуется указать min/max - В старых браузерах могут быть проблемы с форматами дат
- Значение может быть изменено пользователем
Пример с чекбоксами:
<label>Дополнительные услуги:</label><br>
<input type="checkbox" id="warranty" name="options" value="warranty" checked>
<label for="warranty">Гарантия (+500р)</label><br>
<input type="checkbox" id="delivery" name="options" value="delivery">
<label for="delivery">Доставка (+300р)</label>
Примечание: Атрибут value является важным инструментом для управления начальным состоянием формы. Для динамических значений рассмотрите возможность установки через JavaScript после загрузки страницы.