Vue3, Composition API, Typescript
Представим, что на сайте страховой компании нужна форма для ввода данных о транспортном средстве.
В форме есть поля: тип, марка, модель, номерной знак.
Бизнес-логика:
-
Формат номера зависит от типа ТС
Рубрика «формы»
Архитектура сложных форм
2026-01-18 в 9:18, admin, рубрики: архитектура приложений, валидация, Модель данных, формыГибкий лэйаут для динамических форм с react-jsonschema-form
2025-02-22 в 9:15, admin, рубрики: antd, react-jsonschema-form, формы, фронтендБиблиотека react‑jsonschema‑form (RJSF) предназначена для автоматической генерации форм на основе JSON‑схемы. Вы задаёте схему, а RJSF берёт на себя остальное: отображение полей ввода, валидацию и обработку данных. Это удобный и простой в использовании инструмент, тем не менее, у библиотеки есть определённые ограничения. Одно из них — отсутствие поддержки многоколоночных макетов «из коробки».
В этой статье я покажу, как можно добавить гибкость в структуру формы, используя кастомные шаблоны.
Проблема
Недавно попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном:
«Рекомендуем сделать кнопку отправки формы не активной до тех пор, пока пользователь не заполнит все обязательные поля».
Упрощение управления формами во Flutter с помощью пакета FForm
2024-09-16 в 13:50, admin, рубрики: dynamic, flutter, form, формыНачало работы с FForm 🌟
Шаг 1: Установка
Прежде всего, давайте добавим пакет FForm в ваш проект Flutter. Добавьте FForm в файл pubspec.yaml в разделе зависимостей:
dependencies:
fform: ^latest_version
Не забудьте запустить flutter pub get в вашем терминале, чтобы установить пакет.
Обзор
FForm — это высокоуровневый пакет Flutter, разработанный для упрощения создания и управления формами с упрощенной валидацией полей. Он предлагает два основных компонента: FFormField и FFormBuilder, которые вместе приносят легкость и гибкость в обработку форм в приложениях Flutter.
-
FFormField<T, E>Читать полностью »
Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form
2024-08-24 в 6:09, admin, рубрики: react-hook-form, формы, фронтендПривет друзья!
В данной статье я хочу показать вам, как разработать форму с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере.
Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях.
Подготовка и настройка проекта:
Развернем новое приложение на React.js с Typescript с помощью npm:
Валидация форм во Flutter как PRO. Мастер-класс по использованию form_model и BLoC
2024-08-21 в 5:15, admin, рубрики: flutter, валидация, формы
Привет, коллеги!
Хочу поделиться своим опытом работы с формами во Flutter. Каждый из нас сталкивался с задачей создания сложных форм и хочу рассказать о подходе с использованием нового пакета form_model.
Почему form_model?
Вам не нужен для этого JavaScript
2023-12-11 в 13:00, admin, рубрики: accessibility, html, ruvds_переводы, доступность сайта, интерактивный дизайн, специальные возможности, формы
Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю
▍ Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.
В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.
В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.
Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.Читать полностью »
Разработка формы на React. Принципы KISS, YAGNI, DRY на практике
2020-04-03 в 11:35, admin, рубрики: DRY, javascript, KISS, React, ReactJS, YAGNI, принципы, разработка, Совершенный код, формы, хукиЗдавствуйте, в этом туториале мы рассмотрим как разработать очень простую, но контролируемую форму в React, сфокусировавшись на качестве кода.
При разработке нашей формы мы будем следовать принципам «KISS», «YAGNI», «DRY». Для успешного прохождения данного туториала вам не нужно знать этих принципов, я буду объяснять их по ходу дела.Читать полностью »
CardInfo — API для определения логотипа, цветов банка и прочего по номеру карты
2019-05-27 в 12:11, admin, рубрики: api, CardInfo, CloudPayments, stripe, банки, биллинг пластиковых карт, дизайн, логотипы, платежные системы, Разработка веб-сайтов, Разработка под e-commerce, формы
Тут и демо, и документация: cardinfo.online Это API. Вы ему 6 первых цифр банковской карты, оно вам ссылку на логотип банка, его фирменные цвета, бренд (Visa, MasterCard, и т.д.) и прочее в формате JSON. CardInfo нужен тем, кто создаёт форму для приёма банковских карт у себя на сайте, чтобы улучшить UX (удобство, впечатления, чувство безопасности) пользователей. Принимать платежи прямо у себя на сайте позволяет cloudpayments.ru в России и странах СНГ, и stripe.com во всём остально мире.
Такие формы сделали все крупные компании. Живой пример можете увидеть при оплате чего угодно через Яндекс.Кассу или практически в любом мобильном приложении банка: когда вы начинаете вводить номер карты, форма перекрашивается в цвета этого банка, а рядом появляется логотип. Каждая из этих крупных компаний реализовала собственное решение для определения логотипа и цветов. Если это решение реализовали все крупные компании, значит в нём есть ценность. Если крупные уже сделали, а мелкие ещё нет, значит это похоже восходящий тренд, который резонно оседлать.
Однако, крупные компании уже давно сделали свои формы такими, а мелкие всё ещё нет. Почему? Создание такого решения для своей формы займёт около 7 дней работы программиста и ещё 7 работы дизайнера (логотипы выкачивать, обрабатывать, перерисовывать). Крупные компании могут себе позволить потратиться на создание такой формы. Мелкие компании считают ценность такой формы не достаточной, чтобы платить за неё столько.
CardInfo позволит превратить уже существующую форму для приёма банковских карт в такую же, как у Яндекс.Кассы, за пол дня работы программиста. Я предполагаю, что после выхода CardInfo определение логотипа банка и цветов банка для платёжных форм станет стандартом. Потому что такие формы лучше. Потому что теперь такие формы смогут позволить себе все.
Читать полностью »