/ ↲
    Расширенный поиск

    HTML

    Атрибут value

    Атрибут для хранения значения.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Атрибут value можно использовать для разных тегов:

    У разных тегов атрибут отвечает за разные функции.

    Пример

    Скопировано

    В примере ниже нумерация элементов списка начнётся с 5:

            
          
          <ol>  <li value="5">Номер 5</li>  <li>Номер 6</li>  <li>Номер 7</li></ol>
          <ol>
  <li value="5">Номер 5</li>
  <li>Номер 6</li>
  <li>Номер 7</li>
</ol>

    А в этом примере в поле ввода уже будет написано «Дока»:

            
          
          <form>  <label>    Название лучшего справочника по вебу:    <input type="text" value="Дока">  </label>  <button type="submit">Соглашусь!</button></form>
          <form>
  <label>
    Название лучшего справочника по вебу:
    <input type="text" value="Дока">
  </label>
  <button type="submit">Соглашусь!</button>
</form>

    Как пишется

    Скопировано

    <button>

    Скопировано

    Если указать у кнопки атрибут value с каким-то значением, то это значение будет передано на сервер в момент отправки данных из формы. На сервер передаётся пара «имя=значение». Имя кнопки можно задать атрибутом name.

    В примере ниже вместе с данными формы на сервер отправится информация «diversion=Нет!»:

            
          
          <form>  <label>    Соглашаетесь с нашими правилами?    <input type="checkbox" name="agreement">  </label>  <button type="submit" value="Нет!" name="diversion">Соглашаюсь</button></form>
          <form>
  <label>
    Соглашаетесь с нашими правилами?
    <input type="checkbox" name="agreement">
  </label>
  <button type="submit" value="Нет!" name="diversion">Соглашаюсь</button>
</form>

    <option>

    Скопировано

    Если выбран какой-то пункт списка, то при отправке формы на сервер будет передано значение атрибута value этого пункта. Если атрибут не задан, то при отправке будет использоваться текстовое содержимое тега <option>.

    <data>

    Скопировано

    Для тега <data> атрибут value является обязательным. В нём указывается понятная для компьютера информация.

    Например, в интернет-магазине у каждого товара есть идентификатор. Можно указать его в качестве значения атрибута value:

            
          
          <ul>  <li>    <data value="item001">Модный телефон</data>  </li>  <li>    <data value="item002">Нужный компьютер</data>  </li>  <li>    <data value="item003">Классный телефон</data>  </li>  <li>    <data value="item004">Удобный телефон</data>  </li>  <li>    <data value="item005">Нормальный телефон</data>  </li></ul>
          <ul>
  <li>
    <data value="item001">Модный телефон</data>
  </li>
  <li>
    <data value="item002">Нужный компьютер</data>
  </li>
  <li>
    <data value="item003">Классный телефон</data>
  </li>
  <li>
    <data value="item004">Удобный телефон</data>
  </li>
  <li>
    <data value="item005">Нормальный телефон</data>
  </li>
</ul>

    <input>

    Скопировано

    Атрибут value задаёт значение по умолчанию для поля ввода. Это значение будет передано на сервер в момент отправки формы. Поскольку у тега <input> большой список разных типов, то и атрибут в каждом конкретном случае имеет своё значение:

    • Для инпутов с типами button, reset, и submit задаёт текст на кнопке.
    • Для типов text, password, и hidden задаёт начальное значение. В первых двух случаях пользователь сможет стереть его и написать что-то своё.
    • Для типов checkbox, radio, и image — задаёт отправляемое на сервер значение, которое пользователь поменять не может.

    Атрибут value можно задать для инпута любого типа, кроме file.

    <li>

    Скопировано

    Атрибут value можно применить к пунктам нумерованного списка (<ol>). Значение атрибута установит начало отсчёта для автоматического счётчика. Значение должно быть целым положительным числом.

            
          
          <ol>  <li value="5">Номер 5</li>  <li>Номер 6</li>  <li>Номер 7</li></ol>
          <ol>
  <li value="5">Номер 5</li>
  <li>Номер 6</li>
  <li>Номер 7</li>
</ol>

    <meter>

    Скопировано

    Атрибут value определяет текущее значение элемента. Обязательно должно быть числом. Если атрибут не задан, то текущее значение равно 0.

            
          
          <meter max="100" min="0" value="50"></meter>
          <meter max="100" min="0" value="50"></meter>

    <progress>

    Скопировано

    Поскольку тег <progress> показывает процесс выполнения какого-то действия, то атрибут value в данном случае показывает, сколько от задачи выполнено в данный момент. Значение должно быть числом.

            
          
          <progress id="file" max="100" value="70">70%</progress>
          <progress id="file" max="100" value="70">70%</progress>

    Читайте также