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