Атрибут value

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

• <button>,
• <option>,
• <data>,
• <input>,
• <li>,
• <meter>,
• <progress>.

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

В примере ниже нумерация элементов списка начнётся с 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если указать у кнопки атрибут 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Для тега <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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

Атрибут 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>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать