cari

Rumah >hujung hadapan web >tutorial js >Membina Borang Berbilang Langkah Premium dengan Animasi

Membina Borang Berbilang Langkah Premium dengan Animasi

Susan Sarandon
Susan Sarandonasal
2024-12-05 22:21:10188semak imbas

Building a Premium Multi-Step Form with Animations

Dalam tutorial ini, kami akan menelusuri pembuatan borang berbilang langkah yang premium dan interaktif dengan animasi yang lancar dan pengesahan pihak klien menggunakan HTML, CSS dan JavaScript. Borang ini menyediakan pengalaman pengguna yang dipertingkatkan dan kelihatan seperti sesuatu yang langsung dari tahun 2025!

Demo Langsung: https://codepen.io/HanGPIIIErr/pen/ZYzbrqW

Jadual Kandungan

  1. Pengenalan
  2. Prasyarat
  3. Struktur Projek
  4. Penanda HTML
  5. Menggayakan dengan CSS
  6. Menambah Interaktiviti dengan JavaScript
  7. Kesimpulan

1.Pengenalan

Borang berbilang langkah ialah cara terbaik untuk meningkatkan pengalaman pengguna dengan memecahkan borang yang panjang kepada bahagian yang boleh diurus. Dalam tutorial ini, kami akan mencipta borang lima langkah yang merangkumi:

  • Maklumat Peribadi
  • Keutamaan
  • Muat Naik Imej
  • Ulasan
  • Ringkasan dan Penyerahan

Kami akan menambah animasi lancar antara langkah dan mengesahkan input pengguna untuk memastikan integriti data.

Prasyarat

Pemahaman asas HTML, CSS dan JavaScript
Kebiasaan dengan elemen borang dan pengendalian acara dalam JavaScript

Struktur Projek

Kami akan mempunyai tiga fail utama:

index.html — Struktur HTML
style.css — Penggayaan untuk borang kami
script.js — JavaScript untuk mengendalikan interaksi borang
Mari mulakan dengan menyediakan fail HTML kami.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Premium Multi-Step Form</title>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>



<p>Explanation</p>

<ul>
<li>Form Steps: Each step is wrapped in a div with the class form-step.</li>
<li>Active Class: The first step has the class active to display it initially.</li>
<li>Navigation Buttons: Each step (except the first and last) has "Previous" and "Next" buttons.</li>
<li>Summary Section: The last step displays a summary of the entered information.</li>
</ul>

<p>Styling with CSS</p>

<p>Now, let's style our form to give it that premium feel.<br>
</p>

<pre class="brush:php;toolbar:false">/* style.css */

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1abc9c, #16a085);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

form {
    width: 90%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.95);
    padding: 3em;
    border-radius: 20px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.form-step {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: scale(0.8) translateY(50px);
    transition: all 0.5s ease;
}

.form-step.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    position: relative;
}

.step-header {
    position: absolute;
    top: -30px;
    right: 30px;
    background: #16a085;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 30px;
    font-weight: 600;
    animation: slideIn 0.5s forwards;
}

h2 {
    margin-bottom: 1em;
    color: #333;
    font-weight: 600;
    text-align: center;
    animation: fadeInDown 0.5s ease-in-out;
}

label {
    display: block;
    margin-top: 1em;
    color: #555;
    font-weight: 500;
    animation: fadeInUp 0.5s ease-in-out;
}

input[type="text"],
input[type="email"],
input[type="file"],
textarea {
    width: 100%;
    padding: 0.75em 1em;
    margin-top: 0.5em;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
    animation: fadeInUp 0.5s ease-in-out;
}

input:focus,
textarea:focus {
    border-color: #1abc9c;
}

input[type="checkbox"] {
    margin-right: 0.5em;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
    animation: fadeInUp 0.5s ease-in-out;
}

