Исторически
Однако это не обязательно верно в случае современной сети, поэтому давайте узнаем, как размечать формы, используя только HTML и CSS.
Формирование базовой структуры
Ввод формы с предварительно заполненным значением
Начните с
Если вы отправляете данные формы естественным образом (то есть без JavaScript), вам необходимо включить actionатрибут, где значением является
Кроме того, есть менее используемый enctypeатрибут, который определяет тип кодирования отправляемых данных. Кроме того, этот targetатрибут, хотя и не обязательно уникальный для форм, может использоваться для отображения вывода на новой вкладке.
Формы на основе JavaScript не обязательно нуждаются в этих атрибутах.
Формы состоят из входных данных, которые ожидают значений данных.
Включение ярлыков для лучшего удобства использования и доступности
Каждому входу нужна метка.
Метка — это текстовый дескриптор, описывающий, для чего предназначен ввод. Есть три способа объявить метку, но один из них лучше двух других. Давайте погрузимся в них сейчас.
Смежные ярлыки
Смежные метки требуют больше всего кода, потому что нам нужно явно объявить, какие входные данные описывает метка. Для большинства это нелогично, потому что вместо этого мы можем обернуть входные данные внутри меток, чтобы добиться того же эффекта с меньшим количеством кода.
При этом соседний метод может понадобиться в исключительных обстоятельствах, так что вот как это будет выглядеть:
Как видно из приведенного выше примера, forатрибут
Этикетки ARIA
Хотя семантический HTML лучше, метки ARIA (Accessible Rich Internet Applications) могут компенсировать их отсутствие. В этом случае вот как может выглядеть метка в отсутствие фактического HTML
aria-label="First name">
К сожалению, недостатком этого подхода является отсутствие визуальной метки. Однако это может подойти для некоторых пометок (например, форма с одним вводом с заголовком и заполнителем):
Subscribe
(Сейчас я объясню, для чего нужны заполнители.)
Упаковочные этикетки
Обертывание входных данных внутри меток — самый чистый подход. Кроме того, благодаря CSS:
First name
Заполнители и ярлыки
Два входа с видимым
Краткое сравнение:
Метки сообщают, что ожидает ввод
Заполнители показывают примеры указанных ожиданий
Заполнители не предназначены для использования в качестве альтернативы меткам, хотя, как мы видели в приведенном выше примере с ARIA, они могут вернуть часть контекста, утраченного при отсутствии визуальных меток.
В идеале, однако, мы должны использовать оба:
First name
Выбор типов ввода
Заполнители применяются только к текстовому вводу, но на самом деле существует целый ряд различных типов ввода, в том числе:
Семантические типы ввода полезны при проверке формы, особенно при использовании встроенной проверки, которую мы вскоре рассмотрим.
Стилизация входных данных
Возможно, самый раздражающий аспект кодирования форм — это переопределение стилей браузера по умолчанию. К счастью, на сегодняшний день, appearance: none; по данным caniuse.com, поддержка браузерами составляет 96,06%.
После сброса стиля
input {
-
-
appearance: none;
...
}
Однако некоторые из этих входных данных могут иметь особенности, которые трудно или даже невозможно преодолеть (в зависимости от
Однако есть и серебряная подкладка...
Указаниеinputmode
По данным caniuse.com, поддержка
Лучше, чем ничего, верно?
Проверка пользовательского ввода
Если вы выберете проверку нативного HTML, а не решение на JavaScript, помните, что inputmodeв этом отношении вы ничего не добьетесь. inputmode="email" не будет проверять адрес электронной почты, тогда как input type="email"будет. В этом разница.
Отложив это в сторону, давайте обсудим, что запускает проверку:
