Html поле со списком: Поле со списком | htmlbook.ru

Связанные страницы

Ссылка на HTML DOM: выберите объект

Учебное пособие по CSS: стилизация форм

Настройки CSS по умолчанию

Нет.

HTML DOM Выбрать объект

Выбрать объект

Объект Select представляет элемент HTML .

Доступ к выбранному объекту

Вы можете получить доступ к элементу

, используя getElementById ():

Совет: Вы также можете получить доступ к объекту Select, выполнив поиск в коллекции элементов формы.

Создать объект выбора

Вы можете создать элемент с помощью документа.createElement () метод:

Выбор коллекций объектов

Коллекция	Описание
варианты	Возвращает набор всех параметров в раскрывающемся списке

---

---

Выбрать свойства объекта

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

Выбор методов объекта

Метод	Описание
добавить ()	Добавляет параметр в раскрывающийся список
checkValidity ()
удалить ()	Удаляет параметр из раскрывающегося списка

Стандартные свойства и события

Объект Select также поддерживает стандартные свойства и события.

---

Связанные страницы

Учебное пособие по HTML: формы HTML

HTML-ссылка: HTML-тег

HTML Combobox с JavaScript и CSS

// Code By Webdevtrick (https://webdevtrick.com)

const Keys = {

Backspace: ‘Backspace’,

Clear: ‘Clear’,

Down: ‘ArrowDown’,

End: ‘End’,

Enter: ‘Enter’,

Escape: ‘Escape’,

Home: ‘Home’,

Left: ‘ArrowLeft’,

PageDown: ‘PageDown ‘,

PageUp:’ PageUp ‘,

Right:’ ArrowRight ‘,

Space:’ ‘,

Tab:’ Tab ‘,

Up:’ ArrowUp ‘};

const MenuActions = {

Close: 0,

CloseSelect: 1,

First: 2,

Last: 3,

Next: 4,

Open: 5,

Previous: 6,

Выберите: 7,

Пространство: 8,

Тип: 9};

// фильтрация массива опций по входной строке

// возвращает массив опций, которые начинаются со строки фильтра, независимо от регистра

function filterOptions (options = [], filter, exclude = []) {

варианты возврата.filter (option => {

const matches = option.toLowerCase (). indexOf (filter.toLowerCase ()) === 0;

совпадений возврата && exclude.indexOf (option) <0;

});

}

// вернуть массив точных совпадений имен опций из строки, разделенной запятыми

function findMatches (options, search) {

const names = search.split (‘,’);

return names.map (name => {

const match = options.фильтр (option => name.trim (). toLowerCase () === option.toLowerCase ());

вернуть match.length> 0? совпадение [0]: ноль;

}).

фильтр (option => option! == null);

}

// вернуть действие combobox при нажатии клавиши

function getActionFromKey (event, menuOpen) {

const {key, altKey, ctrlKey, metaKey} = event;

// обрабатываем открытие при закрытии

if (! MenuOpen && (key === Keys.Вниз || key === Keys.Enter || key === Keys.Space)) {

return MenuActions.Open;

}

// обрабатываем ключи при открытии

if (key === Keys.Down) {

return MenuActions.Next;

} else

if (key === Keys.Up) {

return MenuActions.Previous;

} else

if (key === Keys.Home) {

return MenuActions.First;

} else

if (ключ === Keys.Конец) {

return MenuActions.Last;

} else

if (клавиша === Keys.Escape) {

return MenuActions.Close;

} else

if (key === Keys.Enter) {

return MenuActions.CloseSelect;

} else

if (клавиша === Keys.Space) {

return MenuActions.Space;

} else

if (key === Keys.Backspace || key === Keys.Clear || key.length === 1 &&! AltKey &&! CtrlKey &&! MetaKey) {

return MenuActions.Тип;

}

}

// получить индекс опции, которая соответствует строке

function getIndexByLetter (options, filter) {

const firstMatch = filterOptions (options, filter) [0];

вернуть первый матч? options.indexOf (firstMatch): -1;

}

// получить обновленный индекс опции

function getUpdatedIndex (current, max, action) {

switch (action) {

case MenuActions.Первый:

возврат 0;

case MenuActions.Last:

return max;

case MenuActions.Previous:

return Math.max (0, current — 1);

case MenuActions.Next:

return Math.min (max, current + 1);

по умолчанию:

return current;}

}

// проверяем, прокручивается ли элемент в настоящее время

function isScrollable (element) {

return element && element.clientHeight

}