button {
    padding: 0.75em 2em;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.next-step,
.prev-step {
    background: #1abc9c;
    color: #fff;
}

.next-step:hover,
.prev-step:hover {
    background: #16a085;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

button[type="submit"] {
    background: #e74c3c;
    color: #fff;
    margin-left: auto;
}

button[type="submit"]:hover {
    background: #c0392b;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

#summary p {
    margin: 1em 0;
    color: #333;
    font-weight: 500;
    animation: fadeInUp 0.5s ease-in-out;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

Penjelasan

  • Kecerunan Latar Belakang: Kecerunan licin memberikan rasa moden.
  • Penggayaan Borang: Kami menggunakan penapis latar belakang untuk kesan glassmorphism.
  • Peralihan dan Animasi: Peralihan lancar dan animasi bingkai utama meningkatkan interaktiviti.
  • Kesan Butang: Kesan tuding dengan pergerakan sedikit dan bayang untuk kedalaman.
  • Menambah Interaktiviti dengan JavaScript

Mari jadikan borang kami berfungsi.

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('multi-step-form');
    const steps = document.querySelectorAll('.form-step');
    const nextBtns = document.querySelectorAll('.next-step');
    const prevBtns = document.querySelectorAll('.prev-step');
    const summary = document.getElementById('summary');
    let currentStep = 0;

    nextBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            if (validateStep()) {
                steps[currentStep].classList.remove('active');
                currentStep++;
                if (currentStep < steps.length) {
                    steps[currentStep].classList.add('active');
                }
                if (currentStep === steps.length - 1) {
                    displaySummary();
                }
            }
        });
    });

    prevBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            steps[currentStep].classList.remove('active');
            currentStep--;
            steps[currentStep].classList.add('active');
        });
    });

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        alert('Form successfully submitted!');
        form.reset();
        steps[currentStep].classList.remove('active');
        currentStep = 0;
        steps[currentStep].classList.add('active');
    });

    function validateStep() {
        let stepIsValid = true;
        const currentInputs = steps[currentStep].querySelectorAll('input, textarea');
        currentInputs.forEach(input => {
            if (!input.checkValidity()) {
                input.reportValidity();
                stepIsValid = false;
            }
        });
        return stepIsValid;
    }

    function displaySummary() {
        const name = document.getElementById('name').value || 'N/A';
        const email = document.getElementById('email').value || 'N/A';
        const prefs = Array.from(document.querySelectorAll('input[name="pref"]:checked')).map(el => el.value).join(', ') || 'None';
        const comments = document.getElementById('comments').value || 'None';

        summary.innerHTML = `
            <p><strong>Name:</strong> ${name}</p>
            <p><strong>Email:</strong> ${email}</p>
            <p><strong>Preferences:</strong> ${prefs}</p>
            <p><strong>Comments:</strong> ${comments}</p>
        `;
    }

    // Initialize steps
    steps.forEach((step, index) => {
        if (index !== currentStep) {
            step.classList.remove('active');
        } else {
            step.classList.add('active');
        }
    });
});

Penjelasan

  • Pendengar Acara: Untuk butang "Seterusnya" dan "Sebelumnya" untuk menavigasi antara langkah.
  • Pengesahan: validateStep() memastikan medan yang diperlukan diisi.
  • Paparan Ringkasan: displaySummary() menyusun data yang dimasukkan untuk disemak oleh pengguna.
  • Penyerahan Borang: Semasa penyerahan, borang diset semula dan kembali ke langkah pertama.

? Kesimpulan: Menempa Masa Depan Pertempuran Gladiator

Peningkatan terbaharu kepada Gladiators Battle menandakan satu lonjakan yang ketara ke arah menyediakan pengalaman yang lancar dan menawan untuk semua pemain. Dengan sistem tutorial yang diperkaya, komponen modular, ekosistem persatuan yang berkembang maju dan permainan mini yang dioptimumkan, permainan ini berkembang menjadi RPG gladiator yang muktamad.

Sama ada anda pendatang baru menerokai arena buat kali pertama atau pahlawan berpengalaman yang menguasai medan perang, kemas kini ini memastikan semua orang boleh menempa warisan epik mereka sendiri.

? Sertai Perjalanan!

Kami sedang giat mencari maklum balas daripada pemain dan pembangun. Selami Pertempuran Gladiator dan kongsi pendapat anda dengan kami.

? Tapak web: https://gladiatorsbattle.com
?️ Sokong Kami di Kickstarter: https://www.kickstarter.com/projects/gladiatorsbattle/gladiators-battle-forge-your-legend-in-the-ultimate-arena
? Ikuti Kami di X (dahulunya Twitter): https://x.com/GladiatorsBT
? Sambung di LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez
? Sertai Komuniti di Discord: https://discord.gg/YBNF7KjGwx

Terima kasih atas sokongan anda yang tidak berbelah bahagi sambil kami terus membangunkan Gladiators Battle. Maklum balas, idea dan semangat anda adalah penggerak di sebalik kemajuan kami.

Biar pengembaraan diteruskan—Ave, Gladiator! ?✨

Jika anda mempunyai sebarang soalan atau cadangan, sila tinggalkan komen di bawah!

Atas ialah kandungan terperinci Membina Borang Berbilang Langkah Premium dengan Animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html if for Filter continue using Event JS this display background table https Game
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Boleh Menyahkod Entiti HTML dengan Selamat dalam JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Menyahkod Entiti HTML dengan Selamat dalam JavaScript?

Artikel berkaitan

Lihat lagi