20. Создание сайта с помощью фреймворков. Работа с формами

Автор Denis Lisitsin
20. Создание сайта с помощью фреймворков. Работа с формами

если есть область на которой все фреймворки постоянно пытаются сфокусировать свои усилия — это формы поскольку элементыформы сложнее всего стерилизовать для нескольких браузеров фреймворки пытаются сделать процесс структурирования и стерилизации форум проще — это логично чтобы рассмотреть как фреймворки работают с формами мы поближе рассмотрим Foundation если я в исходном коде кручу вниз где, тогда строке 60 вы увидите, что у нас есть контактная форма я обычно люблю структурировать формы с помощью не упорядоченных списков потому, что элементы форм связаны между собой и неупорядоченный список.

Это хороший способ показать эту связь с точки зрения семантики, а также — это дает дополнительные хуки для стилизации, но в этом случае когда я выбирал фреймворк, что мне нужно было сделать — это посмотреть как он работает стерилизуют и структурирует формы я провел много времени фреймворк Foundation. И сейчас мы посмотрим как он разбирается с формами чтобы знать как их структурировать в соответствии с фреймворком так, что иногда придётся идти на уступки. Вы видите, что есть лейблы элементов форм затем сами элементы форм то есть нет никакой дополнительной разметки только самое обыкновенное структура которую я обычно продаю форме если я просмотрю эту в браузере и про кручу вниз вы увидите, что в отличие от макета страницы которой мы будем контролировать немного позже с помощью сетки сама форма выглядит достаточно хорошо.

Мне нравится как выглядят элементыформы.

Мне нравится то, что лейблы и сами элементы формы находится один над другим и теперь если я переключусь на документацию Foundation и перейду к разделу когда увижу информацию которую можно прочитать в ней говорится. Об основах стилизация элементов форм, что Foundation они к другим фреймворком — это то, что вместо того чтобы иметь дело с классами. А многие фреймворки работают с подобными классами которые нужно применить к элементу формы если вы хотите стилизацию фреймворка по умолчанию Foundation используют атрибут Type например Input Type Search или inputtype равно текст таким образом. Мне нужно применять очень много классов также говорится о различных типах макетов которые можно сделать например как сделать чтобы поле ввода было справа от лейбла как по умолчанию работает набор polyfills. И также есть некоторые дополнение сделать вот такие префиксы и постфиксы можно сделать постфикс который будет действовать как кнопка и будет находиться рядом с полем. Можно контролировать состояние ошибок если делаете валидацию формы нас длинными могут быть формы использовать кастомные элементы ввода вместо тех которые в браузере по умолчанию. Так, что здесь можно сделать много всего и — это клёво теперь я переключусь обратно к моей форме и начну работать с ней и модифицировать её немного. Я про кручу вниз в городе формы кнопки сабмит отправить потому, что я бы хотел чтобы вместо того чтобы полагаться на браузер в отношении её форматирование. Я хочу чтобы она была везде одинаковым поэтому я там есть стилизация кнопки батон сразу после Tab Index я добавлю атрибут. Класс Класс который мы применим будет батон кнопка теперь я сохраню — это перееду обратно страницы и обновлю её и если я прокричу вниз и посмотрю на кнопку отправки то увижу стилизацию кнопки по умолчанию из фреймворк Foundation. То есть применив всего 1 класс могу улучшить вид моей формы чудесно и ещё одна вещь которую я бы хотел сделать — это вместо использования отели браузера по умолчанию. Я хочу в документации посмотреть на кастомные элементы ввода. Они мне нравятся и я хочу использовать их. Если прочитать документацию и посмотреть код примера мы. Как необходимо структурировать. Этот кот и, что может быть нужно сделать с формой в данном случае необходимо применить класс кастомка самой форме поэтому дальше я переведу обратно страница поднимусь к родительскому тега form. И задом также класс и ему в данном случае будет класс равно кастом — это скажет Foundation, что я хочу заменить элементы формы по умолчанию на кастомные теперь я сохраню — это и посмотрю и теперь вместо переключателей по умолчанию у меня переключатели из Foundation такая стилизация больше подходит всё остальное, что я делаю с этим сайтом теперь просто я скажем так плоская стилизация моего сайта отражает в моих переключателях и мне — это было очень просто сделать сейчас я хочу указать на одну вещь которая очень важно посмотрим обратно на мой кот. Я люблю держать лейблы и поля ввода отдельно и я использую атрибут for чтобы дать знать любому типу устройства или. Агенту пользователя к чему относится лейбл так — это более доступно и намного проще стерилизовать потому, что у меня есть два отдельных элементов для которых можно писать стиле. Так, что я люблю делать. Так они заключать всё. ВТБ лейбл тем не менее у переключателей у меня-то Global заключает в себя Tag Input причина почему так сделал в том, что я хочу чтобы лейблы отображались справа от элементов в форме и у меня просто не было других способов сделать — это без переписывание огромного количества стилей в самом фреймворки так, что иногда необходимо идти на уступки есть ещё одна вещь которую я хочу сделать.

0 комментариев
0

Читайте также