// убедитесь, что данный дочерний элемент находится в пределах видимой области прокрутки родителя

function keepScrollVisibility (activeElement, scrollParent) {

const {offsetHeight, offsetTop} = activeElement;

const {offsetHeight: parentOffsetHeight, scrollTop} = scrollParent;

const isAbove = offsetTop

const isBelow = offsetTop + offsetHeight> scrollTop + parentOffsetHeight;

if (isAbove) {

scrollParent.scrollTo (0, offsetTop);

} else

if (isBelow) {

scrollParent.scrollTo (0, offsetTop — parentOffsetHeight + offsetHeight);

}

}

/ *

* Редактируемый код комбинированного списка

* /

const Combobox = function (el, options) {

// element refs

this.el = el;

this.inputEl = el.querySelector (‘ввод’);

this.listboxEl = el.querySelector (‘[role = listbox]’);

// данные

это.idBase = this.inputEl.id;

this.options = options;

// состояние

this.activeIndex = 0;

this.open = false;

};

Combobox.prototype.init = function () {

this.inputEl.value = options [0];

this.inputEl.addEventListener (‘ввод’, this.onInput.bind (это));

this.inputEl.addEventListener (‘размытие’, this.onInputBlur.bind (это));

это.inputEl.addEventListener (‘щелчок’, () => this.updateMenuState (true));

this.inputEl.addEventListener (‘keydown’, this.onInputKeyDown.bind (это));

this.options.map ((option, index) => {

const optionEl = document.createElement (‘div’);

optionEl.setAttribute (‘role’, ‘option’);

optionEl .id = `$ {this.idBase} — $ {index}`;

optionEl.className = index === 0? ‘combo-option option-current’: ‘combo-option’;

optionEl.setAttribute (‘aria-selected’, `$ {index === 0}`);

optionEl.innerText = option;

optionEl.addEventListener (‘щелчок’, () => {this.onOptionClick (index);});

optionEl.addEventListener (‘mousedown’, this.onOptionMouseDown.bind (это));

this.listboxEl.appendChild (optionEl);

});

};

Combobox.prototype.onInput = function () {

const curValue = this.inputEl.value;

const соответствует = filterOptions (this.options, curValue);

// установите для activeIndex первую опцию сопоставления

// (или оставьте ее в покое, если активная опция уже находится в наборе сопоставлений)

const filterCurrentOption = match.filter (option => option === this .options [this.activeIndex]);

if (соответствует.length> 0 &&! FilterCurrentOption.length) {

this.onOptionChange (this.options.indexOf (соответствует [0]));

}

const menuState = this.options.length> 0;

if (this.open! == menuState) {

this.updateMenuState (menuState, false);

}

};

Combobox.prototype.onInputKeyDown = функция (событие) {

const max = this.options.length — 1;

const action = getActionFromKey (событие, this.open);

переключатель (действие) {

case MenuActions.Next:

case MenuActions.Last:

case MenuActions.Первый:

case MenuActions.Previous:

event.preventDefault ();

вернуть this.onOptionChange (getUpdatedIndex (this.activeIndex, max, action));

case MenuActions.CloseSelect:

event.preventDefault ();

this.selectOption (this.activeIndex);

вернуть this.updateMenuState (false);

case MenuActions.Close:

event.preventDefault ();

вернуть это.updateMenuState (ложь);

case MenuActions.Open:

return this.updateMenuState (true);}

};

Combobox.prototype.onInputBlur = function () {

if (this.ignoreBlur) {

this.ignoreBlur = false;

возврат;

}

if (this.open) {

this.selectOption (this.activeIndex);

this.updateMenuState (ложь, ложь);

}

};

Поле со списком.prototype.onOptionChange = функция (индекс) {

this.activeIndex = index;

this.inputEl.setAttribute (‘aria-activedescendant’, `$ {this.idBase} — $ {index}`);

// обновить активный стиль

const options = this.el.querySelectorAll (‘[role = option]’);

[… параметры] .forEach (optionEl => {

optionEl.classList.remove (‘option-current’);

});

опции [индекс] .classList.add (‘option-current’);

если (this.open && isScrollable (this.listboxEl)) {

keepScrollVisibility (параметры [индекс], this.listboxEl);

}

};

Combobox.prototype.onOptionClick = function (index) {

this.onOptionChange (index);

this.selectOption (индекс);

this.updateMenuState (ложь);

};

Combobox.prototype.onOptionMouseDown = function () {

this.ignoreBlur = true;

};

