HTML form action attribute সংজ্ঞায়িত করে যে একটি ফর্ম সাবমিট হলে ডেটার সাথে কী হবে। action attribute-এর মান হবে সেই ওয়েব রিসোর্সের URL যা ফর্মের কন্টেন্ট প্রসেস করবে।
যখন আপনার সাইট বা ওয়েব অ্যাপ্লিকেশনে ফর্ম বানাবেন এবং ডেটা জিজ্ঞেস করবেন, তখন আপনি প্রায়শই আপনার ডেটার সাথে কিছু করতে চাইবেন, ঠিক নাকি? এখানেই form action attribute কাজে আসে।
আপনাকে HTML-এ ফর্ম তৈরি করার বেসিক্স জানা উচিত। আপনি মূলত আপনার ফর্ম কন্টেন্টকে <form> এলিমেন্টে মোড়ে দিন। ওপেনিং ট্যাগে কয়েকটি অ্যাট্রিবিউট ব্যবহার করা যায়, এবং उनमें से একটি হলো action।
action attribute ব্যবহার করা হয় সেটা স্পেসিফাই করার জন্য যে ফর্ম সাবমিট হলে আমরা ফর্ম ডেটা কোথায় পাঠাতে চাই। তাই action-এর মান হলো সে পেজ যা ফর্মটি প্রসেস করবে।
HTML form action attribute वो URL স্টেট করে যা একটি ফর্মের কন্টেন্ট প্রসেস করবে। আপনাকে নিশ্চিত করতে হবে যে action attribute যে ওয়েব রিসোর্সকে পয়েন্ট করে সেটি আপনার "method" attribute-এ আপনি যে মেথড স্পেসিফাই করেছেন সেটি এক্সেপ্ট করে।
চলুন action attribute-এর সিনট্যাক্স দেখি:
<form action="/submit.php"> </form>
action attribute আমাদের ওপেনিং <form> ট্যাগের মাঝপথে থাকে। এই অ্যাট্রিবিউট প্রায়শই method attribute-এর সাথে ব্যবহার করা হয়।
ডিফল্টভাবে, method attribute "get" সেট থাকে। এর মানে হলো ফর্ম সাবমিট হলে ডেটা HTTP GET রিকোয়েস্টের মাধ্যমে পাঠানো হবে। আপনি ওপেনিং <form> ট্যাগে "method='post'" স্পেসিফাই করে মেথড পরিবর্তন করতে পারেন।
একটি সাবমিট বাটনে ক্লিক হলে ফর্ম থেকে ডেটা "action" URL-এ পাঠানো হয়।
Form action HTML উদাহরণ
চলুন একটি উদাহরণ দেখি:
<form action="process.html" method="get"> <label for="username">User</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
উপরে, action ইউজারনেম এবং ইমেইল ডেটাকে process.html নামক একটি পেজে পাঠাচ্ছে। ইউজারনেম এবং ইমেইল ডেটার ইনপুট টাইপ "text"। আমরা "submit" ইনপুট টাইপে একটি বাটন ডিফাইন করেছি। ক্লিক করলে, এই বাটন আমাদের ডেটাকে আমাদের "action" URL-এ পাঠাবে।
এখন উপরের ফর্ম উদাহরণটিকে একটি একচুড়ি HTML ফাইলে প্লাগ ইন করুন। তারপর একই ফোল্ডারে process.html নামে আরেকটি ফাইল তৈরি করুন। এই ফাইলের কন্টেন্ট হবে নিচের মতো:
<html> <head> <meta charset="UTF-8"> <title>Process</title> </head> <body>This is the destination process page</body> </html>
এই কোড একটি সিম্পল ওয়েব পেজ ডিফাইন করে যা পেজ লোড হলে একটি প্যারাগ্রাফ টেক্সট দেখায়। চলুন আমাদের আগে ডিফাইন করা ওয়েব ফর্মে ফিরে যাই এবং সেটি ফিল আপ করি:
এখন সাবমিটে ক্লিক করুন। লক্ষ্য করুন আমরা স্বয়ংক্রিয়ভাবে process.html পেজে চলে গেলাম! তারপর, URL बार লক্ষ্য করুন, সেই এক্সট্রা ডেটা গুলো কী? "?" চিহ্নের পরের ডেটা গুলো কোয়েরি প্যারামিটার, এবং যেহেতু আমরা GET রিকোয়েস্ট স্পেসিফাই করেছি, ডেটা কোয়েরি প্যারামিটার হিসেবে পাস হচ্ছে।
এই উদাহরণ দেখে আপনি ভাবতে পারেন এটি খুব উপকারী নয়। সেটি সত্য। সাধারণত action attribute ফর্ম কন্টেন্টকে সার্ভার পেজে পাঠাতে ব্যবহৃত হয়। উদাহরণস্বরূপ, আমরা process.php নামে একটি PHP ফাইল ব্যবহার করতে পারি।
এই process.php তারপর ডেটার সাথে সব জাদু করবে। এই পেজ আমাদের ডেটা ডাটাবেসে সংরক্ষণ করতে পারে, বা আপনাকে আপনার প্রিয় ইভেন্টে রেজিস্টার করতে পারে, আপনি যা চান। PHP একটি শক্তিশালী সার্ভার স্ক্রিপ্টিং ভাষা, যা প্রায়শই ওয়েব ডেভেলপমেন্টে ব্যবহৃত হয়। আপনি যদি কখনো WordPress ব্যবহার করেন, তবে সম্ভবত ডেটা প্রসেসিং PHP-এর মাধ্যমে হয়।
PHP সম্পর্কে আরও জানতে, আমাদের "How to Learn PHP" গাইড চেক করুন।
কি action Attribute আবশ্যক?
HTML4-এ, উত্তর হতো হ্যাঁ। কিন্তু আজকাল HTML5-এ, আপনাকে action attribute স্পেসিফাই করার প্রয়োজন নেই। আপনার যদি একটি ফর্ম ট্যাগ থাকে action attribute ছাড়া, তবে ডেটা তার নিজস্ব পেজে পাঠানো হবে।
আমরা কেন এই করব? সিংগেল পেজ অ্যাপ্লিকেশন (SPA)-র উত্থানের সাথে, আমরা আমাদের ফর্ম ডেটা JavaScript-এ প্রসেস করতে চাই। বা আমরা অন্য কোনো ফ্রেমওয়ার্ক যেমন React / Angular ব্যবহার করে ডেটা প্রসেস করতে চাই।
যদি আমরা Vanilla JavaScript ব্যবহার করি, তবে আমরা প্রায়শই এটি করি ফর্ম সাবমিট হলে একটি JavaScript ইভেন্ট লিসেনার যোগ করে।
উপসংহার
HTML form action attribute সংজ্ঞায়িত করে যে একটি ফর্ম সাবমিট হলে ফর্মের কন্টেন্টের সাথে কী হবে। action attribute একটি URL আর্গুমেন্ট হিসেবে গ্রহণ করে।
আপনি কি ওয়েব ডেভেলপার হতে আগ্রহী? আমাদের সম্পূর্ণ "How to Learn HTML" গাইড চেক করুন। আপনি সেখানে HTML শিখার জন্য এক্সপার্ট পরামর্শ এবং শীর্ষ অনলাইন কোর্স ও লার্নিং রিসোর্সের তালিকা পাবেন।
