Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег OPTION</title>
 </head>
 <body> 

  <form action="option1.php">
   <p><select size="3" name="hero">
    <option disabled>Выберите героя</option>
    <option value="t1" selected>Чебурашка</option>
    <option value="t2">Крокодил Гена</option>
    <option value="t3">Шапокляк</option>
    <option value="t4">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

— HTML | MDN

HTML элемент <option> используется для определения пункта списка контейнера

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

Категория содержимогоНет.
Разрешенное содержимоеТекст, допускаются экранированные символы (например &eacute;).
Пропуск тегаОткрывающий тег обязателен. Закрывающий тег опционален если за этим элементом следует другой элемент <option>, или элемент
<optgroup>, или если родительский элемент не имеет больше содержимого.
Разрешенные родителиЭлемент <select>,  элемент <optgroup> или элемент <datalist>.
Permitted ARIA rolesNone
DOM interfaceHTMLOptionElement

Как и все HTML элементы, этот элемент поддерживает глобальные атрибуты.

disabled — отключен(о)
Если этот Boolean атрибут установлен, эта опция недоступна для выделения. Часто браузеры выделяют такой элемент управления серым цветом и ему недоступны любые события браузера, такие как клики мыши или события, связанные с фокусировкой. Если этот атрибут не установлен, этот элемент все еще можно отключить (может не работать), если отключен внешний(one of its ancestors) элемент 
<optgroup>.
label — метка, ярлык
Этот атрибут — текст ярлыка, отображающий значение(смысл, описание) опции. Если label не указан (отсутствует), то его значение совпадает с текстовым содержанием элемента <option>.
selected — выбран(о)
(Если присутствует,) этот Boolean атрибут отображает то, что опция изначально выделена. Если элемент 
<option> принадлежит элементу <select>, чей атрибут multiple не установлен, только одна-единственная <option> элемента <select> может иметь атрибут selected .
value — значение, величина
Содержимое(содержание) этого атрибута отображает(представляет) значение, отправляемое формой, если выбрана(выделена) данная опция. Если (этот) атрибут value отсутствует, значение берется из текстового содержания элемента <option>.

BCD tables only load in the browser

  • Other form-related elements: <form>,
    <legend>    , <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> and <meter>.

| HTML (Примеры)

Тег <option> (от англ. option — пункт, параметр, опция) определяет отдельные пункты списка, создаваемого с помощью контейнера <select>.

Ширина списка определяется самым широким текстом, указанным в <option>

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

Формы

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Закрывающий тег не обязателен.

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определённый пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого элемента доступны универсальные атрибуты.

disabled

Блокирует элемент списка для его выбора.

Синтаксис

<option disabled>...</option>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

label

Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри

<option> игнорируется и в списке выводится значение label.

Синтаксис

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

Значения

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

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

Нет.

selected

Делает текущий пункт списка выделенным. Если к элементу <select> добавлен атрибут multiple, то можно выделять более одного пункта списка.

Синтаксис

<option selected>...</option>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

value

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

Синтаксис

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

Значения

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

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

Нет.

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

Описание и примеры

 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OPTION</title>
  </head>
  <body>
    <form action="option2.php">
      <p>
        <select size="3" name="hero">
          <option disabled>Выберите рыцаря</option>
          <option value="t1" selected>Гавейн</option>
          <option value="t2">Ланселот</option>
          <option value="t3">Галахэд</option>
          <option value="t4">Персиваль</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

Тег | HTML справочник

HTML теги

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

Элемент <option> определяет пункты списка (параметры для выбора). Данный тег применяется как вложенный элемент тега <select> (раскрывающийся список), либо тега <datalist> (список предопределенных вариантов).

Пункты списка (<option>) внутри раскрывающегося списка <select> могут группироваться элементом <optgroup>.

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

Атрибуты

АтрибутЗначениеОписание
disableddisabledЛогический атрибут, который указывает, что параметр должен быть отключен.
labeltextЯвляется текстом надписи, указывающей значение параметра. Если атрибут не указан, то его значением выступает содержимое элемента <option>.
selectedselectedЛогический атрибут, который указывает, что параметр должен быть предварительно выбран при загрузке страницы. Атрибут может быть применен только к одному элементу <option> в раскрывающемся списке (элемент <select>).
valuetextУказывает значение, которое будет отправлено на сервер при отправке формы. Если указывается в составе списка предопределённых вариантов (<datalist>), то поиск осуществляется по значению атрибута, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>

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

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

В данном примере рассмотрено применение атрибута selected HTML тега <option>, который определяет какой параметр будет предварительно выбран внутри списка:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg"selected>Calvin Cordozar Broadus, Jr.</option> <!--параметр, который будет предварительно выбран -->
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

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

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

Пример использования HTML тега <option> в раскрывающемся списке

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

Элементом списков выступает тег <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 4.01 от HTML 5

Нет.

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

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег | HTML справочник

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

Описание

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

Элемент <option> должен располагаться внутри элемента <select>, <datalist> или <optgroup>.

Атрибуты

disabled:
Указывает, что данный элемент списка должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами: 

<option disabled>
<option disabled="">
<option disabled="disabled">
Пример »
label:
Определяет более краткую версию варианта, укороченная весия будет отображатся в раскрывающемся списке. Пример »

