Ввод
Ввод
Десять компонентов, и первый вопрос к любому из них один: значение вводят или выбирают? Вводят — поле; выбирают — зависит от того, сколько вариантов и видны ли они все сразу.
Сравнение стоит здесь, а не на страницах: «возьмите другое» — это утверждение о СОСЕДЯХ, и повторённое десять раз оно расходится с ними по одной строке за правку.
Значение вводят
| Что нужно | Возьмите | Почему не соседа |
|---|---|---|
| Произвольный текст: имя, путь, запрос | Текстовое поле | У селекта нет свободного ввода |
| Число, которое тянут мышью, в плотном ряду инспектора | Числовое поле | В обычной форме буква оси ничего не значит — там текстовое поле с суффиксом |
| Приблизительное значение из непрерывного диапазона: громкость, порог | Слайдер | Попасть бегунком в 47 из 100 нельзя — если нужно точное, это числовое поле |
| Фильтрация списка, которую часто стирают целиком | Поиск | input[type=search] даёт нативный крестик, у текстового поля его нет |
| Загрузка файла или зона перетаскивания | Поле файла | «Экспортировать» — это кнопка, а не зона |
| Ключи шаблона под полем, которые вставляют в текст | Подстановки | У них нет выбранного состояния: это вставка, а не выбор |
Значение выбирают
| Сколько вариантов | Возьмите | Почему не соседа |
|---|---|---|
| Два состояния: включено или нет | свитч или чекбокс | У одного варианта нет пары |
| 2–4 равноправных, все на виду | сегментированный контрол | Селект прячет выбранное за раскрытием |
| 2–4, и у каждого есть что объяснить | Выбираемую карточку | Карточка вокруг слова «Да» — лишняя рамка |
| Больше пяти взаимоисключающих | Селект | Двенадцать карточек — это не выбор, а страница |
| Несколько включённых сразу и все на виду | чип | В селекте выбран ровно один, если не multiple |
Когда ни один не подходит
| Что нужно | Возьмите | Почему не отсюда |
|---|---|---|
| Настройка применяется сразу, без отправки | свитчи в списке свойств | Форма с кнопкой там соврёт: она обещает «применится по нажатию» |
| Список, который нужно искать или дополнять | комбобокса в ките пока нет | Селект берёт готовый список и не дополняется |
| Действия, а не значения | меню в поповере | Селект хранит выбранное, меню — нет |
| Показ величины без ввода | мера | Слайдер выглядит контролом и приглашает себя тянуть |
| Значение только для чтения | readonly, а не disabled |
disabled выкидывает поле из обхода и из отправки формы |
Общее для всех десяти
Форма нужна, когда полей больше двух и они применяются по отправке. Одно поле само по себе формы не требует — форма вокруг него избыточна.
Подпись обязательна у каждого поля. placeholder подписью не является: он
исчезает при вводе, и человек, отвлёкшийся на середине, теряет имя того, что
заполняет.
Состояние ошибки живёт на :user-invalid, а не на классе. Браузер знает,
трогали ли поле; класс не знает и красит пустое поле красным до первого
касания.
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument