JavaScript Event Delegation সম্পর্কে বিস্তাতিত আলোচনা

একটি পেশাদার HTML ফর্ম তৈরির জন্য আমরা ইমেজ এবং অপশন ইনপুট যুক্ত করবো, অতিরিক্ত রেডিও বাটন যোগ করবো, এবং ফর্মের সব ইনপুটকে বৈধ করতে পারবো। সবকিছুই বিশদভাবে বিশ্লেষণ করা হবে। এখানে একটি সম্পূর্ণ কোড উদাহরণসহ বিশ্লেষণ দেওয়া হলো।

পূর্ণ HTML এবং JavaScript কোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Form</title>
    <style>
        /* CSS স্টাইলিং */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            max-width: 600px;
            margin: auto;
        }
        label {
            display: block;
            margin: 10px 0 5px;
        }
        input, select, button {
            display: block;
            margin: 5px 0 15px;
            padding: 10px;
            width: 100%;
        }
        img {
            max-width: 200px;
            margin-top: 10px;
        }
        .output-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="userForm">
        <!-- টেক্সট ইনপুট -->
        <label for="text">Text:</label>
        <input type="text" id="text" name="text" required>

        <!-- ইমেইল ইনপুট -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <!-- পাসওয়ার্ড ইনপুট -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required minlength="6">

        <!-- নাম্বার ইনপুট -->
        <label for="number">Number:</label>
        <input type="number" id="number" name="number" min="0" max="100" required>

        <!-- ডেট ইনপুট -->
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>

        <!-- কালার ইনপুট -->
        <label for="color">Color:</label>
        <input type="color" id="color" name="color">

        <!-- চেকবক্স ইনপুট -->
        <label>Choose your skills:</label>
        <input type="checkbox" id="skill1" name="skills" value="HTML">
        <label for="skill1">HTML</label>
        <input type="checkbox" id="skill2" name="skills" value="CSS">
        <label for="skill2">CSS</label>
        <input type="checkbox" id="skill3" name="skills" value="JavaScript">
        <label for="skill3">JavaScript</label>
        <input type="checkbox" id="skill4" name="skills" value="React">
        <label for="skill4">React</label>
        <input type="checkbox" id="skill5" name="skills" value="Node.js">
        <label for="skill5">Node.js</label>

        <!-- অপশন ইনপুট -->
        <label for="options">Select an option:</label>
        <select id="options" name="options" required>
            <option value="" disabled selected>Select an option</option>
            <option value="Option1">Option 1</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
        </select>

        <!-- অতিরিক্ত রেডিও ইনপুট -->
        <label>Choose an option:</label>
        <input type="radio" id="radio1" name="radio" value="1" required>
        <label for="radio1">Option 1</label>
        <input type="radio" id="radio2" name="radio" value="2">
        <label for="radio2">Option 2</label>
        <input type="radio" id="radio3" name="radio" value="3">
        <label for="radio3">Option 3</label>

        <!-- রেঞ্জ ইনপুট -->
        <label for="range">Range:</label>
        <input type="range" id="range" name="range" min="0" max="100" value="50">

        <!-- ফাইল ইনপুট -->
        <label for="file">Upload an image:</label>
        <input type="file" id="file" name="file" accept="image/*">

        <!-- সাবমিট বাটন -->
        <button type="submit">Submit</button>
    </form>

    <!-- আউটপুট প্রদর্শনের জন্য একটি ডিভ -->
    <div id="output" class="output-container"></div>

    <!-- JavaScript ফাইল অন্তর্ভুক্ত -->
    <script src="script.js"></script>
</body>
</html>

// script.js

document.getElementById("userForm").addEventListener("submit", function(event) {
    event.preventDefault(); // ফর্ম সাবমিট হওয়া বন্ধ করে

    // ফর্ম ডাটাগুলো সংগ্রহ করা
    const text = document.getElementById("text").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const number = document.getElementById("number").value;
    const date = document.getElementById("date").value;
    const color = document.getElementById("color").value;

    // চেকবক্স থেকে মান সংগ্রহ করা
    const checkboxes = document.querySelectorAll('input[name="skills"]:checked');
    let selectedSkills = [];
    checkboxes.forEach((checkbox) => {
        selectedSkills.push(checkbox.value);
    });

    // অপশন থেকে মান সংগ্রহ করা
    const option = document.getElementById("options").value;

    // রেডিও ইনপুট থেকে মান সংগ্রহ করা
    const radio = document.querySelector('input[name="radio"]:checked').value;

    // রেঞ্জ ইনপুট থেকে মান সংগ্রহ করা
    const range = document.getElementById("range").value;

    // ফাইল ইনপুট থেকে ফাইল সংগ্রহ করা
    const fileInput = document.getElementById("file");
    const file = fileInput.files[0];

    // ফর্ম ডাটা প্রদর্শন করা
    let output = `
        <h3>Form Data:</h3>
        <p><strong>Text:</strong> ${text}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Password:</strong> ${password}</p>
        <p><strong>Number:</strong> ${number}</p>
        <p><strong>Date:</strong> ${date}</p>
        <p><strong>Color:</strong> ${color}</p>
        <p><strong>Selected Skills:</strong> ${selectedSkills.join(", ")}</p>
        <p><strong>Selected Option:</strong> ${option}</p>
        <p><strong>Radio Selection:</strong> ${radio}</p>
        <p><strong>Range:</strong> ${range}</p>
        <p><strong>File Name:</strong> ${file ? file.name : "No file selected"}</p>
    `;

    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            output += `<img src="${e.target.result}" alt="Uploaded Image">`;
            document.getElementById("output").innerHTML = output;
        };
        reader.readAsDataURL(file);
    } else {
        document.getElementById("output").innerHTML = output;
    }
});