Примечание: атрибут label не поддерживается браузером Firefox.

selected:
Устанавливает вариант ответа, который должен быть выбран по умолчанию во время загрузки страницы. Если атрибут не установлен, то при загрузке страницы будет отображен первый вариант ответа из списка. Если пользователь не выберет никай другой вариант, то на сервер будет отправлен именно он в качестве значения данного элемента формы. Возможные значения логического атрибута selected: 

<option selected>
<option selected="">
<option selected="selected">
Пример »
value:
Устанавливает значение для элемента списка, которое будет отправлено на сервер вместе с именем выбранного элемента. Если атрибут value отсутствует, то на сервер будет отправлен текст, расположенный непосредственно внутри элемента <option>.

Тег <option> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Результат данного примера в окне браузера:

Option

Option
Оглавление | Назад | Вперёд | Индекс

Опция в списке выбора.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство defaultSelected; в свойство text добавлена возможность изменять текст опции.

Создание

Конструктор Option или тэг HTML OPTION.

Создание объекта
Option конструктором:
new Option([text[, value[, defaultSelected[, selected]]]])

После создания Option-объекта вы можете добавлять его в список выбора, используя массив Select.options.

Параметры
text

Текст, отображаемый в списке выбора.

value

Специфицирует значение, возвращаемое на сервер, когда опция выбрана и форма отправляется.

defaultSelected

Специфицирует, выбрана ли опция по умолчанию (true или false).

selected

Специфицирует текущий статус выбора опции (true или false).

Свойства. Резюме.
Свойство Описание
defaultSelected

Специфицирует статус по умолчанию опции.

index

Индекс с базой 0 элемента в массиве Select.options.

length

Количество элементов в массиве Select.options.

selected

Специфицирует текущий статус опции (выбрана или нет).

text

Специфицирует текст опции.

value

Специфицирует значение, возвращаемое на сервер, когда опция выбрана и форма отправляется.

Методы. Резюме.

Этот объект наследует методы watch и unwatch из объекта Object.

Описание

Обычно Вы работаете с объектами Option в контексте списка выбора/selection list (объект Select). Когда JavaScript создаёт Select-объект для каждого тэга SELECT в документе, он создаёт Option-объекты для тэгов OPTION внутри тэга SELECT и помещает эти объекты в массив options объекта Select.

Кроме того, Вы можете создавать новые опции, используя конструктор Option, и добавлять эти опции в список выбора. После создания опции и добавления её в Select-объект, Вы обязаны обновить документ, используя history.go(0). Этот оператор обязан быть последним. При перезагрузке документа переменные теряются, если они не сохранены в куках или значениях элементов формы.

Вы можете использовать свойства Option.selected и Select.selectedIndex для изменения статуса выбора опции.

  • Свойство Select.selectedIndex это целое число, специфицирующее индекс выбранной опции. Оно чаще всего используется в Select-объектах, которые созданы без атрибута MULTIPLE. Следующий оператор устанавливает свойство selectedIndex  объекта Select:

    • document.myForm.musicTypes.selectedIndex = i

  • Свойство Option.selected это Булево значение, специфицирующее текущий статус выбора опции Select-объекта. Если опция выбрана, её свойство selected имеет значение true; иначе — false. Это чаще всего используется в Select-объектах, созданных с атрибутом MULTIPLE. Следующий оператор устанавливает свойство selected опции в true:

    • document.myForm.musicTypes.options[i].selected = true

Для изменения текста опции используйте свойство Option.text. Например, форма имеет следующий Select-объект:

<SELECT name="userChoice">
   <OPTION>Choice 1
   <OPTION>Choice 2
   <OPTION>Choice 3
</SELECT>

Вы можете установить текст элемента iй на основе текста, введённого в текстовое поле whatsNew:

myform.userChoice.options[i].text = myform.whatsNew.value

Вам не нужно перезагружать или обновлять документ после изменения текста опции.

Пример

Создаётся два Select-объекта, один с и другой без атрибута MULTIPLE. Никакие опции этих объектов первоначально не определены. Когда пользователь щёлкает кнопку, ассоциированную с Select-объектом, функция populate создаёт 4 опции для Select-объекта и выбирает первую опцию.

<SCRIPT>
function populate(inForm) {
   colorArray = new Array("Red", "Blue", "Yellow", "Green")
   var option0 = new Option("Red", "color_red")
   var option1 = new Option("Blue", "color_blue")
   var option2 = new Option("Yellow", "color_yellow")
   var option3 = new Option("Green", "color_green")
   for (var i=0; i < 4; i++) {
      eval("inForm.selectTest.options[i]=option" + i)
      if (i==0) {
         inForm.selectTest.options[i].selected=true
      }
   }
   history.go(0)
}
</SCRIPT>
<h4>Select Option() constructor</h4>
<FORM>
<SELECT NAME="selectTest"></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List">
<P>
</FORM>
<HR>
<h4>Select-Multiple Option() constructor</h4>
<FORM>
<SELECT NAME="selectTest" multiple></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List">
</FORM>

defaultSelected

Булево значение, у8528 107192919

Как установить значение по умолчанию для элемента HTML?

