Атрибут value: Атрибут value | HTML | WebReference – Атрибут value | wm-school

Содержание

Атрибут value | wm-school



Атрибут value (от англ. "value" — «значение») присваивает элементу значение.

Для элементов <button>, <input> и <option>, атрибут value определяет начальное значение элемента.

Для элемента <li> определяет стартовое значение для числового маркера элементов списка. Маркер для последующих элементов списка будет увеличиваться на единицу от данного значения.

Для элемента <progress> определяет, насколько выполнена текущая задача.

Для элемента <param> определяет значение параметра. Атрибут value используется вместе с атрибутом name, чтобы установить параметры для плагина, определенного в элементе <object>.

Синтаксис

<element value="[значение]">

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Применяется к тегам

Отличия HTML 4.01 от HTML 5

Нет.

Примеры использования:

Атрибут value (Элемент <button>)

Значение кнопки отправляется на сервер только в том случае, если сама эта кнопка определена как кнопка отправки данных формы.

При использовании элемента <button> в HTML форме Internet Explorer до версии 8 отправляет на сервер текст между тегами <button> и </button>, в то время как остальные браузеры отправляют на сервер значение атрибута value.

Две кнопки с одинаковыми именами, которые при нажатии отправляют разные значения:

Пример HTML:

Попробуй сам
<form action="action_form.php" method="get">
  Выберите ваш любимый предмет::
  <button name="subject" type="submit" value="fav_HTML">HTML</button>
  <button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

Атрибут value (Элемент <input>)

В зависимости от типа элемента атрибут value выступает в следующей роли:

  • для типов "button", "reset", "submit" — он определяет текст на кнопке;
  • для типов "text", "password", "hidden" — он определяет начальное значение поля ввода;
  • для типов "checkbox", "radio", "
    image
    " — он определяет значение, ассоциированное с элементом ввода (также это значение, отправляемое на сервер).

Пример HTML:

Попробуй сам
<form action="action_form.php">
  Имя: <input type="text" name="firstname" value="Иван"><br>
  Фамилия: <input type="text" name="lastname" value="Иванов"><br>
  <input type="submit" value="Отправить">
</form>

Атрибут value (Элемент <li>)

Атрибут value может иметь только числовое значение и используется только с упорядоченными списками <ol>.

Атрибут value в упорядоченном HTML списке:

Пример HTML:

Попробуй сам
<ol>
   <li value="100">Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
   <li>Вода</li>
   <li>Сок</li>
   <li>Пиво</li>
</ol>

Атрибут value (Элемент <option>)

Выпадающий список внутри HTML формы:

Пример HTML:

Попробуй сам
<form action="action_form.php">
  <select name="color"> <!--выпадающий список-->
 <!--<select name="color" size=3> <!--список с прокруткой-->
 <option value="white">Белый</option>
 <option value="green">Зеленый</option>
 <option value="blue">Синий</option>
 <option value="red">Красный</option>
 <option value="black">Черный</option>
 </select>
 <input name="Submit" type='submit' value='Отправить'>
</form>

Атрибут value (Элемент <progress>)

Процесс загрузки:

Атрибут value (Элемент <param>)

В качестве значения данного параметра указывается любое допустимое значение, предназначенное для передачи встраиваемому объекту. (Таким образом, допустимость значений определяется встраиваемым объектом.)

Пример HTML:

Попробуй сам
<object data="document.html" type="text/html">
<param name="bgcolor" value="#ffeeaa">
</object>

Поддержка браузерами

Атрибут value имеет следующую поддержку браузерами для каждого элемента:

Элемент
<button> 8+ 1+ 6+ 1+ 1+ 1+
<input> 2+ 1+ 1+ 1+ 1+ 1+
<li> 2+ 1+ 4+ 1+ 1+ 1+
<option> 3+ 1+ 4+ 1+ 1+ 1+
<progress> 10+ 8+ 11+ Да 6+ 16+
<param> 3+ 1+ 4+ 1+ 1+ 1+
Элемент
<button> 1+ 1+ 6+ 1+
<input> 1+ 1+ 6+ 1+
<li> 1+ 1+ 6+ 1+
<option> 1+ 1+ 6+ 1+
<param> 1+ 1+ 6+ 1+