Поле со списком.prototype.selectOption = функция (индекс) {

const selected = this.options [index];

this.inputEl.value = selected;

this.activeIndex = index;

// обновить aria-selected

const options = this.el.querySelectorAll (‘[role = option]’);

[… параметры] .forEach (optionEl => {

optionEl.setAttribute (‘aria-selected’, ‘false’);

});

опции [индекс] .setAttribute (‘aria-selected’, ‘true’);

};

Поле со списком.prototype.updateMenuState = function (open, callFocus = true) {

this.open = open;

this.inputEl.setAttribute (‘расширенный aria’, `$ {open}`);

открыто? this.el.classList.add (‘открыть’): this.el.classList.remove (‘открыть’);

callFocus && this.inputEl.focus ();

};

// Комбинация инициализации

const comboEl = document.querySelector (‘. Js-combobox’);

const options = [‘HTML’, ‘CSS’, ‘JavaScript’, ‘PHP’, ‘MySQL’, ‘React’, ‘Angular’, ‘Python’];

const comboComponent = новый Combobox (comboEl, параметры);

комбоКомпонент.в этом();

/ *

* Код выбора только для чтения

* /

const Select = function (el, options) {

// element refs

this.el = el;

this.comboEl = el.querySelector (‘[роль = поле со списком]’);

this.listboxEl = el.querySelector (‘[role = listbox]’);

// данные

this.idBase = this.comboEl.id;

this.options = options;

// укажите

this.activeIndex = 0;

this.open = false;

};

Select.prototype.init = function () {

this.comboEl.innerHTML = options [0];

this.comboEl.addEventListener (‘размытие’, this.onComboBlur.bind (это));

this.comboEl.addEventListener (‘щелкнуть’, () => this.updateMenuState (true));

this.comboEl.addEventListener (‘keydown’, this.onComboKeyDown.bind (это));

this.options.map ((option, index) => {

const optionEl = document.createElement (‘div’);

optionEl.setAttribute (‘role’, ‘option’);

optionEl.id = `$ {this. idBase} — $ {index} `;

optionEl.className = index === 0? ‘combo-option option-current’: ‘combo-option’;

optionEl.setAttribute (‘aria-selected’,` $ {index === 0} `);

optionEl.innerText = option;

optionEl.addEventListener (‘click’, event => {

event.stopPropagation ();

this.onOptionClick (индекс);

});

optionEl.addEventListener (‘mousedown’, this.onOptionMouseDown.bind (это));

this.listboxEl.appendChild (optionEl);

});

};

Select.prototype.onComboKeyDown = функция (событие) {

const {key} = событие;

const max = this.options.length — 1;

const action = getActionFromKey (событие, this.открыто);

переключатель (действие) {

case MenuActions.Next:

case MenuActions.Last:

case MenuActions.First:

case MenuActions.Previous:

event.preventDefault ();

вернуть this.onOptionChange (getUpdatedIndex (this.activeIndex, max, action));

case MenuActions.CloseSelect:

case MenuActions.Space:

event.preventDefault ();

это.selectOption (this.activeIndex);

case MenuActions.Close:

event.preventDefault ();

вернуть this.updateMenuState (false);

case MenuActions.Type:

this.updateMenuState (true);

вернуть this.onOptionChange (Math.max (0, getIndexByLetter (this.options, key)));

case MenuActions.Open:

event.preventDefault ();

return this.updateMenuState (true);}

};

Выбрать.prototype.onComboBlur = function () {

if (this.ignoreBlur) {

this.ignoreBlur = false;

возврат;

}

if (this.open) {

this.selectOption (this.activeIndex);

this.updateMenuState (ложь, ложь);

}

};

Select.prototype.onOptionChange = function (index) {

this.activeIndex = index;

this.comboEl.setAttribute (‘aria-activedescendant’, `$ {this.idBase} — $ {index} `);

// обновить активный стиль

const options = this.el.querySelectorAll (‘[role = option]’);

[… параметры] .forEach (optionEl => {

optionEl.classList.remove (‘option-current’);

});

опции [индекс] .classList.add (‘option-current’);

if (isScrollable (this.listboxEl)) {

keepScrollVisibility (параметры [индекс], this.listboxEl);

}

};

Выбрать.prototype.onOptionClick = функция (индекс) {

this.onOptionChange (индекс);

this.selectOption (индекс);

this.updateMenuState (ложь);

};

Select.prototype.onOptionMouseDown = function () {

this.ignoreBlur = true;

};