Как установить значение по умолчанию для элемента HTML

Выберите · Bootstrap v5.0

По умолчанию

Пользовательский и не могут изменять из-за ограничений браузера.

Откройте это меню выбораOneTwoThree

Калибр

Вы также можете выбрать из маленького или большого пользовательского выбора, чтобы соответствовать нашим текстовым полям аналогичного размера.

Открыть это меню выбораOneTwoThreeОткрыть это меню выбораOneTwoThree

Также поддерживается атрибут с несколькими :

Откройте это меню выбораOneTwoThree

Как и размер , атрибут :

Откройте это меню выбораOneTwoThree

Отключено

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

Откройте это меню выбораOneTwoThree

Добавление удобной для пользователя опции по умолчанию в ng-options

Metal Toad - поставщик управляемых услуг AWS. В дополнение к работе с Angular мы рекомендуем ознакомиться с нашей статьей о том, как разместить сайт на AWS за 5 минут.

Примечание. Эта статья относится только к AngularJS v1.x. Angular 2 и выше используют другой синтаксис шаблонов, и эти инструкции не применяются.

Директива ng-options

Angular предоставляет отличный способ создать элемент select на основе массива в вашей области видимости. Он может даже привязать параметры к объектам в массиве, а не только к строковым значениям. Но его обработка значений по умолчанию может немного озадачить.

Если вы когда-нибудь обнаружите, что ваше связанное значение не соответствует ни одному из доступных вариантов, вы можете получить этот кусок непостижимого содержимого в своей DOM:

 <выберите ng-model = "sel.myvar "ng-options =" ​​opt.label для выбора sel.myoptions ">

Что случилось с первым элементом опции? Это не один из предоставленных вами вариантов. А почему стоит вопросительный знак?

Если ваша переменная не соответствует ни одному из вариантов, Angular не будет автоматически выбирать первый вариант. Вместо этого создается новый пустой параметр, указывающий на отсутствие совпадения.Он всегда дает этому параметру пустую метку, что может сбивать с толку ваших пользователей.

Оказывается, есть способ предоставить более информативный вариант по умолчанию с удобной для пользователя меткой. Это будет выбираться каждый раз, когда переменная в ng-model не соответствует параметру в ng-options. Оставьте директиву ng-options как есть и добавьте в свой HTML один элемент option со значением пустой строки:

Теперь эта опция будет выбрана, если ваша переменная ng-model не соответствует ничему другому.

Практическое применение

Теперь, когда мы понимаем теорию, давайте создадим небольшой пример приложения. Он будет содержать два поля выбора и несколько кнопок, которые мы можем использовать для изменения значения переменной ng-model.

Контроллер

Наш контроллер довольно прост. Он просто определяет пару переменных:

 angular.module ('ngExampleApp'). Controller ('SelectCtrl', function () {

  this.myoptions = [
    {значение: 'кошка', метка: 'Пушистый'},
    {значение: 'собака', метка: 'Ровер'}
  ];
  это.myvar = this.myoptions [1];

});
Посмотреть

Наше представление содержит элементы выбора и кнопки:

 


 Выбрать без параметра по умолчанию:





 Выберите вариант по умолчанию:

Здесь у нас есть два раскрывающихся списка выбора, которые привязаны к одной и той же переменной ng-model и тот же набор параметров в ng-select . Разница в том, что второй . Обратите внимание, что массив myoptions содержит два элемента (кошка и собака), а третья кнопка устанавливает для myvar другое значение (рыба).

Нажатие кнопок «кошка» и «собака» работает должным образом, при необходимости выбирая значение «Пушистый» или «Ровер». Однако нажатие кнопки «рыба» устанавливает для myvar значение, которое не указано в myoptions.

Каждый из элементов сгенерирует элемент с пустой меткой.

Второй с пустой меткой.

Однако есть одно важное ограничение. Параметр по умолчанию должен иметь в качестве значения пустую строку. Присвоение ему значения, отличного от пустой строки, приведет к тому, что он вообще не будет включен в DOM.

Для более сложного примера использования ng-options в действии попробуйте Plunkr в документации AngularJS.

Web Dynpro - установка опции выбора по умолчанию

Что ж, есть некоторые вещи, которые я считаю само собой разумеющимся, и это то, насколько легко вещи кажутся внутри стандартного программирования ABAP.Я понимаю это всякий раз, когда пытаюсь выполнить одно из этих «простых» действий в Web Dynpro. Отправьтесь в сегодняшнее приключение. У меня было несколько полей выбора, и я просто хотел установить там значение по умолчанию. Звучит так просто. И в конце концов это было так. вот что я наконец нашел.

У меня была опция выбора для ERDAT (дата создания). Я не буду вдаваться в создание опций выбора. Думаю, я говорил об этом некоторое время назад, так что просто поищите в моем блоге, если вам нужна дополнительная информация. SERDAT - это идентификатор моей опции, для которой я хочу установить значение по умолчанию.

*** УСТАНОВИТЬ ПО УМОЛЧАНИЮ ДЛЯ ERDAT
ДАННЫЕ lo_nd_range_erdat ТИП ССЫЛКА НА if_wd_context_node.
ДАННЫЕ lt_range_erdat ТИП wd_this-> Elements_range_erdat.
ДАННЫЕ ls_range_erdat TYPE wd_this-> Element_range_erdat.
*** вот и волшебство ***

