Атрибут value (по-русски «значение») хранит значение элемента: текст в поле, данные, которые уйдут на сервер вместе с формой, или число, с которого начнётся нумерация списка. Смысл value зависит от тега, в котором он прописан, а сам атрибут есть всего у восьми тегов: <input>, <button>, <option>, <li>, <progress>, <meter>, <data> и <param>. У <output> значение есть только в скрипте, а у <textarea> и <select> атрибута value нет вообще.
В этой статье
- Атрибут value в HTML: что это и для чего нужен
- Для каких тегов нужен атрибут value
- Почему атрибут value не работает у textarea, select, div и a
- Атрибут value у input: значение поля по умолчанию
- Что будет, если в value записать неподходящее значение
- Атрибут value и свойство value в JavaScript: чем отличаются
- Кавычки в атрибуте value: как вывести значение из PHP и не сломать разметку
- Атрибут value у checkbox и radio: что уходит на сервер
- Атрибут value у button и input submit: надпись и данные формы
- Атрибут value у option и select: выбор из списка
- Атрибут value у li: нумерация списка с нужного числа
- Атрибут value у progress и meter: заполнение шкалы
- Атрибут value у data: значение для программы рядом с текстом
- Чем value отличается от placeholder: что уходит на сервер
- Частые ошибки с атрибутом value
- Шпаргалка по атрибуту value
Атрибут value в HTML: что это и для чего нужен
Слово value переводится как «значение». Атрибут отвечает на вопрос «что записано в элементе»: у поля это текст, у кнопки надпись или данные, у пункта списка его номер. Записывают value одинаково везде: слово value, знак равенства и значение в кавычках внутри открывающего тега.
<input value="Иван">
<input type="submit" value="Оформить заказ">
<select>
<option value="msk">Москва</option>
<option value="spb">Санкт-Петербург</option>
</select>
<ol>
<li value="10">Первый</li>
<li>Второй</li>
</ol>Выберите другой город: под списком показано значение value выбранного пункта, а не слово, которое видит посетитель.
Одно и то же слово делает разные вещи. В поле оно задаёт текст, который уже написан при открытии страницы. У кнопки отправки становится её надписью, у пункта списка служит данными для сервера, а у <li> переписывает номер. Подробности по каждому тегу идут дальше по порядку.
Для каких тегов нужен атрибут value
В стандарте HTML атрибут value есть у восьми тегов. Таблица показывает, что он задаёт у каждого, уходит ли на сервер вместе с формой и как это записать.
| Тег | Что задаёт value | Уходит на сервер | Пример записи |
|---|---|---|---|
<input> | Начальный текст поля, надпись кнопки или данные флажка | Да, вместе с формой | <input name="city" value="Одесса"> |
<button> | Данные, которые уйдут, если нажата именно эта кнопка | Да, если у кнопки есть name | <button name="act" value="save">Сохранить</button> |
<option> | Данные пункта списка | Да, если пункт выбран | <option value="msk">Москва</option> |
<li> | Номер пункта в нумерованном списке | Нет | <li value="10">Десятый</li> |
<progress> | Сколько уже выполнено | Нет | <progress max="100" value="40"></progress> |
<meter> | Текущее значение шкалы | Нет | <meter min="0" max="100" value="40"></meter> |
<data> | Значение для программы рядом с обычным текстом | Нет | <data value="4607001234567">Клавиатура</data> |
<param> | Значение параметра для тега object | Нет | <param name="autoplay" value="true"> |
Тега <output> в таблице нет: у него есть свойство value, которое читает и меняет скрипт, но атрибута value в разметке нет. Тег <param> относится к устаревшему способу встраивать плагины и сейчас нужен редко, поэтому отдельного раздела ему ниже не отведено.
Почему атрибут value не работает у textarea, select, div и a
Если прописать value тегу, у которого такого атрибута нет, браузер не покажет ошибку и ничего не сделает: слово просто останется в разметке. Ниже пять таких записей и то, что выдаёт скрипт, когда читает у этих элементов свойство value.
<div value="5"></div>
<a href="#" value="5">Ссылка</a>
<form value="5"></form>
<select value="b">
<option value="a">A</option>
<option value="b">B</option>
</select>
<textarea value="Привет"></textarea>У первых трёх элементов свойства value нет совсем (undefined). У списка выбран первый пункт, а не B, у текстового поля пусто.
Для каждого случая есть своя запись. Текст внутри <textarea> пишут между открывающим и закрывающим тегами: <textarea>Привет</textarea>. Выбранный пункт в <select> задаёт атрибут selected у нужного <option>. Если нужно хранить собственные данные на любом элементе, прописывайте data-атрибуты: у <div>, <span> и других тегов они работают без ограничений.
Атрибут value у input: значение поля по умолчанию
Чаще всего value встречается у <input>. Здесь его смысл зависит от значения атрибута type: в одном поле это текст, в другом надпись кнопки, в третьем данные для сервера.
| Значение type | Что делает value | Пример записи |
|---|---|---|
text, search, tel, url, email, password | Начальный текст в поле | <input type="text" name="city" value="Одесса"> |
number, range, date, time | Начальное значение в нужном формате; неподходящее браузер отбрасывает | <input type="number" name="qty" value="5"> |
hidden | Данные, которые уйдут с формой, хотя посетитель их не видит | <input type="hidden" name="id" value="25"> |
submit, reset, button | Надпись на кнопке | <input type="submit" value="Найти"> |
checkbox, radio | Данные, которые уйдут, если поле отмечено | <input type="radio" name="pay" value="card"> |
image | Не используется: на сервер уходят координаты клика, а не value | <input type="image" name="go" src="go.png" alt="Найти"> |
file | Нельзя: скрипт получает ошибку при попытке записать значение | <input type="file" name="doc"> |
<form>
<input name="city" value="Одесса">
<input type="password" name="pass" value="12345">
<input type="hidden" name="id" value="25">
<button type="submit">Показать, что уйдёт</button>
</form>Нажмите кнопку: в форму попали все три значения, включая скрытое поле и пароль без всякого шифрования.
Из примера видно две вещи. Скрытое поле не видно на странице, зато его значение отправляется вместе с остальными. А значение пароля находится в коде страницы открытым текстом, поэтому реальный пароль в value не прописывают никогда. Другие виды полей разобраны в уроке «Поля ввода: input и его типы ».
Что будет, если в value записать неподходящее значение
Браузер не сообщает об ошибке в value: он молча подгоняет значение под вид поля. В разметке атрибут остаётся таким, как вы его написали, а меняется то, что видит посетитель и что читает скрипт.
<input type="number" value="abc">
<input type="range" max="100" value="150">
<input type="email" value=" a@b.c ">
<input type="date" value="zzz">
<input value="a b">Справа от каждого поля показано значение, которое прочитал скрипт. Числа с буквами и дата в неверном формате превратились в пустую строку.
Правила такие. Поле number не принимает буквы, и значение становится пустым. Ползунок range выбирает ближайшее допустимое значение, поэтому 150 при максимуме 100 превращается в 100. В поле email пробелы по краям отбрасываются, а в date неверная запись даёт пустое поле. В обычном текстовом поле перенос строки пропадает: из «a» и «b» получается «ab». Ещё одно отличие: атрибут maxlength значение в разметке не обрезает, он работает только при вводе.
Атрибут value и свойство value в JavaScript: чем отличаются
Путаница между атрибутом и свойством чаще всего приводит к вопросу «почему value не меняется». Атрибут value в разметке задаёт начальное значение. Свойство value в JavaScript показывает то, что находится в поле прямо сейчас. Третье название, defaultValue, возвращает начальное значение, то есть то, что записано в атрибуте.
<form id="f">
<input id="i" value="Привет">
</form>
<script>
const i = document.getElementById('i');
i.value = 'JS'; // поле показывает JS
i.setAttribute('value', 'Attr'); // поле всё равно показывает JS
console.log(i.value); // JS
console.log(i.defaultValue); // Attr
f.reset(); // поле снова показывает Attr
</script>Нажмите кнопки по очереди: запись через i.value меняет только поле, а setAttribute после этого меняет только атрибут.
Пока в поле никто ничего не вводил и скрипт не записывал в value, setAttribute меняет и атрибут, и поле. Как только текст появился, поле перестаёт зависеть от атрибута: setAttribute меняет только начальное значение, а кнопка сброса формы возвращает поле к этому новому начальному значению. Запись value скриптом не вызывает события input и change, их вызывает только сам посетитель.
В библиотеке jQuery то же разделение: метод val() читает и записывает текущий текст, а attr('value') возвращает начальное значение, которое не меняется при вводе.
| Задача | Как записать | Пример записи |
|---|---|---|
| Прочитать, что ввёл посетитель | input.value | const text = input.value; |
| Записать новое значение в поле | input.value = ... | input.value = 'Одесса'; |
| Узнать начальное значение | input.defaultValue или getAttribute | input.getAttribute('value') |
| Изменить начальное значение | setAttribute | input.setAttribute('value', 'Киев') |
| Вернуть поля к начальным значениям | form.reset() | document.forms[0].reset(); |
| Очистить поле | input.value = "" | input.value = ''; |
| То же в jQuery | .val() | $('#city').val('Одесса'); |
Кавычки в атрибуте value: как вывести значение из PHP и не сломать разметку
Если значение приходит из базы данных или от посетителя, внутри него могут оказаться кавычки. Одна лишняя кавычка закрывает атрибут раньше времени, и остаток текста превращается в лишние атрибуты.
<input value="Say "hi" now">
<input value="Say "hi" now">В первом поле значение оборвалось на кавычке, а слова hi и now стали лишними атрибутами. Во втором поле текст записан целиком.
Чтобы этого не случилось, выводимый текст экранируют: кавычку заменяют на ", амперсанд на &, знаки меньше и больше на < и >. В PHP это делает функция htmlspecialchars. Начиная с PHP 8.1 она по умолчанию заменяет и двойные, и одинарные кавычки, а в старых версиях нужно явно указать флаг ENT_QUOTES. Атрибут при этом всегда записывают в кавычках: без них значение «hello world» превращается в value со словом hello и отдельный атрибут world.
<?php $city = 'Say "hi" & it\'s <b>'; ?>
<input name="city" value="<?= htmlspecialchars($city, ENT_QUOTES, 'UTF-8') ?>">Результат этого кода: <input name="city" value="Say "hi" & it's <b>">. Тот же принцип работает и в JavaScript, если собирать разметку строкой. Если же записывать текст свойством, например input.value = text, экранировать ничего не нужно: такой текст браузер не разбирает как разметку.
Атрибут value у checkbox и radio: что уходит на сервер
У флажка и переключателя value не виден на странице, зато именно он попадает на сервер. Если value не прописан, браузер отправит слово on, а снятый флажок не уйдёт в форму совсем.
<form>
<input type="checkbox" name="news"> Рассылка
<input type="checkbox" name="agree" value="yes"> Согласие
<input type="radio" name="pay" value="card"> Картой
<input type="radio" name="pay" value="cash"> Наличными
<button type="submit">Отправить форму</button>
</form>Сначала нажмите кнопку без единой отметки: форма пустая. Потом отметьте поля и отправьте ещё раз.
У группы переключателей с одинаковым name уходит только отмеченный. Узнать в скрипте, отмечено ли поле, по value нельзя: оно не меняется, у флажка без value там всегда on. Для этого читают свойство checked.
Атрибут value у button и input submit: надпись и данные формы
У input с типом submit, reset или button value служит надписью, а у тега <button> надпись пишут между тегами, и value остаётся данными. Форма отправляет value только от той кнопки, которую нажали, и только если у неё есть name.
<form>
<input name="q" value="html">
<button name="act" value="save">Сохранить</button>
<button name="act" value="del">Удалить</button>
<button>Без name и value</button>
<input type="submit" name="go" value="Найти">
<input type="submit">
</form>Нажимайте кнопки по очереди и смотрите на результат. У последней кнопки value нет, поэтому надпись на ней браузер выбрал сам, в зависимости от своего языка.
Две кнопки с одним name и разным value удобны, когда форма делает два действия: сервер по значению act понимает, какую кнопку нажали. Если же у кнопки нет name или value, в форму уходят только поля, как показала третья кнопка.
Атрибут value у option и select: выбор из списка
Значение выбранного пункта сервер получает из атрибута value у <option>. Если value у пункта нет, на сервер уходит его текст, причём пробелы по краям убираются, а несколько пробелов подряд склеиваются в один.
<form>
<select name="city">
<option value="msk">Москва</option>
<option>Санкт-Петербург</option>
<option value="">Выберите город</option>
<option> Нижний Новгород </option>
</select>
</form>Выберите каждый пункт, потом нажмите кнопку: у всех пунктов исчезнет value, и в форму уйдут их тексты, в том числе «Выберите город».
Пустое value="" пригодится для первого пункта «Выберите город»: оно отправляет пустую строку, и серверу видно, что выбор не сделан. Прочитать выбранное значение в скрипте можно через свойство value самого тега <select>. Как устроены выпадающие списки в целом, объясняет урок «Выпадающий список в HTML: select и option ».
Атрибут value у li: нумерация списка с нужного числа
Атрибут value у <li> переписывает номер пункта в нумерованном списке, и все следующие пункты продолжают счёт от него. Работает это только внутри тега <ol>.
<ol>
<li>Первый</li>
<li value="10">Второй</li>
<li>Третий</li>
<li>Четвёртый</li>
</ol>
<ul>
<li value="10">Второй</li>
</ul>Выберите значение для второго пункта. Номера ниже пересчитаются, а в списке ul ничего не меняется, потому что там нет номеров.
Отрицательные числа и ноль допустимы, дробная часть отбрасывается, а нечисловое значение игнорируется, как будто атрибута нет. Не путайте value с атрибутом start: start прописывают тегу <ol>, чтобы начать весь список с другого числа, а value относится к одному пункту. Об остальном содержимом списков написано в уроке «Тег li: что можно записать внутри списка ».
Атрибут value у progress и meter: заполнение шкалы
У тегов <progress> и <meter> value показывает, насколько заполнена шкала. Максимум задаёт атрибут max (по умолчанию 1), а value не может его превысить.
<progress max="100" value="60"></progress>
<meter max="100" value="60"></meter>
<progress max="100"></progress>Двигайте ползунок: значение выше 100 шкала не показывает. Флажок убирает value, и progress сообщает, что объём работы неизвестен.
У progress без value шкала считается неопределённой: браузер показывает анимацию ожидания, а свойство position равно минус единице. У meter без value шкала просто остаётся пустой. Шкалы и их оформление разобраны в уроке «Ход выполнения задачи: тег progress ».
Атрибут value у data: значение для программы рядом с текстом
Тег <data> связывает видимый текст со значением, которое нужно программе: артикулом, кодом, датой в машинном формате. Посетитель видит только текст внутри тега, а скрипт читает value.
<data value="978-5-17-080115-2">Книга по вёрстке</data>
<script>
const d = document.querySelector('data');
console.log(d.value); // 978-5-17-080115-2
console.log(d.textContent); // Книга по вёрстке
</script>Нажимайте «Прочитать»: скрипт получает и артикул из value, и текст, который видит посетитель.
По стандарту у data атрибут value обязателен. Для значений, которые связаны с датой и временем, есть отдельный тег <time>.
Чем value отличается от placeholder: что уходит на сервер
Новички часто записывают в value подсказку, которая должна быть видна в пустом поле. Value содержит настоящие данные, которые посетителю придётся стереть, а placeholder только показывает серый текст-подсказку, пока поле пустое, и данными не является.
<form>
<input type="text" name="a" value="Иван">
<input type="text" name="b" placeholder="Иван">
<button type="submit">Отправить</button>
</form>Нажмите кнопку, не меняя полей: первое поле отправило слово «Иван», второе пустую строку, потому что подсказка не является данными.
Если поле пустое, на сервер уйдёт пустая строка, а не текст подсказки. Значение по умолчанию на случай, когда посетитель ничего не ввёл, добавляют на сервере или записывают в value.
Частые ошибки с атрибутом value
Почти все ошибки с value сводятся к тому, что от атрибута ждут больше, чем он умеет: читать текущий ввод, проверять данные или работать на теге, где его нет. В таблице собраны такие записи и то, к чему они приводят.
| Запись | Что получится | Как правильно |
|---|---|---|
input.getAttribute('value') для чтения введённого текста | Вернётся начальное значение, а не то, что набрал посетитель | Читать input.value |
input.setAttribute('value', ...) для поля, где уже вводили текст | Поле останется прежним, изменится только начальное значение | Писать input.value = ... |
value="Say "hi"" | Значение обрывается на второй кавычке, остаток становится лишними атрибутами | Заменить кавычки на " или использовать htmlspecialchars |
value=hello world без кавычек | Значением станет только hello, слово world превратится в отдельный атрибут | Всегда записывать значение в кавычках |
value у <textarea> | Атрибут игнорируется, поле остаётся пустым | Писать текст между тегами |
value у <select> | Атрибут игнорируется, выбран первый пункт | Прописать selected нужному <option> |
value у <div>, <a> или <span> | Ничего не происходит, у свойства value нет смысла | Использовать data-атрибуты |
<input type="number" value="abc"> | Поле останется пустым | Записать число |
<input maxlength="3" value="abcdef"> | Начальное значение не обрезается | Следить за длиной в самом значении |
| Флажок без value | На сервер уйдёт слово on | Задать value: <input type="checkbox" name="agree" value="yes"> |
| Проверять value у флажка, чтобы понять, отмечен ли он | Значение не меняется, по нему отмеченность не определить | Читать input.checked |
input.value = undefined | В поле появится слово undefined | Записывать пустую строку: input.value = '' |
<input type="password" value="12345"> с реальным паролем | Пароль виден любому в коде страницы | Не прописывать пароль в value |
<li value="10"> внутри <ul> | Атрибут игнорируется, номеров в списке нет | Использовать <ol> |
<input type="image" value="Найти"> | На сервер уходят координаты клика, а не value | Прописать name и читать name.x и name.y |
Шпаргалка по атрибуту value
Когда нужно быстро вспомнить запись, ищите задачу в левом столбце. Правый столбец ведёт на отдельную страницу справочника.
| Что нужно | Что прописать | Тег |
|---|---|---|
| Начальный текст в поле | <input name="city" value="Одесса"> | <input> |
| Надпись на кнопке отправки | <input type="submit" value="Найти"> | <input> |
| Данные скрытого поля | <input type="hidden" name="id" value="25"> | <input> |
| Данные флажка | <input type="checkbox" name="agree" value="yes"> | <input> |
| Данные пункта списка | <option value="msk">Москва</option> | <option> |
| Какая кнопка нажата | <button name="act" value="save"> | <button> |
| Нумерация с нужного числа | <li value="10"> | <li> |
| Заполнение шкалы | <progress max="100" value="40"> | <progress> |
| Значение для программы | <data value="4607001234567"> | <data> |
| Прочитать, что ввёл посетитель | input.value | <input> |
