HTML টেক্সটএরিয়া ট্যাগ একটি ফর্মে একাধিক লাইনের টেক্সট ইনপুট ফিল্ড তৈরি করতে ব্যবহৃত হয়। এটি <textarea> ট্যাগ দিয়ে ডিফাইন করা হয় এবং অসীম সংখ্যক ক্যারেক্টার ধারণ করতে পারে।
যখন আপনি HTML-এ একটি ফর্ম তৈরি করেন, তখন আপনি একটি বড় টেক্সট স্ট্রিং গ্রহণ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি একটি রিটেইলারের ওয়েবসাইটের জন্য একটি কাস্টমার কন্টাক্ট ফর্ম বানাচ্ছেন, তবে আপনি একটি ফর্ম এলিমেন্ট তৈরি করতে চাইছেন যা একটি কাস্টমার যেটি ফেস করছে সে সমস্যার বিস্তারিত বিবরণ গ্রহণ করবে।
সেখানে HTML <textarea> ট্যাগ কাজে আসে। <textarea> এলিমেন্ট একটি ফর্ম এলিমেন্ট তৈরি করতে ব্যবহৃত হয় যা মাল্টিলাইন টেক্সট এডিটিং ফিচার প্রদান করে। এই এলিমেন্টটি উপযোগী যদি আপনি একজন ইউজার থেকে বড় টেক্সট রেসপন্স গ্রহণ করতে চান।
এই টিউটোরিয়ালে, কিছু উদাহরণের সাথে, HTML <textarea> ট্যাগ আপনার কোডে কীভাবে ব্যবহার করতে হয় তা আলোচনা করা হবে। এই টিউটোরিয়াল শেষে, আপনার কাছে <textarea> ট্যাগ প্রোফেশনালের মতো ব্যবহার করার সारा জ্ঞান থাকবে!
HTML টেক্সটএরিয়া ট্যাগ
<textarea> ট্যাগ একটি ফর্মে মাল্টিলাইন টেক্সট ইনপুট কন্ট্রোল ফিল্ড ডিফাইন করতে ব্যবহৃত হয়। <textarea> ট্যাগ অসীম সংখ্যক ক্যারেক্টার ধারণ করতে পারে।
<textarea> ট্যাগের সিন্ট্যাক্স নিচে দেওয়া হল:
<textarea rows="10" cols="10"> Placeholder contents </textarea>
চলুন আমাদের কোড ভাঙন করি। <textarea> ট্যাগ আমাদের ওয়েব ফর্মে টেক্সট এরিয়া বক্স ডিফাইন করতে ব্যবহৃত হয়। <input> ট্যাগের বিপরীতে, <textarea> ট্যাগের অবশ্যই একটি ওপেনিং (<textarea>) এবং একটি ক্লোজিং ট্যাগ (</textarea>) থাকতে হবে। কারণ টেক্সট এরিয়া যে ডিফল্ট টেক্সট দেখাবে সেটি দুটি ট্যাগের মাঝপথে থাকে।
আমরা আমাদের উদাহরণে দুটি অ্যাট্রিবিউটও নির্দিষ্ট করেছি:
- rows ব্রাউজারকে নির্দেশ দেয় টেক্সট এরিয়ার ডিফল্টভাবে কতটি সারি থাকবে। অন্য কথায়, rows অ্যাট্রিবিউট টেক্সটএরিয়ার উচ্চতা নির্দিষ্ট করে।
- cols হল ডিফল্টভাবে টেক্সট এরিয়ার কতটি কলাম থাকবে। অন্য কথায়, cols অ্যাট্রিবিউট টেক্সটএরিয়ার প্রস্থ নির্দিষ্ট করে।
ধরা যাক আমরা একটি লোকাল ক্লোথিং স্টোরের জন্য একটি ওয়েব ফর্ম বানাচ্ছি। এই ফর্ম কাস্টমারদের তাদের পার্চেস সম্পর্কে ফিডব্যাক দিতে দেবে। কারণ আমরা ইউজারদের বিস্তারিত ফিডব্যাক সাবমিট করার সুযোগ দিতে চাই, আমরা ইউজারের ফিডব্যাক সংগ্রহ করতে HTML <textarea> এলিমেন্ট ব্যবহার করব।
আমরা ফিডব্যাক ফর্ম তৈরি করতে নিচের কোড ব্যবহার করতে পারি:
<form> <label for="feedback">What feedback do you have for us?</label><br /><br /> <textarea rows="5" cols="30" id="feedback" name="feedback"> Your feedback goes here. </textarea> </form>
আমাদের কোড রিটার্ন করে:
চলুন আমাদের কোড ভাঙন করি। প্রথমে, আমরা একটি <form> ট্যাগ ডিক্লেয়ার করেছি যা আমাদের ওয়েব ফর্ম ডিফাইন করতে ব্যবহৃত হয়। তারপর আমরা একটি <label> ট্যাগ ব্যবহার করে আমাদের পেজে একটি লেবেল যোগ করেছি যা ইউজারকে জিজ্ঞেস করে What feedback do you have for us?
তারপর, আমরা ফিডব্যাক ফর্ম তৈরি করতে একটি <textarea> ট্যাগ ব্যবহার করেছি। আমরা চারটি অ্যাট্রিবিউট নির্দিষ্ট করেছি, যেগুলো নিচে:
- rows ৫ সেট করা আছে এবং ফিল্ডে কতটি সারি থাকবে সেটি সংরক্ষণ করে।
- cols ৩০ সেট করা আছে এবং ফিল্ডে কতটি কলাম থাকবে সেটি সংরক্ষণ করে।
- id হল ফর্মের জন্য অসাইন করা ইউনিক আইডেন্টিফায়ার, যা ফর্ম সাবমিট করার সময় ব্যবহৃত হবে।
- nameও ফর্মকে আইডেন্টিফাই করতে ব্যবহৃত হয় এবং যদি আমরা ফর্মটি ওয়েব সার্ভারে সাবমিট করতে চাই তবে এটি আবশ্যক।
<textarea> ট্যাগ সব বড় ব্রাউজারে সাপোর্টেড।
উপরের উদাহরণটি <textarea> ট্যাগের একটি বেসিক ইমপ্লিমেন্টেশন, কিন্তু আমরা আমাদের ফর্মকে আরও অ্যাডভান্সড করতে পারি।
HTML টেক্সটএরিয়া উদাহরণ
চলুন আরও দুটি অ্যাডভান্সড উদাহরণের মাধ্যমে দেখি কীভাবে আমরা <textarea> ট্যাগ ব্যবহার করে টেক্সট এরিয়া তৈরি করতে পারি।
ন্যূনতম এবং সর্বোচ্চ দৈর্ঘ্য
আমাদের ক্লোথিং স্টোর উদাহরণে ফিরে যাই। ধরা যাক আমরা ইউজার সাবমিট করার ক্যারেক্টার সংখ্যা ১০০০ টি লিমিট করতে চাই, যাতে ইউজাররা ফিডব্যাক লিখতে কনসাইজ হন। আমরা একটি ন্যূনতম ক্যারেক্টার লিমিটও ১০ সেট করতে চাই যাতে ইউজার ফর্মে কিছু লিখে।
সেখানে minlength এবং maxlength অ্যাট্রিবিউট কাজে আসে। minlength ইউজারকে অবশ্যই কতটি ক্যারেক্টার লিখতে হবে তা নির্দিষ্ট করতে ব্যবহৃত হয়, এবং maxlength একটি ফর্মে ইউজার সর্বোচ্চ কতটি ক্যারেক্টার লিখতে পারবে তা নির্দিষ্ট করতে ব্যবহৃত হয়।
এখানে আমাদের আগের ওয়েব ফর্মের একটি উদাহরণ যেটিতে minlength এবং maxlength অ্যাট্রিবিউট সেট করা আছে:
<form> <textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000"> Your feedback goes here. </textarea> </form>
আমাদের ফর্ম রিটার্ন করে:
আমাদের ফর্মে কোনো দৃশ্যমান পরিবর্তন নেই, কিন্তু আমরা যদি আমাদের ফর্ম সাবমিট করার চেষ্টা করি, তবে ফর্মের কন্টেন্ট অবৈধ বিবেচিত হবে যদি ইউজার ১০০০ ক্যারেক্টার এর বেশি লিখে।
এটি নোট করা গুরুত্বপূর্ণ যে, এমনকি যদি ইউজার আমাদের ফর্মে ১০ ক্যারেক্টার এর কম লিখে, টেক্সটএরিয়া এখনো বৈধ বিবেচিত হবে। আপনি যদি ন্যূনতম লিমিট এনফোর্স করতে চান, তবে আপনাকে required অ্যাট্রিবিউট নির্দিষ্ট করতে হবে।
প্লেসহোল্ডার টেক্সট
আমাদের উপরের ওয়েব ফর্মে, আমরা আমাদের ফর্মের ভিতরে ডিফল্ট টেক্সট নির্দিষ্ট করেছি। এই টেক্সট বলে Your feedback goes here. এটি ইউজফুল ইনফরমেশন হলেও, ইউজারকে যদি সেটি তাদের ফর্ম রেসপন্সে না চাওয়া হয় তবে ম্যানুয়ালি ডিলিট করতে হবে।
আপনি যদি একটি প্লেসহোল্ডার ভ্যালু নির্দিষ্ট করতে চান, তবে আপনি placeholder অ্যাট্রিবিউট ব্যবহার করতে পারেন। এই অ্যাট্রিবিউট একটি প্লেসহোল্ডার ভ্যালু বলে যা ফর্ম খালি থাকলে দেখায়। যতক্ষণ না ইউজার বক্সে টাইপ করা শুরু করে, প্লেসহোল্ডার গায়েব হয়ে যায়।
এখানে <textarea> একটি উদাহরণ যেটিতে প্লেসহোল্ডার টেক্সট Your feedback goes here. আছে:
<textarea placeholder="Your feedback goes here." rows="5" cols="30"> </textarea>
আমাদের কোড রিটার্ন করে:
আপনি দেখতে পাচ্ছেন, টেক্সট Your feedback goes here. টেক্সট বক্সে দেখাচ্ছে। যাইহোক, যখন ইউজার টাইপ করা শুরু করে, এই টেক্সট গায়েব হয়ে যায়। আমরা জানি যে এই টেক্সট একটি প্লেসহোল্ডার কারণ এটি লাইট গ্রেতে দেখাচ্ছে, যেখানে ডিফল্ট টেক্সট, যেমন আমরা এই আর্টিকেলের প্রথম উদাহরণে নির্দিষ্ট করেছিলাম, ফুল ব্ল্যাক টেক্সটে দেখাচ্ছে (অন্যथा নির্দিষ্ট না করা পর্যন্ত)।
HTML টেক্সটএরিয়া অ্যাট্রিবিউট
<textarea> ট্যাগ অনেক ট্যাগ-স্পেসিফিক অ্যাট্রিবিউট গ্রহণ করে। এছাড়া, <textarea> ট্যাগ HTML-এ সব গ্লোবাল অ্যাট্রিবিউট সাপোর্ট করে।
এখানে <textarea> ট্যাগ দ্বারা সাপোর্টেড ট্যাগ-স্পেসিফিক অ্যাট্রিবিউটগুলো:
| Attribute | Value | Description |
| autofocus | autofocus | টেক্সটএরিয়া ডকুমেন্ট লোড হলে ফোকাস পাবে কিনা তা বলে। |
| cols | number | টেক্সট এরিয়ার জন্য ডিফল্টভাবে দেখানো টেক্সট লাইনের সংখ্যা নির্দিষ্ট করে। |
| disabled | boolean | ইউজার ইনপুটের জন্য টেক্সট এরিয়া ডিজেবল করে। |
| form | form ID | টেক্সটএরিয়াকে একটি ফর্মের সাথে লিঙ্ক করে। |
| maxlength | number | টেক্সট এরিয়া যে সর্বোচ্চ ক্যারেক্টার গ্রহণ করবে তা নির্দিষ্ট করে। |
| minlength | number | টেক্সটএরিয়া যে ন্যূনতম ক্যারেক্টার গ্রহণ করবে তা নির্দিষ্ট করে। |
| name | name | টেক্সট এরিয়ার একটি নাম অ্যাসাইন করে। |
| placeholder | text | একটি টেক্সট প্লেসহোল্ডার প্রদান করে যা ইউজার টেক্সটএরিয়ায় টাইপ করা শুরু করলে গায়েব হয়ে যায়। |
| readonly | boolean | ইউজার টেক্সটএরিয়ার কন্টেন্ট মডিফাই করতে পারবে না তা নির্দেশ করে। |
| required | boolean | ইউজারকে ফর্ম পূরণ করতে হবে তা নির্দেশ করে। |
| rows | number | টেক্সট এরিয়ার জন্য ডিফল্টভাবে দেখানো টেক্সট কলামের সংখ্যা নির্দিষ্ট করে। |
উপসংহার
HTML <textarea> ট্যাগ মাল্টিলাইন টেক্সট ইনপুট এলিমেন্ট তৈরি করতে ব্যবহৃত হয়। এগুলো উপযোগী যদি আপনি একজন ইউজার থেকে বড় স্ট্রিং ডেটা সংগ্রহ করতে চান।
এই টিউটোরিয়ালে, উদাহরণের রেফারেন্সে, <textarea> ট্যাগ ব্যবহার করে টেক্সট এরিয়া তৈরি করার পদ্ধতি আলোচনা করা হয়েছে। এই টিউটোরিয়ালে <textarea> ট্যাগ দ্বারা অফার করা ট্যাগ-স্পেসিফিক অ্যাট্রিবিউটের একটি রেফারেন্স টেবিলও প্রদান করা হয়েছে। এখন আপনি <textarea> ট্যাগ HTML এক্সপার্টের মতো ব্যবহার করার জন্য প্রস্তুত!
