এইচটিএমএলে একটি চেকবক্স কীভাবে তৈরি করবেন?



আপনার পছন্দসই ওয়েবসাইটগুলি ব্রাউজ করার সময়, যখন আপনাকে একটি বিকল্প নির্বাচন করার দরকার হয় তখন চেকবক্সগুলি উপস্থিত হয়। এখানে, আমরা কীভাবে এইচটিএমএল একটি চেকবক্স তৈরি করবেন তা দেখতে পাবেন।

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





এইচটিএমএলে একটি চেকবক্স কীভাবে তৈরি করবেন?

একটি চেকবক্স একটি ফর্ম উপাদান যা আপনাকে বিভিন্ন উপলভ্য বিকল্প থেকে একাধিক বিকল্প নির্বাচন করতে দেয় allows চেকবাক্সগুলি HTMLtag দিয়ে তৈরি করা হয়। এটি অ্যানিমেন্টের ভিতরে বাসা বাঁধতে পারে বা তারা একা দাঁড়িয়ে থাকতে পারে। এগুলির সাহায্যে কোনও ফর্মের সাথেও যুক্ত হতে পারে ফর্ম বৈশিষ্ট্য ট্যাগ এর।

একটি সাধারণ চেকবক্স তৈরি করার জন্য এখানে একটি প্রাথমিক উদাহরণ:



লাল সবুজ নীল

আউটপুট:

চেকবক্স আউটপুট - এইচটিএমএল - এডুরেকায় চেকবক্স

আসুন আমরা অন্য একটি উদাহরণ বিবেচনা করি এবং একটি সাবমিট বাটন যুক্ত করি যাতে চেকবক্সগুলি কার্যকর হতে পারে। এখানে, আপনি এমন কোনও উপাদানগুলির মধ্যেও চেকবক্সগুলি রাখতে পারেন যা ফর্মটি প্রক্রিয়া করার জন্য একটি পৃষ্ঠা নির্দিষ্ট করে।



যা আপনার প্রিয় রং? লাল সবুজ নীল

ফলাফল:

আউটপুট:

চেকবক্স বনাম রেডিও বোতামগুলি

রেডিও বোতাম ব্যবহারকারীকে কেবল একটি বিকল্প নির্বাচন করতে দেয়। অন্যদিকে, চেকবক্সগুলি ব্যবহারকারীকে যে কোনও সংখ্যক বিকল্প নির্বাচন করতে দেয়। আসুন একটি উদাহরণ নিই এবং দেখুন কীভাবে রেডিও বোতাম এবং চেকবক্সগুলি কাজ করে:

জাবা-তে একটি সম্পর্ক রয়েছে
 

চেকবাক্স

যা আপনার প্রিয় রং? লাল সবুজ নীল

রেডিওর বোতামগুলি

আপনার লিঙ্গ নির্বাচন? পুরুষ মহিলা অজানা

ফলাফল:

আউটপুট:

উপরের উদাহরণে, আপনি দেখতে পাচ্ছেন যে আপনি যতগুলি চেকবক্স চান তা নির্বাচন করতে পারেন। এটি চেকবাক্সকে এমন সময়ের জন্য উপযুক্ত করে তোলে যেখানে ব্যবহারকারীর একাধিক বিকল্প নির্বাচন করতে সক্ষম হওয়া উচিত। তবে, আপনি যদি একাধিক রেডিও বোতাম নির্বাচন করার চেষ্টা করেন তবে পূর্ববর্তী নির্বাচনটি ডি-সিলেক্ট করা হবে। এটি আপনাকে ব্যবহারকারীদের কেবলমাত্র একটি বিকল্প নির্বাচন করতে প্রয়োগ করতে সহায়তা করে।

এইচটিএমএলে একটি চেকবক্স অক্ষম করা হচ্ছে

আপনি একটি চেকবক্সটি অক্ষম করতে পারেন অক্ষম বৈশিষ্ট্য ব্যবহার করে। নির্দিষ্ট মানদণ্ড পূরণ হয়েছে কিনা তার উপর নির্ভর করে চেকবক্সটি সক্ষম বা অক্ষম করতে স্ক্রিপ্টের সাথে একত্রে এটি করা যেতে পারে।

আমরা কীভাবে একটি চেকবক্সটি অক্ষম করতে পারি তা দেখতে একটি উদাহরণ নেওয়া যাক:

লাল সবুজ নীল

আউটপুট:

জাভাতে সাবস্ট্রিং কীভাবে ব্যবহার করতে হয়

উপরের উদাহরণে, আমরা রঙ লাল অক্ষম করেছি। সুতরাং, আপনি চেকবক্স থেকে সবুজ এবং নীল নির্বাচন করতে পারেন তবে রঙ লাল নয়।

এটির সাথে আমরা আমাদের নিবন্ধের শেষে এসেছি। আমি আশা করি আপনি কীভাবে এইচটিএমএলতে চেকবক্সগুলি কাজ করে এবং কীভাবে সেগুলি আলাদাভাবে ব্যবহার করা যায় তা আপনি বুঝতে পেরেছেন।

এখন আপনি এইচটিএমএলে চেকবাক্স সম্পর্কে জানেন, এটি পরীক্ষা করে দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'HTML এ চেকবক্স' এর মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।