Совмещу рубрику You don't know HTML с разбором возможностей, которые чаще всего сохраняли в список для чтения в ходе опроса State Of HTML. Начну с
<datalist>. По спецификации,
<datalist> — это набор предопределённых значений для поля ввода. В базовом случае это контейнер для элементов <option>. Он привязывается к <input> при помощи атрибутов list и id. Опции — это готовые варианты, доступные для выбора в качестве значения поля ввода. При этом само поле остаётся редактируемым. Иными словами, это встроенный в браузеры элемент Combobox.<label for="country"></label>
<input type="text" id="country" list="sugguestions">
<datalist id="sugguestions">
<option value="USA"></option>
<option value="Germany"></option>
<option value="Spain"></option>
<!-- ... -->
</datalist>
На десктопе отображается выпадающий список с опциями. Он похож на тот, что отображается при
autocomplete. На мобильных устройствах в верхней части виртуальной клавиатуры появляется прокручиваемая панель с опциями. Это механизмы браузера, изменять внешний вид и поведение нельзя. Кроме того, есть некоторая неконистентность поведения между браузерами и операционными системами.С точки зрения доступности,
<input list> получает встроенную роль combobox и соответствующие ARIA-атрибуты. Предусмотрена клавиатурная навигация: опции можно переключать стрелками и выбирать при помощи Enter или Space, закрыть список можно по Esc, а открыть стрелкой вниз. Однако не все так гладко с доступностью. Заведено issue с описанием проблем.<datalist> может предоставлять резервный вариант в браузерах, которые про такой элемент не знают. Внутрь <datalist> можно поместить <select> с набором <option>. Если браузер поддерживает <datalist>, то он проигнонирует всё, кроме <option>. Если браузер не поддерживает <datalist>, то он будет считать элемент как <span> и отобразит внутреннее содержимое. На практике такое вряд-ли понадобится, потому что все современные браузеры элемент поддерживают. Но такой способ применения есть.<label for="country">Country</label>
<input type="text" id="country" list="sugguestions">
<datalist id="sugguestions">
<label for="fallback">(or choose one of them)</label>
<select id="fallback">
<option value="us">USA</option>
<option value="de">Germany</option>
<option value="es">Spain</option>
<!-- ... -->
</select>
</datalist>
<datalist> по-разному взаимодействует с разными типами полей ввода. Он не работает для полей с типами hidden, password, checkbox, radio, file, submit, image, reset и button. Для полей с типами text, search, tel, email, url и number отображается выпадающий список с опциями. Для полей с типами date, month, week, time и datetime-local нужно соблюдать определённый формат значений value у <option>, чтобы подсказки появились. Для range отображаются засечки, к которым привязывается ползунок. Для выбора типа color отображаются цветные квадраты, если value задан в полном или сокращённом формате HEX. На мобильных устройствах своё поведение в зависимости от типа. Примеры можно посмотреть в Доке.Использовать элемент можно по-разному. Если есть статистика поиска в интернет-магазине, то можно добавить 5 самых популярных товаров в качестве подсказок. Или для поля ввода города добавить наиболее частые варианты. Можно переопределить варианты, которые сгенерировал браузер на основе
autocomplete. Второе дыхание элемент
<datalist> получит благодаря предложению от OpenUI. Его суть в том, чтобы переиспользовать <datalist> для стилизации многострадального <select>. Подробнее в следующем посте.#ydkhtml