<input> এলিমেন্টের placeholder অ্যাট্রিবিউটটি ইনপুটের জন্য একটি ইঙ্গিত (hint) সেট করতে ব্যবহৃত হয় যা সেই নির্দিষ্ট ইনপুটে কী আশা করা হচ্ছে তার সংক্ষিপ্ত বিবরণ দেয়। এই অ্যাট্রিবিউট নিচের ইনপুট টাইপগুলো জন্য কাজ করে: text, url, search, email, password এবং tel। এটি HTML5-এ চালু করা হয়েছিল।
সিনট্যাক্স:
<input placeholder="placeholder_text">
এখানে, placeholder_text হলো সংক্ষিপ্ত ইঙ্গিত অর্থাৎ placeholder যা ব্যবহারকারীরা ওই ওয়েব পেজে যাবার সময় দেখবে।
এখন <input> এলিমেন্টের placeholder অ্যাট্রিবিউট বাস্তবায়নের উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <body> <h2>নিবন্ধন</h2> <form action="" method="get"> আইডি - <input type="text" name="id" placeholder="এখানে UserId লিখুন..."><br> পাসওয়ার্ড - <input type="password" name="pwd" placeholder="এখানে পাসওয়ার্ড লিখুন..."><br> জন্ম তারিখ - <input type="date" name="dob"><br> টেলিফোন - <input type="tel" name="tel" placeholder="এখানে মোবাইল নম্বর লিখুন..."><br> ইমেইল - <input type="email" name="email" placeholder="এখানে ইমেইল লিখুন..."><br><br> <button type="submit" value="Submit">জমা দিন</button> </form> </body> </html>
আউটপুট
উপরের উদাহরণে, আমাদের কিছু ফিল্ডসহ একটি ফর্ম রয়েছে:
<form action="" method="get"> আইডি - <input type="text" name="id" placeholder="এখানে UserId লিখুন..."><br> পাসওয়ার্ড - <input type="password" name="pwd" placeholder="এখানে পাসওয়ার্ড লিখুন..."><br> জন্ম তারিখ - <input type="date" name="dob"><br> টেলিফোন - <input type="tel" name="tel" placeholder="এখানে মোবাইল নম্বর লিখুন..."><br> ইমেইল - <input type="email" name="email" placeholder="এখানে ইমেইল লিখুন..."><br><br> <button type="submit" value="Submit">জমা দিন</button> </form>
সব ফিল্ডের জন্য placeholder সেট করা হয়েছে যেমন:
<input type="password" name="pwd" placeholder="এখানে পাসওয়ার্ড লিখুন...">
শুধু placeholder অ্যাট্রিবিউট ব্যবহার করুন এবং সংক্ষিপ্ত ইঙ্গিত সেট করুন:
placeholder="এখানে পাসওয়ার্ড লিখুন..."
