এই নিবন্ধটি ব্যবহারিক বাস্তবায়নের সাথে HTML-এ ইনপুট প্রকার=“তারিখ”-এর ব্যবহার প্রদর্শন করে।
কিভাবে HTML এ input type=”date” ব্যবহার করবেন?
'ইনপুট টাইপ='ডেটা'' বিভিন্ন ওয়েবসাইটে ব্যবহার করা যেতে পারে, যেমন স্বাস্থ্যসেবা ওয়েবসাইট, এয়ারলাইন বুকিং ওয়েবসাইট, ই-কমার্স ওয়েবসাইট, সোশ্যাল নেটওয়ার্কিং সাইট ইত্যাদি। ডেট পিকারের সিনট্যাক্স নিচে উল্লেখ করা হয়েছে
< ইনপুট প্রকার = 'তারিখ' আইডি = '' নাম = '' >
উপরের কোড স্নিপেটগুলিতে ব্যবহৃত বৈশিষ্ট্যগুলি হল:
- প্রথমত, ' প্রকার ” অ্যাট্রিবিউট ইনপুট ফিল্ডকে ডেট পিকার হিসেবে কাজ করতে দেয় যেখান থেকে ব্যবহারকারী যেকোনো তারিখ বেছে নিতে পারে।
- পরবর্তী, ' আইডি ” বৈশিষ্ট্য সেই উপাদানটির স্বতন্ত্রতা সংজ্ঞায়িত করে। এটি ব্যবহার করে, উপাদানটি নির্বাচন করা যেতে পারে এবং জাভাস্ক্রিপ্ট কার্যকারিতা প্রয়োগ করতে পারে।
- এর পরে, ' নাম ” বৈশিষ্ট্য সেই উপাদানটির নাম নির্দিষ্ট করে। এটি নির্বাচিত উপাদানের মান পাওয়ার জন্য বৈধতা প্রক্রিয়ায় সহায়তা প্রদান করে।
বোঝার স্তর বাড়ানোর জন্য, আসুন আমরা বিভিন্ন উদাহরণের মধ্য দিয়ে হেঁটে যাই:
উদাহরণ 1: HTML এ type= “date” ব্যবহার করা
এইচটিএমএল ফাইলে, একটি তৈরি করুন ' <ফর্ম> একটি ফর্ম ধারক তৈরির জন্য ট্যাগ করুন এবং কোডের নিম্নলিখিত লাইনটি সন্নিবেশ করুন:
< ফর্ম >
< লেবেল জন্য = 'তারিখ যোগ দিতে' > আপনার যোগদানের তারিখ নির্বাচন করুন: < / লেবেল >
< ইনপুট প্রকার = 'তারিখ' আইডি = 'তারিখ যোগ দিতে' নাম = 'তারিখ যোগ দিতে' >
< / ফর্ম >
উপরের কোড স্নিপেটে:
- প্রথমত, ' <লেবেল> ' ট্যাগ ব্যবহার করা হয় যেখানে ডামি ডেটা স্থাপন করা হয় এবং 'এর মান তারিখ যোগ দিতে 'কে প্রদান করা হয়েছে' জন্য ” বৈশিষ্ট্য।
- পরবর্তী, ' <ইনপুট> ' ট্যাগ ' এর একটি মান দিয়ে ব্যবহার করা হয় তারিখ ' এটিতে ' প্রকার ” বৈশিষ্ট্য।
- এর পরে, 'এর মান সেট করুন তারিখ যোগ দিতে 'এর কাছে' আইডি ” বৈশিষ্ট্য। এছাড়াও, 'এর মান সেট করুন নাম ” প্রয়োজন অনুযায়ী বৈশিষ্ট্য।
উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
উপরের জিআইএফটি ব্যাখ্যা করে যে এইচটিএমএল-এ ইনপুট টাইপ = 'ডেটা' ব্যবহার করে তারিখ পিকার তৈরি করা হয়েছে।
উদাহরণ 2: জাভাস্ক্রিপ্ট ব্যবহার করে তারিখ পুনরুদ্ধার করা
ডেটা পুনরুদ্ধার করতে, ব্যবহারকারীরা JavaScript কার্যকারিতা ব্যবহার করতে পারেন। একটি ভাল বোঝার জন্য, নীচের কোড ব্লক দেখুন:
< বোতাম অনক্লিক = 'retrieveDate()' >তারিখ পান< / বোতাম >< লিপি প্রকার = 'টেক্সট/জাভাস্ক্রিপ্ট' >
ফাংশন retrieveDate ( ) {
তারিখ ইনপুট ছিল = document.getElementById ( 'তারিখ যোগ দিতে' ) ;
var নির্বাচিত তারিখ = dateInput. মান ;
সতর্ক ( 'নির্বাচিত তারিখ:' + নির্বাচিত তারিখ ) ;
}
< / লিপি >
উপরের কোড স্নিপেটে:
- প্রথমত, ' পুনরুদ্ধার তারিখ() ' ফাংশন তৈরি করা হয় '