ШАГ 3:
Разработать 8 форм ввода для кита
Описание шага
[Что делать] Создай 8 полей: input text, email, password, textarea, select, checkbox, radio, search. Используй кнопки из шага 2, добавь лейблы и фокус-состояния.
[Как это работает] Формы — второй по частоте элемент (30% UI), их готовность сэкономит часы в проектах.
[Ожидаемый результат] Полная секция форм в Ките1.
[Критерий готовности] 8 SVG в 'Кит1/Формы', протестированы на hover/focus.
Как выполнить шаг
1) [Подготовка] Открой файлы кнопок, создай 'Кит1/Формы'.
2) [Действие 1] Нарисуй базовые input/textarea — скопируй стили из кнопок.
3) [Действие 2] Добавь checkbox/radio как вариации, с анимацией checked.
4) [Действие 3] Лейблы и фокус (синий outline), экспорт SVG.
5) [Проверка результата] Наведи курсор — состояния меняются корректно.
6) [Что дальше] Переходим к карточкам на шаге 4.
Частые ошибки
1. [Без состояний]: Делают только default, забывая focus/error. Тестируй все варианты сразу.
2. [Несовместимость стилей]: Формы не сочетаются с кнопками. Используй одну палитру цветов.
Полезные инструменты
Векторный графический редактор.
🎯 Цель с этим шагом
Освой создание готовых UI-наборов для ускорения веб-проектов. За 8 недель соберешь 12 полноценных китов с кнопками, формами и элементами — портфолио для фриланса и роста в дизайне.
Подробнее о цели →