HTML Textarea:ধাপে ধাপে নির্দেশিকা

HTML textarea ট্যাগটি একটি ফর্মে একাধিক লাইন সহ একটি টেক্সট ইনপুট ক্ষেত্র তৈরি করতে ব্যবহৃত হয়। এটি <textarea> দিয়ে সংজ্ঞায়িত করা হয়েছে ট্যাগ এবং সীমাহীন সংখ্যক অক্ষর ধারণ করতে পারে।

আপনি যখন HTML এ একটি ফর্ম তৈরি করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি পাঠ্যের একটি দীর্ঘ স্ট্রিং গ্রহণ করতে চান। উদাহরণস্বরূপ, আপনি যদি একজন খুচরা বিক্রেতার ওয়েবসাইটের জন্য একটি গ্রাহক যোগাযোগ ফর্ম তৈরি করেন, তাহলে আপনি একটি ফর্ম উপাদান তৈরি করতে চাইতে পারেন যা গ্রাহকের সম্মুখীন হওয়া সমস্যার একটি বিশদ বিবরণ গ্রহণ করে৷

সেখানেই HTML <textarea> ট্যাগ আসে। <textarea> উপাদানটি একটি ফর্ম উপাদান তৈরি করতে ব্যবহৃত হয় যা মাল্টিলাইন পাঠ্য সম্পাদনা বৈশিষ্ট্য সরবরাহ করে। আপনি যদি ব্যবহারকারীর কাছ থেকে দীর্ঘ পাঠ্য প্রতিক্রিয়া গ্রহণ করতে চান তবে এই উপাদানটি কার্যকর৷

এই টিউটোরিয়ালটি কয়েকটি উদাহরণ সহ আলোচনা করবে, কিভাবে HTML <textarea> ব্যবহার করতে হয় আপনার কোডে ট্যাগ করুন। এই টিউটোরিয়ালের শেষে, <textarea> ব্যবহার করার জন্য আপনার প্রয়োজনীয় সমস্ত জ্ঞান আপনার কাছে থাকবে। একজন পেশাদারের মত ট্যাগ করুন!

HTML Textarea ট্যাগ

<textarea> ট্যাগ একটি ফর্ম একটি মাল্টিলাইন টেক্সট ইনপুট নিয়ন্ত্রণ ক্ষেত্র সংজ্ঞায়িত করতে ব্যবহৃত হয়. <textarea> ট্যাগ সীমাহীন সংখ্যক অক্ষর ধারণ করতে সক্ষম।

<textarea>-এর সিনট্যাক্স ট্যাগ নিম্নরূপ:

<textarea rows="10" cols="10">
Placeholder contents
</textarea>

আসুন আমাদের কোড ভাঙ্গা যাক। <textarea> আমাদের ওয়েব ফর্মে টেক্সট এরিয়া বক্স সংজ্ঞায়িত করতে ট্যাগ ব্যবহার করা হয়। <input> থেকে ভিন্ন ট্যাগ, <textarea> ট্যাগের একটি খোলার উভয়ই থাকতে হবে (<textarea> ) এবং একটি ক্লোজিং ট্যাগ (</textarea> ) কারণ টেক্সট এলাকাটি যে ডিফল্ট টেক্সটটি দেখাবে সেটি দুটি ট্যাগের মধ্যে থাকে।

আমরা আমাদের উদাহরণে দুটি বৈশিষ্ট্যও নির্দিষ্ট করেছি:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

• সারি ডিফল্টরূপে টেক্সট এলাকায় কতগুলি সারি থাকা উচিত তা ব্রাউজারকে নির্দেশ করে। অন্য কথায়, সারি বৈশিষ্ট্য টেক্সটেরিয়ার উচ্চতা নির্দিষ্ট করে।
• cols ডিফল্টরূপে পাঠ্য এলাকায় থাকা উচিত কলামের সংখ্যা। অন্য কথায়, কোলস অ্যাট্রিবিউট টেক্সটেরিয়ার প্রস্থকে নির্দিষ্ট করে।

ধরা যাক আমরা একটি স্থানীয় পোশাকের দোকানের জন্য একটি ওয়েব ফর্ম তৈরি করছি। এই ফর্মটি গ্রাহকদের তাদের ক্রয়ের বিষয়ে প্রতিক্রিয়া জানাতে অনুমতি দেবে। যেহেতু আমরা ব্যবহারকারীদের মতামতের বিস্তারিত অংশ জমা দেওয়ার জন্য জায়গা দিতে চাই, আমরা একটি <textarea> ব্যবহার করতে যাচ্ছি ব্যবহারকারীর প্রতিক্রিয়া সংগ্রহ করার জন্য HTML উপাদান।

প্রতিক্রিয়া ফর্ম তৈরি করতে আমরা নিম্নলিখিত কোড ব্যবহার করতে পারি:

<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> ব্যবহার করেছি ফিডব্যাক ফর্ম তৈরি করতে ট্যাগ করুন। আমরা চারটি বৈশিষ্ট্য নির্দিষ্ট করেছি, যা নিম্নরূপ:

