Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario multipaso</title>
</head>
<body>

<h2>Registro en 3 pasos</h2>

<fieldset id="paso-1">
        <legend>Datos personales</legend>

<label for="nombre">Nombre:</label><br>
        <input type="text" id="nombre" name="nombre" required minlength="2">
        <br><br>

<label for="apellido">Apellido:</label><br>
        <input type="text" id="apellido" name="apellido" required>
        <br><br>

<label for="nacimiento">Fecha de nacimiento:</label><br>
        <input type="date" id="nacimiento" name="nacimiento" required>
    </fieldset>

<fieldset id="paso-2" hidden>
        <legend>Información de contacto</legend>

<label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required>
        <br><br>

<label for="tel">Teléfono:</label><br>
        <input type="tel" id="tel" name="tel" pattern="[0-9]{8,15}" placeholder="Ej: 3765551234">
    </fieldset>

<fieldset id="paso-3" hidden>
        <legend>Crear contraseña</legend>

<label for="pass">Contraseña:</label><br>
        <input type="password" id="pass" name="pass" required minlength="8">
        <small>Mínimo 8 caracteres.</small>
        <br><br>

<label for="pass2">Repetir contraseña:</label><br>
        <input type="password" id="pass2" name="pass2" required>
    </fieldset>

<br>
    <button type="button" id="btn-anterior" hidden>← Anterior</button>
    <button type="button" id="btn-siguiente">Siguiente →</button>
    <button type="submit" id="btn-enviar" hidden>Registrarse</button>
  </form>

function mostrarPaso(n) {
        for (let i = 1; i <= totalPasos; i++) {
            document.getElementById("paso-" + i).hidden = true;
        }
        document.getElementById("paso-" + n).hidden = false;

document.getElementById("paso-actual").value    = n;
        document.getElementById("barra-progreso").value = n;

document.getElementById("btn-anterior").hidden  = (n === 1);
        document.getElementById("btn-siguiente").hidden = (n === totalPasos);
        document.getElementById("btn-enviar").hidden    = (n !== totalPasos);
    }

document.getElementById("btn-siguiente").addEventListener("click", () => {
        const fieldset = document.getElementById("paso-" + pasoActual);
        const campos   = fieldset.querySelectorAll("input");
        let valido = true;

campos.forEach(campo => {
            if (!campo.checkValidity()) {
                campo.reportValidity();
                valido = false;
            }
        });

if (valido && pasoActual < totalPasos) {
            pasoActual++;
            mostrarPaso(pasoActual);
        }
    });

document.getElementById("btn-anterior").addEventListener("click", () => {
        if (pasoActual > 1) {
            pasoActual--;
            mostrarPaso(pasoActual);
        }
    });

document.getElementById("registro").addEventListener("submit", (e) => {
        e.preventDefault();
        const pass  = document.getElementById("pass").value;
        const pass2 = document.getElementById("pass2").value;

if (pass !== pass2) {
            document.getElementById("pass2").setCustomValidity("Las contraseñas no coinciden.");
            document.getElementById("pass2").reportValidity();
            return;
        }

document.getElementById("resultado").textContent =
            "✅ Registro completo — los 3 pasos se enviaron juntos en un solo formulario.";
    });
  </script>

</body>
</html>