Tag Archives: চেকবক্স

এইচটিএমএল ইনপুট ধরন (HTML Input Types)

Huge Sell on Popular Electronics

-মাসুদ-

 

আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।


 <form>
 First name:<br>
 <input type="text" name="firstname">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ


First name:

Last name:

 

পাসওয়ার্ড ইনপুট

পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।


<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>


 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ


User name:
User password:

পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।

 

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ


<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>


 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ


First name:

Last name:


 

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।


<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a cycle
 <br>
 <input type="checkbox" name="vehicle" value="Car">I have a motorcycle
 </form>

 

 উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ


I have a cycle
I have a motorcycle

 

রেডিও বাটন

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ


 <form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ


Male
Female


 

বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)

Huge Sell on Popular Electronics

মো: আসাদুজ্জামান মিলন
আইটি ইন্সট্রাক্টর,
এমএসআইটি, কুড়িগ্রাম।

 

সমর্থিত ফরম কন্ট্রোল

বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে

  • input
  • textarea
  • checkbox
  • radio
  • select

 

বুটস্ট্র্যাপ ইনপুট

বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে।

নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ ইনপুট যথাঃ text ও password এর ব্যবহার দেখান হল।


<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

 

বুটস্ট্র্যাপ টেক্সটএরিয়া


ওয়েবপেজের যে অংশে ব্যবহার কারী তার মতামত বা মনের কথা লিখতে পারে সেটিকে টেক্সট এরিয়া বলে। নিচের উদাহরনে টেক্সটএরিয়া এর ব্যবহার দেখান হল।


<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

 

বুটস্ট্র্যাপ চেকবক্স


ওয়েবপেজে চেকবক্স ব্যবহার করা হয় যাতে ব্যবহারকারী অনেক গুলি অপশন থেকে তার পছন্দের এক বা একাধিক অপশন বেছে নিতে পারে । এর মাধ্যমে ব্যবহার কারী অনেকগুলি র্পূব নির্ধারিত বিষয় থেকে তার পছন্দের বিষয়টি বা বিষয়গুলি র্নিবাচন করতে পারেন। নিচের উদাহরন থেকে বিষয়টি বোঝা যাবে।


<div class="checkbox">
  <label><input type="checkbox" value="">Dhaka</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Rangpur</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি অপশন পাবেন যার মধ্যে বেইজিং অপশনটি নিস্ক্রিয় থাকবে।

যদি সবগুলি চেকবক্স একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে checkbox-inline ক্লাস এর ব্যবহার করা যায়। নিচের উধাহরনে বিষয়টি বোঝা যাবে।


<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

বুটস্ট্র্যাপ রেডিও বাটন


ওয়েবপেজে রেডিও বাটন ব্যবহার করা হয়, যাতে ব্যবহার কারী অনেক গুলি অপশন থেকে তার পছন্দের একটি মাত্র অপশন বেছে নিতে পারে। উদাহরনঃ


<div class="radio">
  <label><input type="radio" name="optradio">Dhaka</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Rangpur</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি শহর থেকে ঢাকা ও রংপুর এর যেকোন একটি নির্বাচনের সুযোগ পাবেন। বেইজিং নামক অপশনটি নিস্ক্রিয় দেথানো হয়েছে।যদি সবগুলি রেডিও বাটন একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে radio-inline ক্লাস এর ব্যবহার করা যায়।

 

বুটস্ট্র্যাপ সিলেক্ট লিষ্ট


ব্যবহারকারীকে অনেকগুলি বিষয়ের একটি তালিকা থেকে একটি বিষয় বাছাই করার সুযোগ দিতে সিলেক্ট লিষ্ট ব্যবহার করতে হয। নিচের উধাহরনে বিষয়টি বোঝা যাবে।


<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>