• সারি 5 এ সেট করা হয়েছে এবং ফিল্ডে যতগুলো সারি থাকা উচিত তা সঞ্চয় করে।
• cols 30 তে সেট করা হয়েছে এবং ক্ষেত্রের কলামের সংখ্যা সঞ্চয় করে।
• আইডি হল ফর্মে বরাদ্দ করা অনন্য শনাক্তকারী, যা আমরা ফর্ম জমা দেওয়ার সময় ব্যবহার করা হবে৷
• ফর্ম শনাক্ত করতেও নাম ব্যবহার করা হয় এবং আমরা যদি কোনো ওয়েব সার্ভারে ফর্মটি জমা দিতে চাই তাহলে প্রয়োজন হয়৷

<textarea> ট্যাগ সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত।

উপরের উদাহরণ হল <textarea> এর একটি মৌলিক বাস্তবায়ন ট্যাগ, তবে আমরা আমাদের ফর্মকে আরও উন্নত করতে পারি।

HTML Textarea উদাহরণ

আসুন আমরা কিভাবে <textarea> ব্যবহার করতে পারি তা বোঝাতে আরও দুটি উন্নত উদাহরণের মাধ্যমে চলুন। টেক্সট এলাকা তৈরি করতে ট্যাগ করুন।

সর্বনিম্ন এবং সর্বোচ্চ দৈর্ঘ্য

আসুন আমাদের পোশাকের দোকানের উদাহরণে ফিরে যাই। ধরুন আমরা ব্যবহারকারীদের মতামত লেখার সময় সংক্ষিপ্ত হতে উত্সাহিত করার জন্য একজন ব্যবহারকারীর জমা দেওয়া অক্ষরের সংখ্যা 1000 তে সীমাবদ্ধ করতে চেয়েছিলাম। ব্যবহারকারীরা ফর্মে কিছু লিখতে পারে তা নিশ্চিত করতে আমরা ন্যূনতম অক্ষর সীমা 10-এ সেট করতে চাই।

সেখানেই minlength এবং maxlength এট্রিবিউটগুলি আসে৷ minlength ব্যবহার করা হয় ন্যূনতম সংখ্যক অক্ষর নির্দিষ্ট করতে একজন ব্যবহারকারীকে লিখতে হবে, এবং maxlength ব্যবহার করা হয় একটি ব্যবহারকারীর ফর্মে লিখতে পারে এমন সর্বোচ্চ সংখ্যক অক্ষর নির্দিষ্ট করতে৷

এখানে আমাদের ওয়েব ফর্মের আগের একটি উদাহরণ দেওয়া হল যাতে মিনলেংথ এবং ম্যাক্সলেংথ অ্যাট্রিবিউট সেট আছে:

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	Your feedback goes here.
	</textarea>
</form>

আমাদের ফর্ম ফিরে আসে:

আমাদের ফর্মে কোন দৃশ্যমান পরিবর্তন নেই, কিন্তু আমরা যদি আমাদের ফর্ম জমা দেওয়ার চেষ্টা করি, যদি ব্যবহারকারী 1000 টির বেশি অক্ষর লিখে থাকেন তবে ফর্মের বিষয়বস্তু অবৈধ বলে বিবেচিত হবে৷

এটা মনে রাখা গুরুত্বপূর্ণ যে, ব্যবহারকারী যদি আমাদের ফর্মে 10টির কম অক্ষর লেখেন, তবুও টেক্সটেরিয়াটি বৈধ বলে বিবেচিত হবে৷ আমরা যদি ন্যূনতম সীমা বলবৎ করতে চাই, তাহলে আমাদের 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> ট্যাগ বেশ কিছু ট্যাগ-নির্দিষ্ট বৈশিষ্ট্য গ্রহণ করে। উপরন্তু, <textarea> ট্যাগ HTML-এর সমস্ত গ্লোবাল অ্যাট্রিবিউট সমর্থন করে।

এখানে ট্যাগ-নির্দিষ্ট বৈশিষ্ট্যগুলি রয়েছে যা <textarea> দ্বারা সমর্থিত ট্যাগ:

উপসংহার

HTML <textarea> ট্যাগ মাল্টিলাইন টেক্সট ইনপুট উপাদান তৈরি করতে ব্যবহৃত হয়। আপনি যদি ব্যবহারকারীর কাছ থেকে দীর্ঘ স্ট্রিং ডেটা সংগ্রহ করতে চান তবে এগুলি কার্যকর হতে পারে৷

এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করা হয়েছে, কিভাবে <textarea> ব্যবহার করতে হয় টেক্সট এলাকা তৈরি করতে ট্যাগ করুন। এই টিউটোরিয়ালটি <textarea> দ্বারা দেওয়া ট্যাগ-নির্দিষ্ট বৈশিষ্ট্য সহ একটি রেফারেন্স টেবিলও প্রদান করেছে ট্যাগ এখন আপনি <textarea> ব্যবহার শুরু করতে প্রস্তুত HTML বিশেষজ্ঞের মত ট্যাগ করুন!