HTML <textarea> placeholder অ্যাট্রিবিউট

`<textarea>` placeholder অ্যাট্রিবিউট

<textarea> এলিমেন্টের placeholder অ্যাট্রিবিউট ব্যবহার করে টেক্সট এরিয়ার ভিতরে একটি হিন্ট (hint) বা প্লেসহোল্ডার টেক্সট সেট করা হয়। ব্যবহারকারী টাইপ শুরু করার আগে এই টেক্সটটি মেলো (faded) রঙে দেখে। একবার ব্যবহারকারী ক্লিক করে টাইপ শুরু করলে প্লেসহোল্ডার অদৃশ্য হয়ে যায়।

সাধারণ ব্যবহারের উদাহরণ: "আপনার নাম লিখুন", "মোবাইল নম্বর দিন", "১০০ শব্দে লিখুন" ইত্যাদি।

সিনট্যাক্স

<textarea placeholder="আপনার হিন্ট টেক্সট"></textarea>

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>সাক্ষাতকার প্রশ্নাবলী</h2>
  <p>প্রশ্ন ১</p>
  <textarea rows="6" cols="70" placeholder="আপনি কেন এডিটর জব প্রোফাইল চান? (১০০ শব্দ)"></textarea>
  <p>প্রশ্ন ২</p>
  <textarea rows="6" cols="70" placeholder="আপনার কি আগে পাবলিশিং অভিজ্ঞতা আছে? (১০০ শব্দ)"></textarea>
</body>
</html>

আউটপুট

HTML <textarea> placeholder অ্যাট্রিবিউট

উপরের উদাহরণে দুটি <textarea> তৈরি করা হয়েছে, প্রতিটিতে আলাদা প্লেসহোল্ডার:

<textarea rows="6" cols="70" placeholder="আপনি কেন এডিটর জব প্রোফাইল চান? (১০০ শব্দ)"></textarea>
<textarea rows="6" cols="70" placeholder="আপনার কি আগে পাবলিশিং অভিজ্ঞতা আছে? (১০০ শব্দ)"></textarea>

গুরুত্বপূর্ণ নোটস

Placeholder লেবেল (label) এর বিকল্প নয়। অ্যাক্সেসিবিলিটির জন্য সবসময় <label> ব্যবহার করুন।
Placeholder টেক্সটটি ফর্ম সাবমিটের সময় সার্ভারে পাঠানো হয় না।
CSS-এ ::placeholder সিলেক্টর দিয়ে এর রঙ, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করা যায়।

CSS কাস্টমাইজেশন উদাহরণ

textarea::placeholder {
  color: #999;
  font-style: italic;
  font-size: 0.9rem;
}