Select.prototype.selectOption = функция (индекс) {

const selected = this.options [index];

this.comboEl.innerHTML = selected;

это.activeIndex = индекс;

// обновить aria-selected

const options = this.el.querySelectorAll (‘[role = option]’);

[… параметры] .forEach (optionEl => {

optionEl.setAttribute (‘aria-selected’, ‘false’);

});

опции [индекс] .setAttribute (‘aria-selected’, ‘true’);

};

Select.prototype.updateMenuState = function (open, callFocus = true) {

this.open = open;

это.comboEl.setAttribute (‘расширенная ария’, `$ {open}`);

открыто? this.el.classList.add (‘открыть’): this.el.classList.remove (‘открыть’);

callFocus && this.comboEl.focus ();

};

// init select

const selectEl = document.querySelector (‘. Js-select’);

const selectComponent = новый Выбрать (selectEl, options);

selectComponent.init ();

/ *

* Код множественного выбора

* /

const Multiselect = function (el, options) {

// element refs

this.el = el;

this.inputEl = el.querySelector (‘ввод’);

this.listboxEl = el.querySelector (‘[role = listbox]’);

this.idBase = this.inputEl.id;

this.selectedEl = document.getElementById (`$ {this.idBase} -selected`);

// данные

this.options = options;

// состояние

this.activeIndex = 0;

this.open = false;

};

Множественный выбор.prototype.init = function () {

this.inputEl.addEventListener (‘ввод’, this.onInput.bind (это));

this.inputEl.addEventListener (‘размытие’, this.onInputBlur.bind (это));

this.inputEl.addEventListener (‘щелкнуть’, () => this.updateMenuState (true));

this.inputEl.addEventListener (‘keydown’, this.onInputKeyDown.bind (это));

this.listboxEl.addEventListener (‘размытие’, this.onInputBlur.bind (это));

this.options.map ((option, index) => {

const optionEl = document.createElement (‘div’);

optionEl.setAttribute (‘role’, ‘option’);

optionEl.id = `$ {this. idBase} — $ {index} `;

optionEl.className = index === 0? ‘combo-option option-current’: ‘combo-option’;

optionEl.setAttribute (‘aria-selected’, ‘false ‘);

optionEl.innerText = option;

optionEl.addEventListener (‘ щелкнуть ‘, () => {this.onOptionClick (индекс);});

optionEl.addEventListener (‘mousedown’, this.onOptionMouseDown.bind (это));

this.listboxEl.appendChild (optionEl);

});

};

Multiselect.prototype.onInput = function () {

const curValue = this.inputEl.value;

const соответствует = filterOptions (this.options, curValue);

// установите для activeIndex первую опцию соответствия

// (или оставьте ее в покое, если активная опция уже находится в соответствующем наборе)

const filterCurrentOption = соответствует.фильтр (option => option === this.options [this.activeIndex]);

if (соответствует.length> 0 &&! FilterCurrentOption.length) {

this.onOptionChange (this.options.indexOf (соответствует [0]));

}

const menuState = this.options.length> 0;

if (this.open! == menuState) {

this.updateMenuState (menuState, false);

}

};

Multiselect.prototype.onInputKeyDown = функция (событие) {

const max = this.options.length — 1;

const action = getActionFromKey (событие, this.open);

переключатель (действие) {

case MenuActions.Next:

case MenuActions.Last:

case MenuActions.First:

case MenuActions.Previous:

event.preventDefault ();

вернуть this.onOptionChange (getUpdatedIndex (this.activeIndex, max, action));

case MenuActions.CloseSelect:

событие.preventDefault ();

вернуть this.updateOption (this.activeIndex);

case MenuActions.Close:

event.preventDefault ();

вернуть this.updateMenuState (false);

case MenuActions.Open:

return this.updateMenuState (true);}

};

Multiselect.prototype.onInputBlur = function () {

if (this.ignoreBlur) {

this.ignoreBlur = false;

возврат;

}

если (this.open) {

this.updateMenuState (false, false);

}

};

Multiselect.prototype.onOptionChange = function (index) {

this.activeIndex = index;

this.inputEl.setAttribute (‘aria-activedescendant’, `$ {this.idBase} — $ {index}`);

// обновить активный стиль

const options = this.el.querySelectorAll (‘[role = option]’);

[… опции] .forEach (optionEl => {

optionEl.classList.remove (‘текущая опция’);

});

опции [индекс] .classList.add (‘option-current’);

if (this.open && isScrollable (this.listboxEl)) {

keepScrollVisibility (options [index], this.listboxEl);

}

};