СИМВОЛЫ ПОЛЕЙ: ТАБЛИЦА ТИПОВ.
СОЗДАТЬ ТАБЛИЦУ ТИПА LT_RANGE ДАННЫХ / JVS / SO_ERDAT.
НАЗНАЧИТЬ LT_RANGE -> * К .

*** конец волшебству ***

*** этот код просто устанавливает значение обратно в мой контекстный узел.
* перейти от к с помощью выбора лида
lo_nd_range_erdat = wd_context-> get_child_node (name = wd_this-> wdctx_range_erdat).
ls_range_erdat – sign = «I».
ls_range_erdat – option = ‘BT’.
ls_range_erdat – high = sy – datum.
ls_range_erdat – low = sy – datum - 30.
ДОБАВИТЬ ls_range_erdat к lt_range_erdat.
lo_nd_range_erdat-> bind_table (new_items = lt_range_erdat set_initial_elements = abap_true).
*** назад к значению по умолчанию ***
*** обратите внимание, что мне нужно установить значение для символа поля ДАННЫЕ.
ДОБАВИТЬ ls_range_erdat к .
LR_HELPER-> SET_RANGE_TABLE_OF_SEL_FIELD (
EXPORTING
I_ID = ‘SERDAT’
IT_RANGE_TABLE = LT_RANGE).

*** конец кода по умолчанию

Надеюсь, вы найдете этому применение,
Спасибо за чтение,

Как всегда, спасибо за чтение и не забудьте ознакомиться с нашими продуктами для управления услугами SAP в другой моей компании JaveLLin Solutions,
Майк

радиокнопок: всегда выбирать одну?

Введение

Вы, вероятно, задаетесь вопросом, как кто-то может найти достаточно слов для всей статьи о скромном, вездесущем переключателе - и, в частности, должны ли дизайнеры выбирать один из вариантов, который будет выбран по умолчанию, или нет.Прежде чем нажать кнопку Назад , вспомните старую пословицу «дьявол кроется в деталях», и что сегодня так много переключателей совершенно неуместно. Так что читайте дальше, чтобы не создать дьявольский замысел.

Прежде всего, быстрое напоминание о том, что делают радиокнопки: они отображают набор взаимоисключающих опций, из которых человек может выбрать ровно один . Люди иногда путают переключатели и флажки, но флажки - это виджет графического интерфейса пользователя, который используется, когда пользователи могут выбрать любое количество вариантов (ноль, один или несколько.)

Каркас переключателя.

В традиционном дизайне приложений по умолчанию всегда выбирался первый переключатель в списке. Но необузданный мир веб-дизайна бросил вызов этой практике, поэтому по умолчанию не было выбрано ни одной переключателя. Сегодняшние веб-сайты, формы и приложения непоследовательно выбирают один или оставляют все переключатели пустыми по умолчанию. Если по умолчанию ни одна из кнопок не выбрана, у пользователей нет возможности вернуться в исходное состояние после того, как они сделали выбор.Отсутствие стандарта может сбивать с толку пользователей.

Историческая метафора

Время аналоговых радиоприемников давно прошло. Подержанная Chevy Impala, на которой я ездил (именно тогда, когда двигатель действительно перевернулся) в 1980-х годах, могла похвастаться радиоприемником с механическими кнопками, как на изображении ниже.

Пример радио с механическими кнопками, встречающегося в старых автомобилях.

Использование этой и других радиостанций того времени требовало физической силы, чтобы нажимать кнопки и менять станцию.Также вам нужна была степень магистра, чтобы успешно «запрограммировать» одну из кнопок. (Дополнительная благодарность: какие шаги нужно выполнить, чтобы запрограммировать одну из этих кнопок на радиостанцию? Ответ в конце этой статьи.)

Программная радиокнопка была смоделирована после этих физических радиокнопок. Скептики скевоморфизма могут сопротивляться, но использование метафор, имитирующих физический мир, может быть полезным и увлекательным. Однако в данном конкретном случае эти устаревшие радиоприемники сегодня чужды большей части веб-пользователей.Это аргумент против сопоставления с этой метафорой реального мира.

Вторая причина отказа от этой уникальной метафоры заключается в том, что сам физический дизайн был несовершенным. А именно, большинство людей не осознавали, что можно не выбирать кнопки, потому что не было воспринимаемых сигналов аффорданса. При обычном использовании нажатие кнопки приведет к появлению (снятию выделения) уже выбранной кнопки. Но вы также можете вернуться в состояние «не выбрано», довольно сильно потянув выбранную кнопку, пока она не перейдет в состояние отмены выбора.Как люди узнают об этом? Им нужно было сказать, прочитать это в руководстве по эксплуатации или просто предположить, что это возможно. (Моя сестра Деб рассказывала мне, когда мы были детьми, и с тех пор я думал, что она Эйнштейн.)

Этот дефект оригинального дизайна продолжает портить современные веб-сайты, приложения и мобильные устройства. По сути, дизайнеры не знают, в каком направлении находятся правила выбора радиокнопок по умолчанию.

