Form Elements নির্বাচন এবং হ্যান্ডল করা

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলিকে সহজে নির্বাচন এবং হ্যান্ডল করতে পারেন। এর মাধ্যমে আপনি ফর্মের বিভিন্ন উপাদান যেমন input, select, textarea ইত্যাদি নির্বাচন, মান (value) পড়া, সেট করা, এবং ফর্ম হ্যান্ডলিং কাজগুলি করতে পারবেন। MooTools-এর DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিং মেথডগুলি ব্যবহার করে এসব কাজ খুব সহজে করা যায়।

Form Elements নির্বাচন

MooTools-এ ফর্ম উপাদান নির্বাচন করতে আপনি $('elementId') বা $$('formElement') সিনট্যাক্স ব্যবহার করতে পারেন। এটি ফর্মের কোন উপাদান বা গ্রুপের উপাদান সহজে নির্বাচন করতে সহায়তা করে।

উদাহরণ

<form id="myForm">
    <input type="text" id="name" placeholder="আপনার নাম">
    <input type="email" id="email" placeholder="আপনার ইমেইল">
    <textarea id="message" placeholder="আপনার বার্তা"></textarea>
    <button type="submit">জমা দিন</button>
</form>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var nameField = $('name');  // 'name' ইনপুট ফিল্ড নির্বাচন
        var emailField = $('email');  // 'email' ইনপুট ফিল্ড নির্বাচন
        var messageField = $('message');  // 'message' টেক্সটএরিয়া নির্বাচন
        
        // যদি ফর্ম সাবমিট হয়
        $('myForm').addEvent('submit', function(event) {
            event.preventDefault();  // ফর্ম সাবমিটের ডিফল্ট কাজ বন্ধ করা
            
            console.log('নাম:', nameField.get('value'));  // ইনপুট থেকে মান পড়া
            console.log('ইমেইল:', emailField.get('value'));  // ইনপুট থেকে মান পড়া
            console.log('বার্তা:', messageField.get('value'));  // টেক্সট এরিয়া থেকে মান পড়া
        });
    });
</script>

এখানে, $('name'), $('email'), এবং $('message') ফর্ম উপাদানগুলি নির্বাচন করতে ব্যবহৃত হয়েছে। get('value') ব্যবহার করে ফর্মের মান পাওয়া গেছে।

ফর্ম উপাদান থেকে মান পড়া এবং সেট করা

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলির মান (value) সহজেই পড়তে এবং সেট করতে পারেন। get('value') এবং set('value', newValue) মেথড ব্যবহার করে মান পড়া এবং সেট করা যায়।

উদাহরণ: ইনপুট ফিল্ডের মান পড়া এবং সেট করা

<input type="text" id="username" value="অক্সফোর্ড">
<button id="changeName">নাম পরিবর্তন করুন</button>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var usernameField = $('username');
        
        // ইনপুট ফিল্ডের মান পড়া
        console.log(usernameField.get('value'));  // 'অক্সফোর্ড'
        
        // নাম পরিবর্তন করার জন্য একটি বাটন
        $('changeName').addEvent('click', function() {
            // নতুন মান সেট করা
            usernameField.set('value', 'নতুন নাম');
            console.log(usernameField.get('value'));  // 'নতুন নাম'
        });
    });
</script>

এখানে set('value', 'new value') এবং get('value') মেথড ব্যবহার করে ইনপুট ফিল্ডের মান পড়া এবং সেট করা হয়েছে।

ফর্ম উপাদানে ইভেন্ট হ্যান্ডলিং

MooTools-এ আপনি ফর্মের উপাদানগুলিতে ইভেন্ট হ্যান্ডল করতে পারেন, যেমন focus, blur, input, change, submit ইত্যাদি। এর মাধ্যমে আপনি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে বিভিন্ন কাজ করতে পারেন।

উদাহরণ: ইনপুট ফিল্ডে focus এবং blur ইভেন্ট

<input type="text" id="username" placeholder="আপনার নাম">
<p id="message"></p>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var usernameField = $('username');
        var message = $('message');
        
        // ফোকাস ইভেন্ট
        usernameField.addEvent('focus', function() {
            message.set('html', 'আপনি নাম ইনপুট ফিল্ডে ক্লিক করেছেন।');
        });
        
        // ব্লার ইভেন্ট
        usernameField.addEvent('blur', function() {
            message.set('html', 'ফিল্ডটি খালি রয়েছে।');
        });
    });
</script>

এখানে, focus এবং blur ইভেন্ট ব্যবহার করে ইনপুট ফিল্ডে ফোকাস এবং ব্লার ইভেন্ট হ্যান্ডল করা হয়েছে।

ফর্ম উপাদান পরীক্ষা করা

MooTools-এ checked প্রপার্টি ব্যবহার করে চেকবক্স, রেডিও বাটন ইত্যাদি নির্বাচিত বা চেক করা হয়েছে কিনা পরীক্ষা করা যায়। এছাড়াও disabled প্রপার্টি ব্যবহার করে ফর্ম উপাদানটি নিষ্ক্রিয় করা যায়।

উদাহরণ: চেকবক্স পরীক্ষা করা

<form id="myForm">
    <input type="checkbox" id="subscribe" checked> সাবস্ক্রাইব করুন
    <button type="submit">জমা দিন</button>
</form>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var subscribeCheckbox = $('subscribe');
        
        // চেকবক্সের চেক করা আছে কিনা পরীক্ষা
        $('myForm').addEvent('submit', function(event) {
            event.preventDefault();
            
            if (subscribeCheckbox.get('checked')) {
                console.log('আপনি সাবস্ক্রাইব করেছেন।');
            } else {
                console.log('আপনি সাবস্ক্রাইব করেননি।');
            }
        });
    });
</script>

এখানে, get('checked') মেথড ব্যবহার করে চেকবক্সের মান পরীক্ষা করা হয়েছে।

সারাংশ

MooTools ব্যবহার করে আপনি ফর্ম উপাদানগুলি যেমন input, select, textarea ইত্যাদি সহজভাবে নির্বাচন এবং হ্যান্ডল করতে পারেন। আপনি get('value') মেথড ব্যবহার করে মান পড়তে পারেন এবং set('value', newValue) মেথড ব্যবহার করে নতুন মান সেট করতে পারেন। এছাড়াও focus, blur, change ইভেন্টের মাধ্যমে আপনি ফর্ম উপাদানগুলিতে ইন্টারঅ্যাকটিভ কার্যকারিতা যোগ করতে পারেন। MooTools এর এই ফিচারগুলি ফর্ম হ্যান্ডলিং এবং ইউজার ইন্টারঅ্যাকশনে সহজ ও কার্যকরী উপায় সরবরাহ করে।