Multiselect.prototype.onOptionClick = function (index) {

this.onOptionChange (index);

this.updateOption (индекс);

это.inputEl.focus ();

};

Multiselect.prototype.onOptionMouseDown = function () {

this.ignoreBlur = true;

};

Multiselect.prototype.removeOption = функция (индекс) {

const option = this.options [index];

// обновить aria-selected

const options = this.el.querySelectorAll (‘[role = option]’);

options [индекс] .setAttribute (‘aria-selected’, ‘false’);

опций [индекс].classList.remove (‘выбранная опция’);

// удалить кнопку

const buttonEl = document.getElementById (`$ {this.idBase} -remove — $ {index}`);

this.selectedEl.removeChild (buttonEl.parentElement);

};

Multiselect.prototype.selectOption = функция (индекс) {

const selected = this.options [index];

this.activeIndex = index;

// обновить aria-selected

const options = this.el.querySelectorAll (‘[роль = опция]’);

опции [индекс] .setAttribute (‘aria-selected’, ‘true’);

options [индекс] .classList.add (‘option-selected’);

// добавить кнопку выбора удаления

const buttonEl = document.createElement (‘button’);

const listItem = document.createElement (‘li’);

buttonEl.className = ‘опция удаления’;

buttonEl.type = ‘кнопка’;

buttonEl.id = `$ {this.idBase} -remove — $ {index}`;

кнопка Эл.setAttribute (‘aria-описаноby’, `$ {this.idBase} -remove`);

buttonEl.addEventListener (‘щелчок’, () => {this.removeOption (index);});

buttonEl.innerHTML = selected + »;

listItem.appendChild (buttonEl);

this.selectedEl.appendChild (listItem);

};

Multiselect.prototype.updateOption = функция (индекс) {

const option = this.options [index];

const optionEl = this.el.querySelectorAll (‘[роль = опция]’) [индекс];

const isSelected = optionEl.getAttribute (‘aria-selected’) === ‘true’;

if (isSelected) {

this.removeOption (index);

} else

{

this.selectOption (index);

}

this.inputEl.value = »;

};

Multiselect.prototype.updateMenuState = function (open, callFocus = true) {

this.open = открытый;

this.inputEl.setAttribute (‘расширенный aria’, `$ {open}`);

открыто? this.el.classList.add (‘открыть’): this.el.classList.remove (‘открыть’);

callFocus && this.inputEl.focus ();

};

// init multiselect

const multiselectEl = document.querySelector (‘. Js-multiselect’);

const multiselectComponent = новый Multiselect (multiselectEl, options);

мультиселектКомпонент.в этом();

Пример комбинированного списка только для выбора | WAI-ARIA Authoring Practices 1.2

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

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

Специальные возможности

Хотя функциональные возможности и взаимодействие с пользователем в этом примере почти эквивалентны элементу HTML select с атрибутом size = "1" , реализованы следующие различия в поведении, чтобы улучшить как доступность, так и общее удобство использования.

1. Если поле со списком свернуто и пользователь вводит печатаемые символы, список отображается и получает фокус доступности через aria-activedescendant . Это позволяет пользователям воспринимать наличие опций, а пользователям вспомогательных технологий - понимать размер списка опций.
2. Перемещение по списку опций не устанавливает значение ввода. Это дает пользователям программ чтения с экрана, которым необходимо перемещаться между вариантами, чтобы их воспринимать, возможность исследовать варианты без потери текущего значения ввода.Значение устанавливается, когда пользователи нажимают Пробел , Введите или Tab , или когда фокус перемещается за пределы поля со списком. Текущее значение сохраняется, если список закрывается с помощью Escape или если пользователь сворачивает список, щелкнув ввод.

Поддержка клавиатуры

Пример поля со списком на этой странице реализует следующий интерфейс клавиатуры. Другие варианты и параметры интерфейса клавиатуры описаны в Раздел «Взаимодействие с клавиатурой» шаблона проектирования combobox.

Закрытый комбинированный список

Ключ	Функция
Стрелка вниз	Открывает список, если он еще не отображается без перемещения фокуса или изменения выбора. В фокусе DOM остается поле со списком.
Alt + стрелка вниз	Открывает список без перемещения фокуса или изменения выбора.
Стрелка вверх	Сначала открывает список, если он еще не отображается, а затем перемещает визуальный фокус на первый вариант. В фокусе DOM остается поле со списком.
Введите	Открывает список без перемещения фокуса или изменения выбора.
Пространство	Открывает список без перемещения фокуса или изменения выбора.
Дом	Открывает список и перемещает визуальный фокус на первый вариант.
Конец	Открывает список и перемещает визуальный фокус на последний вариант.
Печатаемые символы	Сначала открывает список, если он еще не отображается, а затем перемещает визуальный фокус на первый вариант, соответствующий набранному символу. Если несколько клавиш набираются в быстрой последовательности, визуальный фокус перемещается на первый вариант, который соответствует полной строке. Если один и тот же символ вводится последовательно, визуальный фокус циклически переключается между вариантами, начинающимися с этого символа