Выбор радиокнопки по умолчанию

Основная рекомендация для дизайна переключателей - выбрать один из переключателей по умолчанию (т.е.е., когда страница загружается, в случае веб-приложения.) Это удобство использования и элегантный дизайн. Я говорю это не потому, что размахиваю знаменем традиционализма или даже последовательности. Скорее, баннеры, которые я выставил бы в этом случае, были бы украшены такими концепциями, как:

  • пользовательский элемент управления,
  • экспедиционных заданий и
  • сила внушения.

1. Дайте людям контроль и согласитесь с их ожиданиями

Одна из 10 эвристик дизайна пользовательского интерфейса гласит, что пользователи должны иметь возможность отменять (и повторять) свои действия.Это означает, что люди могут вернуть элемент управления пользовательского интерфейса в исходное состояние. Для большинства элементов управления вы можете «отменить выбор» сделанного вами выбора. (Обязательные элементы могут привлечь вас к заметке или сообщению об ошибке позже.) Но вы не можете щелкнуть или коснуться выбранного переключателя, чтобы отменить его выбор.

Окончательность действия выбора не передается, если по умолчанию ничего не выбрано. Эта модель взаимодействия сбивает с толку и неожиданна, и заставляет людей чувствовать себя неконтролируемыми. И это также побуждает людей делать сумасшедшие вещи, такие как возвращаться и, возможно, терять контент, обновлять страницу, дважды или трижды щелкать (или нажимать) переключатель, чтобы отменить его, и действовать другими суеверными способами.

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

2. Ускорение выполнения задач

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

Например, много лет назад я присоединился к Care.com, чтобы найти няню для моего керн-терьера Коломбо, когда я путешествовал.После того, как я кого-то нашел, решил выйти из сервиса. Когда я отменил свое членство, сайт проницательно представил страницу с двумя переключателями: один для отказа от подписки, а другой для сохранения моего членства на случай, если мне понадобится дополнительная помощь или другие виды ухода. (Может быть, за моей смоковницей нужно ухаживать?)

Сообщение, представленное сайтом - Да, переключите мое членство и сэкономьте до 83%. - могло продать некоторых людей из-за отсрочки отмены, как и размещение рекламной акции на первой позиции в списке переключателей.Но, понимая, что большинство людей действительно хотят отказаться от подписки, если они достигли этой конкретной точки, дизайнеры по умолчанию выбрали переключатель с надписью Нет, спасибо, продолжайте понижать мое членство. Это значение по умолчанию позволило мне просто просмотреть варианты и нажать кнопку Продолжить , вместо того, чтобы нажимать и выбирать Нет, и чувствовать раздражение от необходимости сделать это, когда я только что сказал сайту, что хочу отказаться от подписки.

Уход.com разумно сделал переключатель, связанный с отменой членства, выбором по умолчанию.

На сайте Министерства транспорта Массачусетса на странице оплаты для продления регистрации автомобиля предлагаются способы оплаты: Электронный чек или Кредитная карта , , но без выбора по умолчанию.

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

3. Используйте силу предложения

Дизайн с переключателем, выбранным по умолчанию, является убедительным предложением - даже одобрением - для пользователя. Выбор по умолчанию может привести пользователя к принятию наилучшего решения и может повысить его уверенность по мере продвижения. В частности, выбор радио по умолчанию может помочь человеку и склонить его в том направлении, в котором организация хочет, чтобы он двигался.

Помогите человеку

Значения по умолчанию помогают пользователям.Они особенно услужливы в ситуациях, когда выбор может быть сложным или незнакомым. Когда метки и описания чужие, по умолчанию пользователь выбирает лучший вариант из тех, которые он может не понять. Например, на одном из экранов установки Dropbox выбирается переключатель с надписью Typical , чтобы помочь людям начать установку. Кроме того, термин Advanced в сравнении с Typical делает последнее более привлекательным для менее опытных пользователей.И слова рекомендуется и нормальный также вселяют уверенность.

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

Качайте человека

Не секрет, что у организаций есть мотивы, и они часто хотят убедить своих пользователей действовать так, чтобы им было выгодно. Выбор по умолчанию может побудить людей пойти по определенному пути. Выбор по умолчанию может также заставить человека воспринимать организацию определенным образом или может повлиять на его чувство принадлежности.

Возьмем, к примеру, пожертвование денег на какое-либо дело - деликатная тема для людей, которые стесняются суммы, которую они планируют пожертвовать. Подумайте, как человек может отреагировать на суммы, предложенные переключателями, и особенно на выбранный по умолчанию. Давайте подумаем о 2 коротких сценариях, которые помогут нам:

Сценарий 1: Человек планирует дать 30 долларов. Он видит радиокнопки и:

  • решает, что 30 долларов меньше, чем хочет организация, поэтому он вообще не жертвует.Такая ситуация негативна для организации и пользователя.
  • перенапрягается, чтобы отдать 50 долларов. Решение положительно для организации (по крайней мере, в краткосрочной перспективе) и отрицательно для пользователя.

Сценарий 2: Человек хочет пожертвовать 10 000 долларов. Он видит радиокнопки и:

  • решает, что отдать все 10 000 долларов непомерно, и уменьшает свое пожертвование до гораздо меньшей суммы. Этот выбор отрицателен для организации.
  • следует рекомендации и дает 50 долларов (а оставшиеся 10 тысяч долларов передает в другое место.) Опять же, это решение отрицательное для организации.

Иногда предположения пользователей могут быть неверными или противоречить целям или интересам организации. Они также могут заставить пользователя почувствовать себя отчужденным, если его предполагаемый выбор сильно отличается от доступных или предлагаемых вариантов. Выбранная сумма может быть самонадеянной, отталкивать одних и снижать суммы пожертвований других. Итак, чтобы сделать лучший выбор, обязательно знает цели вашей организации и типичное поведение ваших пользователей.

Если вы не можете с уверенностью собрать информацию о своих пользователях, рассмотрите альтернативный элемент управления пользовательским интерфейсом (кроме переключателей, которые не выбраны). Возможно, сделайте то, что Всемирный фонд дикой природы делает для своего раздела ежемесячных пожертвований для белых медведей: пустое поле с Предлагаемая сумма появляется после поля.

Всемирный фонд дикой природы позволяет людям вводить сумму, которую они хотят жертвовать ежемесячно, но предлагает сумму после поля.

В другом примере веб-сайт Фонда защиты окружающей среды предлагает суммы пожертвования от 25 до 5000 долларов. Несмотря на выбор по умолчанию, сам факт наличия предложенных сумм создает основу, сообщая пользователям, что организация ожидает, что люди пожертвуют не менее 25 долларов.

На веб-сайте Фонда защиты окружающей среды установлено пожертвование в размере 50 долларов США по умолчанию, как показано в двух версиях с адаптивным дизайном для ноутбука (слева) и телефона (справа.)

По умолчанию выбран переключатель, связанный с 50 долларами. Я не знаю точно, как EDF пришла к этому значению по умолчанию, но могу предположить, что они выбрали его для помощи пользователям, и что, вероятно, 50 долларов США являются наиболее распространенной суммой пожертвований. Или, может быть, сайт персонализирован или использует cookie и знает, что 50 долларов - это то, что человек пожертвовал в прошлом.

Но давайте на мгновение предположим, что мотивом является склонение людей к тому, чтобы они жертвовали 50 долларов или больше. В этом дизайне люди видят правдоподобие того, что люди жертвуют 5000 долларов; По сравнению с этим 50 долларов - это тривиально.Таким образом, сайт в основном говорит: «Люди дают 5000, а мы были бы довольны 50 долларами». Это смирение может даже привлечь некоторых жертвователей к пожертвованию от 100 до 500 долларов.

Замечания по проектированию

  • Горизонтальные переключатели иногда трудно сканировать. Как видно из примеров EDF, горизонтальное расположение радиокнопок может затруднить определение, с какой меткой соответствует радиокнопка: перед кнопкой или после. Эта проблема становится еще более заметной, когда этот сайт с адаптивным дизайном EDF просматривается на телефоне.Вертикальное расположение переключателей безопаснее.
  • Радиокнопки по своей природе крошечные, поэтому, согласно закону Фиттса, их трудно нажимать или нажимать. Чтобы увеличить целевую область, позвольте пользователям выбрать вариант, щелкнув или нажав не только эту кнопку, но также метку или связанные слова. Это проще, чем захватывать крошечную цель самой кнопки.

Преодолевайте оправдания

Ниже я описываю несколько распространенных способов защиты от пустых радиостанций.

Незнание, чего хочет или делает большинство пользователей

Важно изучать пользователей, предлагая какие-либо варианты выбора, и это можно эффективно сделать с помощью методов, перечисленных в следующем разделе этой статьи.

Избегание самонадеянного или неприемлемого выбора по умолчанию

Выбор переключателя по умолчанию, с которым дизайнеры часто борются, - выбрать ли пол или обозначение, такое как мистер, миссис, мисс или мисс. Дизайнеры не хотят обидеть клиентов или рискнуть обратиться к человеку с неправильным обозначение, поэтому по умолчанию они оставляют все переключатели пустыми.Однако это не решает проблемы, потому что даже порядок, в котором представлены обозначения, может иметь эффект, аналогичный выбору по умолчанию. Лучшие альтернативы отсутствию выбора по умолчанию включают следующее:

  • Изучите свою группу пользователей, чтобы определить, к какому классу относится большинство людей. Выберите его по умолчанию.
  • Убедитесь, что переключатели видны, чтобы пользователь мог утвердить или изменить выбор.
  • Если вы уже знаете, кем является пользователь (например, через ролевую систему), выберите правильное обозначение.
  • Предложите открытое поле, в котором люди могут вводить обозначение, а веб-сайт выполняет внутреннюю работу по поддержанию чистоты базы данных.
  • Подумайте, нужно ли вам вообще запрашивать эту информацию. Знание имени пользователя действительно дает возможность добавить уровень формальности и уважения к вашей будущей переписке с этим человеком. Но если этот жест не особенно важен, вы можете взять подсказку на таких сайтах, как JohnDeereGifts.com, и попросить указать только имя человека, без обозначения.

JohnDeereGifts.com вообще не запрашивает обозначения «мистер, миссис, мисс, мисс».