বিশ্লেষণ

HTML কোডের বিশ্লেষণ

Text, Email, Password, Number, Date, Color Inputs:
- <input>: ইনপুট ফিল্ডগুলো বিভিন্ন ধরনের ডাটা ইনপুট নেওয়ার জন্য ব্যবহৃত হয়েছে।
- required: ইনপুট ফিল্ডগুলো পূরণ করা বাধ্যতামূলক।
- minlength, min, max: ভ্যালিডেশন নিয়ম।
Checkboxes:
- <input type="checkbox">: ব্যবহারকারীর বিভিন্ন বিকল্প নির্বাচন করতে দেয়। প্রতিটি চেকবক্সের জন্য একটি লেবেলও যুক্ত করা হয়েছে।
Select Input:
- <select>: একটি ড্রপডাউন মেনু দিয়ে অপশন নির্বাচন করতে দেয়। প্রথম অপশনটি ডিফল্টভাবে সিলেক্টেড ও ডিসেবলড।
Radio Buttons:
- <input type="radio">: একাধিক বিকল্পের মধ্যে একটিকে নির্বাচন করতে দেয়। required ব্যবহার করে নিশ্চিত করা হয়েছে যে একটি বিকল্প অবশ্যই নির্বাচন করতে হবে।
Range Input:
- <input type="range">: একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে দেয়।
File Input:
- <input type="file">: ব্যবহারকারী একটি ইমেজ ফাইল আপলোড করতে পারে। accept="image/*" দিয়ে শুধুমাত্র ইমেজ ফাইল গ্রহণযোগ্য।
Submit Button:
- <button type="submit">: ফর্মের ডাটা সাবমিট করতে ব্যবহৃত হয়।

JavaScript কোডের বিশ্লেষণ

Form Submit Event Listener:
- event.preventDefault(): ফর্ম সাবমিশনকে ব্লক করে, পেজ রিফ্রেশ হওয়ার পরিবর্তে কাস্টম প্রক্রিয়া চালায়।
Collecting Form Data:
- ইনপুট ফিল্ডগুলোর মান .value এর মাধ্যমে সংগ্রহ করা হয়েছে।
Checkbox Values:
- querySelectorAll('input[name="skills"]:checked'): নির্বাচিত চেকবক্স গুলো সংগ্রহ করা হয়েছে এবং .forEach লুপ দিয়ে মান অ্যারে তে যোগ করা হয়েছে।
Select Option Value:
- document.getElementById("options").value: নির্বাচিত অপশন সংগ্রহ করা হয়েছে।
Radio Button Value:
- document.querySelector('input[name="radio"]:checked').value: নির্বাচিত রেডিও বাটনের মান সংগ্রহ করা হয়েছে।
Range Value:
- document.getElementById("range").value: রেঞ্জ ইনপুটের মান সংগ্রহ করা হয়েছে।
File Input:
- document.getElementById("file").files[0]: আপলোড করা প্রথম ফাইলটি সংগ্রহ করা হয়েছে।
- FileReader: ফাইলটি পড়তে এবং ইমেজ হিসেবে প্রদর্শন করতে ব্যবহৃত।
Displaying Form Data:
- innerHTML: সংগ্রহ করা ডাটা HTML আউটপুট হিসেবে প্রদর্শন করা হয়েছে।
- Image Display: ইমেজ ফাইলের নাম এবং ইমেজ ডাটা (base64) আউটপুট হিসেবে দেখানো হয়েছে।

সংক্ষেপে

এই কোডটি একটি পেশাদার HTML ফর্ম তৈরি করে যা বিভিন্ন ধরনের ইনপুট ফিল্ড অন্তর্ভুক্ত করে। JavaScript দিয়ে ফর্ম ডাটাগুলো সংগ্রহ করা হয় এবং প্রদর্শন করা হয়, পাশাপাশি ইমেজ ফাইল থাকলে তা দেখানো হয়। সমস্ত ইনপুট বৈধকরণ এবং প্রক্রিয়া পূর্ণ পেশাদারী মান অনুযায়ী করা হয়েছে।

DEV Community

JavaScript Event Delegation সম্পর্কে বিস্তাতিত আলোচনা

পূর্ণ HTML এবং JavaScript কোড

বিশ্লেষণ

HTML কোডের বিশ্লেষণ

JavaScript কোডের বিশ্লেষণ

সংক্ষেপে

Top comments (0)

Read next

Data structures and algorithms | Algorithms | DSA

Enhancing Contributions for dev-mate-cli

setw() и setfill C++

How to launch your startup - How to launch your MVP