What’s the point of a label tag for a select tag?
(HTML) I realize that the label tag for an input tag puts the cursor in the field when you click the label, but it doesn’t seem to do anything for a select tag. Is it even useful for a select tag or necessary for anything?
3 Answers 3
Clicking on a label element focuses on the associated control even when the control is a select element. This is a real effect, though it is unclear whether there is much use for it (unlike for radio buttons and checkboxes, which tend to be tiny and pose problems to people with motoric disabilities).
In screen readers and assistive software, the label markup can help in different ways, as described in the WCAG 2.0 document Labels or Instructions: Understanding SC 3.3.2. In particular: “When label elements are associated with input elements the label is spoken by screen readers when the field receives focus and users with impaired motor control are helped by a larger clickable area for the control, since clicking on the label or the control will activate the control.” So for example, if the user moves around using the Tab key (to focus on a control), the browser or assistive software may react to the focusing by speaking the associated label.
It tells people what they are selecting.
Consider the difference between:
Now remove the labels and try to fill in the correct answers.
There may not be any additional functionality in tying a label to a select , but it adds semantic meaning to the label by associating them. In addition, it provides context for assistance software like screen readers that may be used by users with visual disabilities.
Стилизация Select-Option (почти) без JavaScript
Стилизация некоторых стандартных элементов — довольно нетривиальная задача.
Разумеется, хороший специалист может стилизовать что угодно, однако всё упирается в сложность этого действия.
Для стилизации радиокнопок и чекбоксов потребуется совсем немного времени — идея стилизации label со скрытыми input не нова, и давно и повсеместно используется.
Для стилизации остального — есть JavaScript.
Сегодня я хочу рассказать Вам о том, как можно относительно просто стилизовать выпадающие списки, с минимальным кодом JavaScript (от 0 до 26 строк) и минимальной дополнительной разметкой HTML.
На днях у меня, как это часто и бывает, возникла необходимость стилизовать выпадающий список. Однако именно выпадающим списком он становился только в мобильной версии, до этого же он вёл себя как самая обычная группа радиокнопок.
И вот, когда я уже почти закончил писать очередную жуткую конструкцию, призванную заменить несчастный Select, у меня возник вопрос:
Обычно этот вопрос ведёт к умудрённой прокрастинации, переосмыслению жизни и т.д., но в этот раз что-то пошло не так, и я понял, что вопрос и правда был хорошим, а главное — полезным.
Итак, для тех, кто в танке, а также тех, кому выпадающие списки доставили столько боли, что они решили забыть о них, как о страшном сне, я немножко (правда) напомню о том, что это такое.
Выпадающие списки состоят из 2 основных элементов:
Основной функционал выпадающего списка — отправка информации о выбранном(ых) пункте(ах) на сервер.
Для полноты картины, вот список атрибутов элементов (чтобы можно было оценить, сколько из них будут реализованы):
- Select — disabled , form , multiple , name , required , size
- Option — disabled , label , selected , value
Уже было написано немало слов, поэтому — ближе к коду:
Итак, чем же хорош этот код? (всё, без чего можно обойтись при объяснении, убрано специально)
Давайте отметим, какие пункты из функционала Select и Option автоматически стали возможны, за счёт использования input + label:
Чтобы реализовать пункт Select.multiple (множественный выбор) — достаточно сделать так:
Мы всего-навсего меняем тип input’ов с Radio на Checkbox, и получаем практически полный аналог multiple.
Разница в том, что для множественного выбора не нужно зажимать ctrl (ну а если кто-то хочет полностью имитировать функционал — JavaScript в помощь).
- Select.size — какой зададите размер, такой и будет. Необходимо будет просто добавить контейнер.
- Select.disabled — для контейнера нужно добавить pointer-events: none , чтобы отменить реакцию на любые действия пользователя (наведение, клики и т.д.), ну и можно сделать его чуть прозрачным.
Нужно также добавить автозаполнение заголовка для выпадающего меню с единственным выбором, а также возникнет проблема при сбросе формы (кнопка Reset), т.к. заголовок не сбросится. Но и это — вполне решаемо (с помощью JavaScript).
Немного реализации (выпадающее меню с единичным выбором):
И ещё немного (не выпадающее меню с множественным выбором):
Бонус: не знаю, зачем я это сделал, но… выпадающее меню с единичным выбором и работающим на CSS сбросом заголовка:
В связи с тем, что судя по комментариям, не все понимают, для чего будет полезен данный код, считаю нужным дать некоторые разъяснения.
При стилизации выпадающих списков вида:
которым с помощью JavaScript навешивают весь необходимый функционал.
Поскольку изначально списки никак не взаимодействуют с формами, из-за этого возникают проблемы.
Мало того, что необходимо реализовать весь основной функционал:
- переключение пунктов и их взаимодействие
- состояния (checked, disabled)
- привязка к форме и отправка данных на сервер
- инициализация исходных данных (автозаполнение)
- сброс формы (при нажатии на кнопку «reset» список нужно вернуть в состояние при инициализации)
Фактически, если в JavaScript что-то ломается, не важно, из-за чего — скрипт не догрузился, возник баг, внесли правки — при возникновении любой проблемы выпадающий список превращается в… что-то, выглядящее как выпадающий список, но не работающее.
Вообще. Никак.
Для пользователя это будет выглядеть так: есть выпадающий список, но работать с ним нельзя.
Для сервера это будет выглядеть ещё «веселее» — пришла форма, в которой не хватает части данных. Хорошо, что такую ситуацию заранее предусмотрели при разработке… Ведь предусмотрели, правда?
Плюсы получившегося решения:
- Весь основной функционал (смотри выше), кроме сброса заголовка ВСЕГДА будет работать. Даже если у человека вообще отключён JavaScript (хоть это и стало практически неактуально). Единственное, что может пойти не так — нельзя будет открыть список. Но и в этом случае отправится значение по умолчанию, плюс смену состояний — список открыт/закрыт — можно реализовать прямо в коде html (защита от проблем с файлом JS), или вообще открывать по наведению.
- Данного функционала достаточно для большинства подобных списков. Да, возникнут проблемы у людей, использующих дополнительный функционал (об этом ниже). Но в случае со списком на ul — li для работы и вовсе требуется библиотека, и много что может пойти не так.
Минусы (доп. функционал, который не реализован, и добавляется JavaScript’ом / библиотеками):
- Переключение с помощью tab
- Управление стрелками (в стандартном select можно менять выбранный пункт кнопками вверх-вниз)
- Озвучка скринридерами (для людей, у которых проблемы со зрением текст на странице озвучивается)
- Не работает как нативный select на мобильных (на мобильных select довольно удобно работает сам по себе. При желании можно определять устройство и подменять на стандартный select)
- Список не умеет выпадать вверх, если снизу край вьюпорта (JS сделает это)
- Группировка пунктов (аналог OptGroup) (сложно, и очень редко встречается)
Как видно, ничто из вышеперечисленных минусов не является критичным для подавляющего большинства списков, и при необходимости реализуется с помощью JavaScript, а потому.
Добро пожаловать в мир, где Ваши библиотеки для стилизации Select-Option-подобных списков станут чуточку меньше, а работа с этими списками без библиотек — почти комфортной!
UPD: как оказалось, в случае с чекбоксами атрибут required работает некорректно, и его также необходимо эмулировать с помощью JavaScript (на данный момент обязательными становятся все чекбоксы, отмеченные как required, и только они)
Display label inside select
I couldn’t find any relevant information and not even sure it’s feasible in HTML, but I would like to display a Label line above the value in a select field, like the «EXP MONTH/YEAR» in the following image: Is that doable? I’ve been searching for a way to implement it for a few days days to no avail. Thanks!
are you looking for something like this? codepen.io/anon/pen/mmZGgB if not, you’ll likely need to use a plugin like select2.github.io you can’t add multiple lines to select values in a standard html select box.
Your best bet is to use a javascript plugin for a custom select and configure it how you want it to display and function. An example of one would be select2
You could adapt something like float labels, shown here to suit your needs: css-tricks.com/float-labels-css
No, that codepen isn’t what I was looking for. I want it inside the select, like in the image I posted. select2 might work, but I don’t really see how in the documentation. Guess I will have to play with it and see.
2 Answers 2
I may be a little bit late, but: You do not need anything special, it’s simply formating. Put label on top of form, wrap both label and select in a div, then adjust background colors and borders. See the example:
.select-wrap < border: 1px solid #777; border-radius: 4px; margin-bottom: 10px; padding: 0 5px 5px; width:200px; background-color:#ebebeb; >.select-wrap label < font-size:10px; text-transform: uppercase; color: #777; padding: 2px 8px 0; >select
I somehow remembered that I have this post. As I have improved it for personal usage, and this is version is better (you can click anywhere inside select — it will trigger dropdown, while on previous version you couln’t) I thought I should share an update I have made to my code and used since.
.select-wrap < border: 1px solid #777; border-radius: 4px; padding: 0 5px; width:200px; background-color:#fff; position:relative; >.select-wrap label < font-size:8px; text-transform: uppercase; color: #777; padding: 0 8px; position: absolute; top:6px; >select
A click on the label will (on most browsers) only focus the select widget and not display all the options in the dropdown. To pass the click events through to the select widget, use pointer-events: none; on the label.
Try with the below code, I have refer it from here, https://codepen.io/chriscoyier/pen/CiflJ
It’s not the exact what you want I think, but it is similar to that and more jazzy, so just play with this, might be you like it.
form < width: 320px; float: left; margin: 20px; >form > div < position: relative; overflow: hidden; >form input, form textarea, form select < width: 100%; border: 2px solid gray; background: none; position: relative; top: 0; left: 0; z-index: 1; padding: 8px 12px; outline: 0; >form input:valid, form textarea:valid, form select:valid < background: white; >form input:focus, form textarea:focus, form select:focus < border-color: grey; >form input:focus + label, form textarea:focus + label, form select:focus + label < background: grey; color: white; font-size: 70%; padding: 1px 6px; z-index: 2; text-transform: uppercase; >form label < transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s; position: absolute; color: #999; padding: 7px 6px; >form textarea < display: block; resize: vertical; >form.go-bottom input, form.go-bottom textarea, form.go-bottom select < padding: 12px 12px 12px 12px; >form.go-bottom label < top: 0; bottom: 0; left: 0; width: 100%; >form.go-bottom input:focus, form.go-bottom textarea:focus, form.go-bottom select:focus < padding: 4px 6px 20px 6px; >form.go-bottom input:focus + label, form.go-bottom textarea:focus + label, form.go-bottom select:focus + label