Научитесь создавать современную форму, разделенную на несколько шагов, с помощью веб-технологий.
Чтобы иметь дело с длинными и сложными формами, нам нужно разбить их на несколько шагов. Показывая на экране только несколько входных данных за раз, форма будет казаться более удобоваримой и не позволит пользователям чувствовать себя перегруженными морем полей формы.
В этой статье я дам вам пошаговое руководство по реализации многошаговой формы в вашем веб-приложении. Над формой будут отображаться степперы, которые будут представлять индикатор выполнения по мере того, как мы продолжаем заполнять шаги формы. Каждый шаг формы будет содержать кнопки с именами Prev и Next. Эти кнопки позволят вам перемещаться между шагами.
Создайте многошаговую форму за 3 простых шага
- Создайте макет формы и элементов шага с помощью HTML.
- Сделайте многошаговую форму функциональной с помощью JavaScript.
- Создайте форму и элементы шага с помощью CSS.
Шаг 1. Создайте макет формы и элементов шага с помощью HTML
Давайте настроим базовую HTML-форму, прежде чем реализовать навигатор для шагов формы. Он будет включать степпер формы, который будет действовать как индикатор выполнения. Он будет содержать несколько элементов, которые будут представлять номера шагов. Эти элементы будут отображаться в виде кругов с номером шага внутри них. Незавершенные шаги будут иметь серый цвет фона круга. Активный шаг будет иметь фиолетовый цвет фона круга. И завершенные шаги будут иметь зеленый цвет фона круга. После степпера формы нам нужно создать форму с несколькими секциями. Эти разделы будут доступны для всех шагов и будут содержать поля формы для каждого шага формы. Каждый шаг будет содержать кнопки «Предыдущий» и «Следующий», которые помогут перемещаться между шагами. Однако на последнем шаге появится кнопка «Сохранить», с помощью которой вы можете отправить форму.
Добавьте следующий фрагмент кода в раздел, где вы хотите реализовать многошаговую форму.
Шаг 2. Сделайте многошаговую форму функциональной с помощью JavaScript
Теперь нам нужно реализовать логику навигации между шагами формы. Создайте стрелочную функцию с именем navigateToFormStep, которая будет принимать один параметр с именем stepNumber. Эта функция будет получать значение шага, на который вы хотите перейти. Предыдущие шаги будут отмечены как завершенные, текущий шаг — как активный, а остальные — как незавершенные. Это будет работать как для предыдущей, так и для следующей кнопки, так как нам нужно передать только номер шага, который будет виден и помечен как активный. Далее нам нужно выбрать все предыдущие и следующие кнопки и добавить к каждой из них прослушиватель событий щелчка. При нажатии любой из этих кнопок будет запущена анонимная функция, которая получит значение целевого шага и вызовет функцию navigateToFormStep для выполнения процесса навигации.
Добавьте следующий фрагмент кода внутрь элемента script на странице.
Шаг 3: Дизайн формы и элементов шага с помощью CSS
Поскольку мы завершили реализацию многошаговой формы, нам нужно добавить несколько фрагментов CSS для разработки макета нашего HTML-контента.
Добавьте следующий фрагмент кода в элемент style или во внешний файл CSS и используйте его на странице.
Исход
Слава! Вы узнали, как создать многошаговую форму, используя исключительно HTML, CSS и JavaScript.
Если вам понравилось читать этот пост и он оказался для вас полезным, пожалуйста, хлопните в ладоши, поделитесь им с друзьями и подпишитесь на меня, чтобы получать обновления о моих будущих постах. Вы можете связаться со мной в LinkedIn.
