Блеск и нищета форм в ХТМЛ
В вебе очень много форм — зайдите на любой сайт, точно найдёте хотя бы один инпут. Сегодня мы поговорим о том, как строить формы — это не очень-то и легко, на самом деле: ведь нужно не забывать про a11y.
Самый базовый элемент, в котором находятся другие контролы — инпуты, чекбоксы, селекты, кнопки.
Давайте разберём частые и непонятные атрибуты, остальные — посмотрите на cssreference.
В экшен мы указываем адрес, куда отправится форма. Обычно это адрес ХТТП-ресурса, который сможет принять запрос (помните второй урок?). Например, если у вас форма поиска, то, скорее всего, у сервера будет ресурс /search (но это не факт!).
ХТТП-метод, который принимает запрос: гет или пост. Уточняйте у своего бэкэндера.
Если расшифровывать, encoding type — формат, в котором нужно передать данные. Уточняйте у бэкэндера.
Значения:
enctype="application/x-www-form-urlencoded"— дефолт,enctype="text/plain"— чистый текст, используется редко,enctype="multipart/form-data"— для загрузки файлов.
Селект это выпадающий список со значениями, которые указаны через option.
iframe: https://jsfiddle.net/4f4pcku7/embedded/result,html
У option есть атрибут value — это то, что используется как данные при отправке формы. Между тегами может быть написано всё что угодно, но уйдёт значение из value.
Хочу уточнить, что селекты рисуются системой — поэтому они в разных системах выглядят по-разному. Можно ли их стилизовать? Увы, нет — вы не сможете застилизовать открытый список, но сможете сам селект, если предварительно сбросите стиль через appearance.
Не забывайте про поддержку браузеров! Работает далеко не во всех, а в тех, что работает — нужны вендорные префиксы -moz- и -webkit-.
Как стилизовать тогда без этого свойства? Через позиционирование и opacity: вы скрываете сам селект, а под него (через z-index) кладёте застилизованный элемент (например, кнопку).
Кнопки! Ну тут всё просто: можно задать тип через type: либо submit, либо reset — в первом случае нажатие на кнопки отправит данные на сервер, во втором — сбросит.
По-умолчанию стоит submit, поэтому будьте осторожны — можно случайно заставить кнопку сброса отправлять данные, если забудете проставить тип.
Большое поле ввода.
iframe: https://jsfiddle.net/6mpozguc/embedded/result,html/
Обязательное поле name — имя контрола, нужно, чтобы разграничивать на сервере одни данные от других (вы же не отправите имя как фамилию, верно?). Кстати, к селекту тоже относится — каждому контролу, с которым взаимодействует пользователь, нужно задавать name.
Самый богатый контрол из всех форм. Дело в том, что он может вести себя абсолютно по-разному только благодаря атрибуту type: text, password, email, number будут вести себя как обычный инпут ввода, но на мобильных девайсах будет заметна разница: клавиатура будет меняться у email и number. Ну и, конечно же, нужно будет соблюдать формат: от email будет ожидание что там емейл, а в number нельзя будет ввести текст.
Чекбокс это контролы, которые можно выбрать несколько раз.
iframe: https://jsfiddle.net/puurw9ow/2/embedded/result,html/
Чем радио отличается от чекбокса? Тем, что из радио под одним name можно выбрать только одно значение.
iframe: https://jsfiddle.net/puurw9ow/3/embedded/result,html/
Кстати, как я сделал так, чтобы при клике на текст выбиралось значение?
Через label! Тег лейбл либо обрамляет элемент:
<label>
<input name="js-library" value="react" type="radio">
Реакт
</label>либо работает через атрибут for и связывается с контролом через id:
<input id="js-library-react" name="js-library" value="react" type="radio">
<label for="js-library-react">Реакт</label>Давайте запомним правила:
- всегда должен быть тег
formпри работе с формами, - нужно не забывать про
name, - в ХТМЛ есть разные контролы — от чекбоксов до текстареи,
- не забывайте про
label— не просто воткнуть его на страницу, а обрамить им контрол либо использовать через атрибутыforиid.
Задания не будет, потому что самая богатая форма уже сделана на htmlreference.