Нужна сеть безопасности

Некоторые дизайнеры опасаются, что люди не увидят вариант выбора по умолчанию. Или поверенные организации или федеральные агентства требуют, чтобы пользователи активно нажимали и принимали выбор. В некоторых из этих ситуаций в проектах предусмотрены радиоприемники без выбора по умолчанию. Пользователь может не иметь возможности отправить форму, например, до тех пор, пока он не выберет переключатель, или, если он сможет отправить форму, он получит сообщение об ошибке, предлагающее ему сделать выбор.

Это подстраховочная сетка с невообразимым дизайном. С этим неприятно иметь дело, и это непривлекательный способ привлечь внимание. Рассмотрим другие варианты, например:

  • Используйте линейный пошаговый процесс, который подводит людей к возможному выбору.
  • Создайте макет страницы с соответствующими интервалами, текстом, размером и цветом, чтобы привлечь внимание пользователей к важному выбору.
  • Рассмотрите возможность реструктуризации содержимого и установки флажка для подтверждения выбора.
  • Если достаточно просто, включите подтверждение как часть имени кнопки, которая продолжает или отправляет страницу или диалоговое окно.

Как определить лучший выбор радиокнопки по умолчанию

У дизайнеров есть множество вариантов методов исследования UX - быстрых или сложных, дешевых или дорогих, с высокой или низкой степенью достоверности - чтобы помочь им найти ответ о том, что лучше для пользователей. Начните с этих методов исследования, чтобы определить, какой может быть разумный дефолт:

  • отслеживать показатели сайта, просматривать прошлые заказы и выбранные варианты (и учитывать персонализацию и файлы cookie для постоянных пользователей)
  • опрошенных пользователей
  • провести анализ задач и этнографические исследования
  • относятся к персонажам, историям и сценариям

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

Сводка: выберите одну радиокнопку по умолчанию

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

Причины выбора по умолчанию

  • Сопоставьте метафору старого радио (Плохо): Это не очень хорошая причина, потому что нет необходимости (или, вероятно, полезно) сопоставить эту конкретную метафору.
  • Ускоренные задачи (хорошо): выбор по умолчанию полезен, если вы провели анализ задачи и большинство пользователей сделали такой же выбор.
  • Предоставьте людям контроль и приведите их в соответствие с их ожиданиями (Хорошо): лучше иметь выбранную радиокнопку по умолчанию, учитывая, что люди не могут отменить выбор и вернуть кнопку в исходное состояние после того, как она была выбрана. Выбор по умолчанию устанавливает правильные ожидания пользователя.
  • Сила предложения (хорошо): выбор является директивным.Однако некоторые вещи, на которые следует обратить внимание, - это самонадеянность, напористость, оскорбление или отчуждение. Учитывайте контент и выбор по умолчанию, то, как пользователи отреагируют на него, и влияние, которое выбор окажет на пользователя и организацию как в краткосрочной, так и в долгосрочной перспективе. Если он не был тщательно протестирован (с помощью методов наблюдения, а также с помощью показателей) и не доказал свою эффективность, избегайте самонадеянных выборов по умолчанию.

Причины отсутствия выбора по умолчанию

  • Незнание того, что пользователи хотят или делают: в этой и любой другой дизайнерской ситуации нам надлежит знать наших пользователей и то, что они хотят, что им нужно и что они делают чаще всего.
  • Самонадеянный или отталкивающий выбор: это, вероятно, самая веская причина не устанавливать переключатель по умолчанию. Но подумайте, нужно ли вам вообще запрашивать информацию или вы можете использовать другой элемент управления пользовательского интерфейса для сбора необходимых данных.
  • Сеть безопасности: ловите людей, убедитесь, что они видят и активно выбирают вариант: вероятно, есть более элегантный способ спроектировать взаимодействие, чем ожидать, что пользователь пропустит команду и поймает его с сообщением об ошибке постфактум.Найдите альтернативный способ привлечь внимание пользователей.

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

Ответ на дополнительный кредит

Вы отказываетесь от того, как «программировать» станцию ​​с этими механическими кнопками старой закалки? Вот как это сделать. Воспользуйтесь диском тюнера, чтобы выбрать нужную станцию, затем найдите кнопку, чтобы «запрограммировать» станцию.Теперь потяните эту кнопку за пределы состояния «не выбрано». Тяните так сильно, как будто вы действительно пытаетесь сломать радио. Затем задвиньте его до упора, чтобы он был выбран. Обычно это работает. Чтобы проверить это, смените станцию, затем снова нажмите кнопку и посмотрите, настраивается ли она на станцию, на которую вы хотели. Если это сработает, расслабьтесь с хорошим кусочком Нила Даймонда. Если не сработает, то повтори, лучше.

Дополнительную информацию о переключателях и других виджетах графического интерфейса см. Также в нашем курсе «Разработка приложений для Интернета и настольных компьютеров».

Select API - Material-UI

Документация по API компонента Select React. Узнайте больше о реквизитах и ​​точках настройки CSS.

Импорт 

  импорт Выберите из '@ material-ui / core / Select';

импортировать {Select} из '@ material-ui / core';

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

Имя компонента

Имя MuiSelect может использоваться для предоставления свойств по умолчанию или переопределений стиля на уровне темы.