Всплывающее окно со списком

ПРИМЕЧАНИЕ: Когда визуальный фокус находится в списке, фокус DOM остается на поле со списком, а значение aria-activedescendant в поле со списком устанавливается равным значению, которое относится к параметру списка, который визуально отображается как сфокусированный.Если в следующих описаниях клавиатурных команд упоминается фокус, они относятся к визуальному индикатору фокуса. Для получения дополнительной информации об этой технике управления фокусом см. Использование aria-activedescendant для управления фокусом.

Ключ	Функция
Введите	Устанавливает значение для содержимого выбранной опции в списке. Закрывает список. Устанавливает визуальный фокус на поле со списком.
Пространство	Устанавливает значение для содержимого выбранной опции в списке. Закрывает список. Устанавливает визуальный фокус на поле со списком.
Выступ	Устанавливает значение для содержимого выбранной опции в списке. Закрывает список. Выполняет действие по умолчанию, перемещая фокус на следующий фокусируемый элемент. Примечание: собственный элемент закрывает список, но не перемещает фокус на вкладку. Этот шаблон соответствует поведению других комбинированных списков, а не собственному элементу в этом случае.
Побег	Закрывает список. Устанавливает визуальный фокус на поле со списком.
Стрелка вниз	Перемещает визуальный фокус к следующему параметру. Если визуальный фокус находится на последнем параметре, визуальный фокус не перемещается.
Стрелка вверх	Перемещает визуальный фокус к предыдущему параметру. Если визуальный фокус установлен на первом варианте, визуальный фокус не перемещается.
Alt + стрелка вверх	Устанавливает значение для содержимого выбранной опции в списке. Закрывает список. Устанавливает визуальный фокус на поле со списком.
Дом	Перемещает визуальный фокус к первому варианту.
Конец	Перемещает визуальный фокус на последнюю опцию.
PageUp	Перемещает визуальный фокус на 10 пунктов вверх (или к первому варианту).
PageDown	Перемещает визуальный фокус вниз на 10 вариантов (или к последнему варианту).
Печатаемые символы	Сначала открывает список, если он еще не отображается, а затем перемещает визуальный фокус на первый вариант, соответствующий набранному символу. Если несколько клавиш набираются в быстрой последовательности, визуальный фокус перемещается на первый вариант, который соответствует полной строке. Если один и тот же символ вводится последовательно, визуальный фокус циклически переключается между вариантами, начинающимися с этого символа

Роль, свойство, состояние и атрибуты Tabindex

Пример поля со списком на этой странице реализует следующие роли, состояния и свойства ARIA.Информация о других способах применения ролей, состояний и свойств ARIA доступна в разделе Раздел ролей, состояний и свойств шаблона проектирования combobox.

Поле со списком

Роль	Атрибут	Элемент	Использование
поле со списком		дел	Обозначает ввод как поле со списком.
	aria-labelledby = "# IDREF"	дел	Обозначает элемент, который маркирует поле со списком.
	aria-controls = "# IDREF"	дел	Обозначает элемент, который служит всплывающим окном.
	aria-extended = "false"	дел	Указывает, что всплывающий элемент не отображается .
	aria-extended = "true"	дел	Указывает, что всплывающий элемент отображается как .
	aria-activedescendant = "IDREF"	дел	Когда опция в списке визуально обозначена как имеющая фокус клавиатуры, относится к этой опции. При нажатии клавиш навигации, таких как Стрелка вниз , JavaScript изменяет значение. Позволяет вспомогательным технологиям узнать, какой элемент приложение считает сфокусированным, в то время как фокус DOM остается на элементе input . Для получения дополнительной информации об этой технике управления фокусом см. Использование aria-activedescendant для управления фокусом.

Всплывающее окно со списком

Роль	Атрибут	Элемент	Использование
список		див	Определяет элемент как список .
вариант		дел	Определяет элемент как список опция . Текстовое содержимое элемента обеспечивает доступное имя опции .
	aria-selected = "true"	ли	Указывается для параметра в списке, когда он визуально выделен как выбранный. Происходит только тогда, когда на параметр в списке ссылается aria-activedescendant .