Спецификации

Спецификация Статус
HTML 4.01 (W3C) Рекомендация (value-BUTTON)
HTML 5 (W3C) Рекомендация (value-BUTTON)
HTML 5.1 (W3C) Рекомендация (value-BUTTON)

Учебник HTML

HTML уроки: HTML Атрибуты


Атрибут value | HTML | WebReference

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="<текст>">...</option>

Значения

Любая текстовая строка.

Значение по умолчанию

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>OPTION, атрибут value</title>
  <script>
    function dataSelect(f) {
     n = f.hero.selectedIndex
     if(n) alert("Выбран герой: " + f.hero.options[n].value)
    }
  </script>
 </head>
 <body>
  <form action="option1.php">
   <p><select name="hero">
   <option>Выберите героя</option>
   <option value="Чебурашка">Чебурашка</option>
   <option value="Крокодил Гена">Крокодил Гена</option>
   <option value="Шапокляк">Шапокляк</option>
   <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   <input type="button" value="OK"></p>
  </form> 
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML атрибут value | назначение, значения, примеры

Атрибут value — задает начальное значение для элемента.

Для input — это значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.

На сервер отправляется пара «имя=значение&raquo, где имя задается параметром name тега input, а значение — параметром value.

Параметр value для кнопок (type=submit|reset|button) устанавливает текстовую надпись на них. Для текстовых полей (type="text|file") указывает предварительно введенную строку. Для флажков и переключателей (type=checkbox|radio) уникально определяет каждый элемент.

Для тега option этот атрибут определяет значение пункта списка (select), которое будет отправлено на сервер. Отправляется пара «имя=значение», где имя задается параметром name тега <select>,а значение — параметром value выделенных пунктов списка.

Для тега param — значение параметра.

Для button value задает значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Для тега li это число, с которого будет начинаться нумерованный список.

Тип значения CDATA, NUMBER
Значение по умолчанию Нет
Применим к:
Аналог в CSS нет

Пример

<input type="text" value="строка, которая отправится на сервер" />

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- --> </style> </head> <body> <form action="..."> <div> <input type="text" name="name" value="Вася Пупкин" /><input type="submit" value="отправить на сервер" /> </div> </form> <ol > <li >строка</li> <li value="3">строка</li> <li>строка</li> </ol> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Атрибут value | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="значение">...</option>

Значения

Любая текстовая строка заключенная в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION, атрибут value</title>
  <script>
    function dataSelect(f) {
     n = f.hero.selectedIndex
     if(n) alert("Выбран герой: " + f.hero.options[n].value)
    }
  </script>
 </head>
 <body>

  <form action="option1.php">
   <p><select name="hero">
   <option>Выберите героя</option>
   <option value="Чебурашка">Чебурашка</option>
   <option value="Крокодил Гена">Крокодил Гена</option>
   <option value="Шапокляк">Шапокляк</option>
   <option value="Крыса Лариса">Крыса Лариса</option>
   </select>
   <input type="button" value="OK"></p>
  </form> 

 </body>
</html>

Атрибут value тега | HTML справочник

HTML тег <option>

Значение и применение

Атрибут value (HTML тега <option>) указывает значение, которое будет отправлено на сервер при отправке формы.

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

Поддержка браузерами

Синтаксис:

<option value>

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута value HTML тега <option></title>
</head>
<body>
	<form action = "#"> <!--Адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
		<select> 
			<option value = "A">Option A</option>
			<option value = "B">Option B</option>
			<option value = "C">Option C</option>
		</select>
		<input type = "submit" value = "отправить">
	</form>
</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута value HTML тега <option> (значение, которое будет отправлено на сервер, когда форма отправляется).