Стойка

Название Тип По умолчанию Описание
авто Ширина булев ложь Если true , ширина всплывающего окна будет автоматически установлена ​​в соответствии с элементами внутри меню, в противном случае это будет не меньше ширины поля выбора.
детский узел Элементы option для заполнения выбора.Может быть MenuItem , когда native false, и option , когда native истинно.
⚠️Элементы MenuItem должны быть прямыми потомками, если native ложно.
классы объект Переопределить или расширить стили, примененные к компоненту. См. CSS API ниже для получения более подробной информации.
значение по умолчанию любой Значение элемента по умолчанию.Используйте, когда компонент не контролируется.
дисплей Пустой булев ложь Если true , значение отображается, даже если ни один элемент не выбран.
Чтобы отобразить значимое значение, функция должна быть передана в опору renderValue , которая возвращает значение, которое будет отображаться, когда ни один элемент не выбран. Вы можете использовать его только тогда, когда для native prop установлено значение false (по умолчанию).
Значок Компонент elementType ArrowDropDownIcon Значок со стрелкой.
id строка id элемента-оболочки или выберите элемент , если родной .
вход элемент Элемент Input ; не обязательно должен быть специфичным для пользовательского интерфейса материала Вход .
входные реквизиты объект Атрибуты, примененные к элементу input . Когда native имеет значение true , атрибуты применяются к элементу select .
этикетка узел См. Обрисовку на этикетке ввода №
идентификатор этикетки строка Идентификатор элемента, который действует как дополнительная метка. Выбор будет отмечен дополнительной меткой и выбранным значением.
этикетка Ширина номер 0 См. Обрисовку на этикетке ввода №
MenuProps объект Реквизит, примененный к элементу Menu .
кратное булев ложь Если true , значение должно быть массивом, и меню будет поддерживать множественный выбор.
родной булев ложь Если true , компонент будет использовать собственный select element.
на замену функция Функция обратного вызова срабатывает при выборе пункта меню.

Подпись:
функция (событие: объект, дочерний элемент ?: объект) => void
событие: Источник события обратного вызова. Вы можете получить новое значение, открыв event.target.value (любое).
child: Элемент реакции, который был выбран, когда native имеет значение false (по умолчанию).

вкл. Закрыть функция Обратный вызов срабатывает, когда компонент запрашивает закрытие.Использовать в контролируемом режиме (см. Открытый).

Подпись:
функция (событие: объект) => void
событие: Источник события обратного вызова.

on Открыть функция Обратный вызов срабатывает, когда компонент запрашивает открытие. Использовать в контролируемом режиме (см. Открытый).

Подпись:
функция (событие: объект) => void
событие: Источник события обратного вызова.

открыто булев Control выберите открытое состояние. Вы можете использовать его только тогда, когда для native prop установлено значение false (по умолчанию).
renderValue функция Визуализировать выбранное значение. Вы можете использовать его только тогда, когда для native prop установлено значение false (по умолчанию).

Подпись:
Функция (значение: любое) => ReactNode
значение: Значение , предоставленное компоненту.

SelectDisplayProps объект Реквизит, примененный к интерактивному элементу div.
значение любой Входное значение. Если указать пустую строку, параметры не будут выбраны. Эта опора требуется, когда собственная опора имеет значение false (по умолчанию). Установите пустую строку '' , если вы не хотите выбирать какие-либо из доступных параметров.
Если значение является объектом, оно должно иметь ссылочное равенство с параметром, чтобы его можно было выбрать.Если значение не является объектом, строковое представление должно совпадать со строковым представлением параметра, чтобы его можно было выбрать.
вариант «заполненный»
| «изложил»
| 'стандарт'		 стандарт Вариант использования.

Ссылка ref перенаправляется в корневой элемент.

Любые другие предоставленные реквизиты будут предоставлены корневому элементу (Вход).

CSS

Название правила Глобальный класс Описание
корень.MuiSelect-корень Стили, примененные к компоненту выбора корневой класс .
выбрать .MuiSelect-выбрать Стили, примененные к компоненту выбора Класс выбора .
с заполнением .MuiSelect заполненный Стили, применяемые к выбранному компоненту, если variant = "fill" .
выделенный .MuiSelect с контуром Стили, примененные к выбранному компоненту, если option = "outlined" .
выберите Меню .MuiSelect-selectMenu Стили, примененные к компоненту выбора selectMenu class.
отключен.Mui-отключен Псевдокласс, примененный к компоненту выбора , отключил класс .
значок .MuiSelect-значок Стили, примененные к компоненту значка.
iconOpen .MuiSelect-iconOpen Стили, применяемые к компоненту значка, если всплывающее окно открыто.
icon Заполнено .MuiSelect-iconFilled Стили, применяемые к компоненту значка, если вариант = "fill" .
иконка с контуром .MuiSelect-iconОткрытый Стили, применяемые к компоненту значка, если вариант = "outlined" .
родной Вход .MuiSelect-nativeInput Стили, примененные к базовому собственному компоненту ввода.

Вы можете переопределить стиль компонента с помощью одной из этих точек настройки:

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

Наследование

Также доступны свойства компонента Input.

No related posts.