Исходный код JavaScript и CSS

Исходный код HTML

Шаблон проектирования Combobox в WAI-ARIA Authoring Practices 1.2

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

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

Значение по умолчанию для элемента select может быть установлено с помощью атрибута ‘selected’ требуемой опции. Это логический атрибут.
Параметр с атрибутом ‘selected’ будет отображаться по умолчанию в раскрывающемся списке.

Синтаксис:

 Название параметра 
 

Пример-1: Использование выбранного атрибута.

< html > < голова > > установить значение по умолчанию для < выбрать > элемент title > head > < корпус > < h2 стиль = «цвет: зеленый» > GeeksforGeeks h2 > < b > Как установить значение по умолчанию 90 006 значение для элемента HTML < select >? b > < p > По умолчанию будет выбран вариант «Стартер» p > < p > Выберите свой план ниже: p > < выберите имя = «план» id = «план» > < опция значение = «бесплатно» > Бесплатно опция > < опция значение = «стартер» выбран> Стартер опция > 9 0021 < опция значение = «профессиональный» > Профессиональный опция > < опция значение = «корпоративный» > Корпоративный опция > выберите > корпус > html >

Вывод:
Перед щелчком по списку:

После щелчка по списку:

Пример 2: Это также можно использовать для добавления сообщения типа «Выберите параметр» в списке.Эта опция будет иметь атрибуты hidden и disabled в дополнение к selected.

< html > < голова > > Установите значение по умолчанию для < select > element title > head > < корпус > < h2 стиль = «цвет: зеленый» > GeeksforGeeks h2 > < b > Как установить значение по умолчанию для HTML < select > element? b > < p > Выбор варианта будет отображаться по умолчанию. p > < p > Выберите план ниже: p > < выберите имя = «план» id = «план» > < опция значение = «нет» выбрано отключено скрыто> Выберите опцию опцию > < опцию значение = «бесплатно» > Бесплатно опция > < опция значение = 9 0020 «стартер» > Стартер опция > < опция значение = «профессиональный» > Профессиональный опция > < опция значение = «корпоративный» > Корпоративный опция > выберите > body > html >

Вывод:
Перед щелчком по списку:

После нажатия list:

HTML - это основа веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-сайтов. pps.Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.

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

Выпадающие списки со списком - приложения Win32

• 20.10.2020
• 13 минут на чтение

В этой статье

Примечание

Это руководство по дизайну было создано для Windows 7 и не обновлялось для новых версий Windows.Большая часть рекомендаций по-прежнему применима в принципе, но презентация и примеры не отражают наши текущие рекомендации по проектированию.

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

Типичное поле со списком.

При чтении этой статьи важно понимать следующие термины:

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

Примечание

Рекомендации по верстке представлены в отдельной статье.

Это правильный контроль?

Чтобы принять решение, рассмотрите следующие вопросы:

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

Раскрывающиеся списки

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

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

• Хотите обратить внимание на вариант? Если это так, подумайте о переключателях, списке с одним выбором или редактируемом списке, которые, как правило, привлекают больше внимания, занимая больше места на экране.Поскольку раскрывающиеся списки компактны, они являются хорошим выбором для вариантов, которые вы хотите недооценивать.

• Требуется ли экранное пространство? Если это так, используйте раскрывающийся список, поскольку используемое пространство на экране фиксировано и не зависит от количества вариантов.

• Есть ли в окне другие раскрывающиеся списки? Если да, рассмотрите возможность использования раскрывающегося списка для единообразия.

Редактируемые раскрывающиеся списки

В дополнение к принципам, только что предусмотренным для раскрывающихся списков, также применяются следующие правила:

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

• Можете ли вы заранее перечислить наиболее вероятные варианты ? В противном случае используйте текстовое поле.

• Используется ли раскрывающийся список для перечисления предыдущих введенных пользователем данных? Если пользователям не нужно просматривать полный список ранее введенных данных, используйте текстовое поле с опцией автозаполнения.

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

  В этом примере текстовое поле с автозаполнением - хороший выбор.

• Потребуется ли пользователям помощь в выборе допустимых значений? Если да, используйте вместо этого текстовое поле с кнопкой «Обзор».

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

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