Давайте рассмотрим пример в котором используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>).

Элементом списков выступает тег <option>. Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него. Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.

Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута label HTML тега <option></title>
</head>
<body>
	<form action = "#"> <!--Адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
		<fieldset> <!--Группируем элементы формы-->
			<legend>Составление маршрута</legend> <!--Заголовок для элемента <fieldset> -->
			Город отправления:
			<select> <!--Раскрывающийся список-->
				<option  label = "Владивосток">
				<option  label = "Анапа">
				<option  label = "Москва">
				<option  label = "Смоленск">
				<option  label = "Якутск">
			</select>
				<p>Аэропорт назначения:
					<input type = "text" list = "airports"> 
				</p>
			<datalist id = "airports"> <!--Список предопределенных вариантов для ввода-->
				 <option value = "VVO" label = "Владивосток">
				 <option value = "MEM" label = "Анапа">
				 <option value = "VKO" label = "Москва Внуково">
				 <option value = "LNX" label = "Смоленск">
				 <option value = "YKS" label = "Якутск">
			</datalist>	
			<input type = "submit" value = "подтвердить">
			</fieldset>
	</form>
</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута label HTML тега <option> (текст надписи, которая указывает значение параметра).HTML тег <option>

HTML атрибут value | назначение, значения, примеры

Атрибут value — задает начальное значение для элемента.

Для input — это значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.

На сервер отправляется пара «имя=значение&raquo, где имя задается параметром name тега input, а значение — параметром value.

Параметр value для кнопок (type=submit|reset|button) устанавливает текстовую надпись на них. Для текстовых полей (type="text|file") указывает предварительно введенную строку. Для флажков и переключателей (type=checkbox|radio) уникально определяет каждый элемент.

Для тега option этот атрибут определяет значение пункта списка (select), которое будет отправлено на сервер. Отправляется пара «имя=значение», где имя задается параметром name тега <select>,а значение — параметром value выделенных пунктов списка.

Для тега param — значение параметра.

Для button value задает значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Для тега li это число, с которого будет начинаться нумерованный список.

Тип значения CDATA, NUMBER
Значение по умолчанию Нет
Применим к:
Аналог в CSS нет

Пример

<input type="text" value="строка, которая отправится на сервер" />

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- --> </style> </head> <body> <form action="..."> <div> <input type="text" name="name" value="Вася Пупкин" /><input type="submit" value="отправить на сервер" /> </div> </form> <ol > <li >строка</li> <li value="3">строка</li> <li>строка</li> </ol> </body> </html>Сделай код и жми тут

Результат:
большой полигон

HTML атрибут value | назначение, значения, примеры

Последнее обновление: 03.02.2011

Атрибут value — задает начальное значение для элемента.

Для input — это значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.

На сервер отправляется пара «имя=значение&raquo, где имя задается параметром name тега input, а значение — параметром value.

Параметр value для кнопок (type=submit|reset|button) устанавливает текстовую надпись на них. Для текстовых полей (type="text|file") указывает предварительно введенную строку. Для флажков и переключателей (type=checkbox|radio) уникально определяет каждый элемент.

Для тега option этот атрибут определяет значение пункта списка (select), которое будет отправлено на сервер. Отправляется пара «имя=значение», где имя задается параметром name тега <select>,а значение — параметром value выделенных пунктов списка.

Для тега param — значение параметра.

Для button value задает значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.

Для тега li это число, с которого будет начинаться нумерованный список.

Тип значения CDATA, NUMBER
Значение по умолчанию Нет
Применим к:
Аналог в CSS нет

Пример

<input type="text" value="строка, которая отправится на сервер" />

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- --> </style> </head> <body> <form action="..."> <div> <input type="text" name="name" value="Вася Пупкин" /><input type="submit" value="отправить на сервер" /> </div> </form> <ol > <li >строка</li> <li value="3">строка</li> <li>строка</li> </ol> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

По теме:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *