Как создать форму с пошаговым заполнением?

Question

Основа такая:

<form>
  <label>Заголовок</label>
  <input type="text" name="title">
  <label>Дата публикации</label>
  <input type="date" name="date">
  <label>Текст записи</label>
  <textarea></textarea>
  <input type="submit" name="send" value="Отправить">
</form>

А как сделать так, чтобы эту форму разбить на несколько экранов, и при этом на каждом экране было одно поле под заполнение?

Answer 1

Ваша задача скрыть все шаги регистрации кроме текущего. Это можно сделать при помощи свойства css display: none и комбинации с JavaScript, а все шаги должны быть разделены на "блоки", который можно скрыть. На первом этапе вам стоит показывать заполнение только заголовка. При нажатии на кнопку "Далее", этот блок скрыть и показать следующий. Вот подобная реализация, которая выполняется ваши требования:

"use client"
import React, { useState } from 'react';
import '../../styles/styles.css';

interface FormData {
    title: string;
    date: string;
    text: string;
}

export default function MyForm() {
    const [formData, setFormData] = useState<FormData>({
        title: '',
        date: '',
        text: ''
    });
    const [currentStep, setCurrentStep] = useState(0);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData(prevData => ({
            ...prevData,
            [name]: value
        }));
    };

    const handlePrevClick = () => {
        setCurrentStep(prevStep => prevStep - 1);
    };

    const handleNextClick = () => {
        if (currentStep === 2) {
            return;
        }
        setCurrentStep(prevStep => prevStep + 1);
    };

    return (
        <form id="multiStepForm">
            <div className={currentStep === 0 ? 'step active' : 'step'}>
                <label>Заголовок</label>
                <input type="text" name="title" value={formData.title} onChange={handleInputChange} required />
            </div>
            <div className={currentStep === 1 ? 'step active' : 'step'}>
                <label>Дата публикации</label>
                <input type="date" name="date" value={formData.date} onChange={handleInputChange} required />
            </div>
            <div className={currentStep === 2 ? 'step active' : 'step'}>
                <label>Текст записи</label>
                <textarea name="text" value={formData.text} onChange={handleInputChange} required></textarea>
            </div>
            <div className="navigation">
                {currentStep !== 0 && <button type="button" id="prevBtn" onClick={handlePrevClick}>Назад</button>}
                {currentStep !== 2 ? <button type="button" id="nextBtn" onClick={handleNextClick}>Далее</button> :
                    <input type="submit" name="send" value="Отправить" />}
            </div>
        </form>
    )
}

UPD: Изменил код под Next.js + TypeScript, на котором как раз проект открыт. Всё проверил, всё работает отлично.

БЛОГ НА HUSL

Как создать форму с пошаговым заполнением?

Ответы (1 шт):