• Нужно ли пользователям быстро находить элемент в большом списке? (только Win32) Если да, используйте поле со списком, потому что пользователи могут выбрать элемент, введя его полное имя. Напротив, раскрывающийся список Win32 выбирает элементы только по последнему набранному символу (поэтому ввод «июн» в список месяцев будет соответствовать ноябрю, а не июню). В этом случае используйте поле со списком, даже если возможные варианты ограничены.

Редактируемые списки

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

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

Шаблоны использования

Выпадающие списки и поля со списком имеют несколько шаблонов использования:

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

Указания

Общий

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

Презентация

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

  Правильно:

  В этом примере элементы списка отсортированы по их пространственному соотношению.

  Неправильно:

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

  Правильно:

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

• Поместите параметры, которые представляют все или нет, в начало списка, независимо от порядка сортировки оставшихся элементов.

• Заключите метаопции в круглые скобки.

  В этом примере «(Нет)» является метаопцией, потому что это недопустимое значение для выбора, а скорее описывает, что сама опция не используется.

• При отключении раскрывающегося списка или поля со списком также отключите все связанные метки и командные кнопки.

Раскрывающиеся списки

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

• Нет пустых элементов списка используйте метаопции вместо . Пользователи не знают, как интерпретировать пустые элементы, в то время как значение мета-параметров является явным.

  Правильно:

  Неправильно:

  В неверном примере значение пустой опции неясно.

Раскрывающиеся списки предварительного просмотра

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

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

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

  Неправильно:

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

Комбинированные блоки

• По возможности ограничивайте длину вводимого текста. Например, если допустимый ввод - число от 0 до 999, используйте поле со списком, которое ограничено тремя символами.

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

  В этом примере не указаны многие допустимые варианты, например 15 или шрифты половинного размера, например 9,5.

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

• Выберите самый безопасный (для предотвращения потери данных или доступа к системе) и наиболее безопасный вариант по умолчанию. Если безопасность не являются факторами, выберите наиболее вероятный или удобный вариант.
  • Исключение: Отображать пустое значение по умолчанию, если элемент управления представляет свойство в смешанном состоянии, что происходит при отображении свойства для нескольких объектов, у которых нет одинаковых параметров.

Подсказки

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

Типичное приглашение.

Использовать подсказку, когда:

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

Не используйте подсказки только для того, чтобы побудить пользователей выбрать что-то из списка или нажимать кнопки. Например, такие запросы, как «Выберите параметр» или «Введите имя файла, а затем нажмите« Отправить », не нужны.

При использовании подсказок:

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

Неправильно:

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

Рекомендуемый размер и шаг

Рекомендуемый размер и интервал для раскрывающихся списков и полей со списком.

• Выберите ширину, подходящую для самых длинных действительных данных. Выпадающие списки нельзя прокручивать по горизонтали, поэтому пользователи могут видеть только то, что отображается в элементе управления. (Обратите внимание, однако, что в полях со списком может быть включена функция AutoScroll.)
• Включите дополнительные 30 процентов (до 200 процентов для более короткого текста) для любого текста (но не чисел), который будет локализован.
• Выберите длину списка, исключающую ненужную вертикальную прокрутку. Поскольку раскрывающиеся списки отображаются по запросу, их списки должны содержать до 30 элементов.Редактируемые списки (те, у которых нет раскрывающейся кнопки) должны отображать от 3 до 12 элементов.

Этикетки

Контрольные этикетки

• Напишите метку как слово или фразу, а не как предложение, и завершите его двоеточием. Исключения:

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

• Назначьте уникальный ключ доступа для каждой метки. Инструкции см. В разделе Клавиатура.

• Используйте заглавные буквы в стиле предложения.

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

  Правильно:

  В этом примере метка правильно выровнена с контрольным текстом.

  Неправильно:

  В этом примере метка неправильно выровнена с контрольным текстом.

• Вы можете указать единицы измерения (секунды, соединения и т. Д.) В скобках после метки.

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

Текст опции

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

Текст инструкции

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

• Используйте заглавные буквы в стиле предложения.

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

  В этом примере показана дополнительная информация, размещенная под элементом управления.

Документация

При обращении к раскрывающимся спискам:

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

Пример: в списке Размер шрифта щелкните Крупные шрифты .

При обращении к полям со списком:

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

Пример: в поле Font введите шрифт, который вы хотите использовать.

Поле со списком

HTML · GitHub

Поле со списком HTML · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Поле со списком HTML

	->
	AB - Альберта
	AL - Алабама
	Миннесота - Миннесота
	Техас - Техас

Вы не можете выполнить это действие в настоящее время.

No related posts.

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

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

Комментарий *

Имя *

Email *

Сайт