বুটস্ট্রাপ ফরম ইনপুট - Form Input
সাপোর্টযোগ্য ফরম কন্ট্রোলসমূহ
বুটস্ট্রাপে নিম্নলিখিত ফরম কন্ট্রোলসমূহ সাপোর্ট করেঃ
- input
- textarea
- checkbox
- radio
- select
বুটস্ট্রাপ ইনপুট
বুটস্ট্রাপে এইচটিএমএল(৫) এর সকল ইনপুট টাইপ সাপোর্ট করে: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, এবং color
নোটঃ যদি টাইপ সঠিকভাবে ডিক্লেয়ার করা না হয় তাহলে ইনপুটগুলো যথাযথভাবে স্টাইল হবে না!
নিচের উদাহরণে দুটি ইনপুট এলিমেন্ট রয়েছে; একটি টেক্সট এবং অন্যটি পাসওয়ার্ড টাইপের:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: ইনপুট</h2>
<p>নিচের ফরমে দুটি ইনপুট এলিমেন্ট রয়েছে; একটি টেক্সট এবং পাসওয়ার্ড টাইপের:</p>
<form role="form">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>password:</label>
<input type="password" class="form-control">
</div>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ টেক্সটএরিয়া
নিচে একটি টেক্সটএরিয়ার উদাহরণ দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: টেক্সটএরিয়া</h2>
<p>নিচের ফরমে মন্তব্যের ক্ষেত্রে একটি টেক্সটএরিয়া দেখানো হলো:</p>
<form role="form">
<div class="form-group">
<label>Comment:</label>
<textarea class="form-control" rows="4"></textarea>
</div>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ চেকবক্স
ইউজারের নিকট থেকে পূর্বনির্ধারিত অপশন লিস্ট থেকে একটি সংখ্যক অপশন সিলেক্ট করিয়ে নেয়ার ক্ষেত্রে চেকবক্স ব্যবহার করা হয়।
নিম্নলিখিত উদাহরণে তিনটি চেকবক্স দেখানো হলো। শেষের চেকবক্সটি disabled করে রাখা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: চেকবক্স</h2>
<p>নিচে তিনটি চেকবক্স সহ একটি ফরম দেখানো হলো। শেষের চেকবক্সটি disabled করে রাখা হয়েছে:</p>
<form role="form">
<div class="checkbox">
<label><input type="checkbox">Checkbox 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Checkbox 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" disabled>Checkbox 3</label>
</div>
</form>
</div>
</body>
</html>
ফলাফল
যদি আপনি চেকবক্সগুলোকে একই লাইনে রাখতে চান তাহলে .checkbox-inline ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: ইনলাইন চেকবক্স</h2>
<p>নিচের ফরমে তিনটি ইনলাইন চেকবক্স দেখানো হলো:</p>
<form role="form">
<label class="checkbox-inline">
<input type="checkbox">Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox">Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox">Checkbox 3
</label>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ রেডিও বাটন
পূর্বনির্ধারিত অপশন লিস্ট থেকে ইউজারকে শুধুমাত্র একটি অপশন সিলেক্ট করার ক্ষমতা প্রদানের ক্ষেত্রে রেডিও বাটন ব্যবহার করা হয়। এক্ষেত্রে ইউজারের ক্ষমতা সীমিত করে দেয়া হয়।
নিম্নলিখিত উদাহরণে তিনটি রেডিও বাটন রয়েছে। শেষের অপশনটি disable করে রাখা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: রেডিও বাটন</h2>
<p>নিচের ফরমে তিনটি রেডিও বাটন দেখানো হলো। শেষের অপশনটি disable করে রাখা হয়েছে:</p>
<form role="form">
<div class="radio">
<label><input type="radio" name="optradio">Radio 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Radio 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Radio 3</label>
</div>
</form>
</div>
</body>
</html>
ফলাফল
যদি রেডিও বাটনগুলোকে একই লাইনে পেতে চান তাহলে .radio-inline ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: ইনলাইন রেডিও বাটন</h2>
<p>নিচের ফরমে তিনটি ইনলাইন রেডিও বাটন দেখানো হলো:</p>
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">Radio 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Radio 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Radio 3
</label>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ সিলেক্ট লিস্ট
ইউজারকে একাধিক অপশন সিলেক্ট করার সুযোগ দেয়ার ক্ষেত্রে সিলেক্ট লিস্ট ব্যবহার করা হয়।
নিম্নলিখিত উদাহরণে একটি ড্রপডাউন লিস্ট দেখানো হলো(সিলেক্ট লিস্ট):
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms Input Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>ফরম কন্ট্রোল: সিলেক্ট</h2>
<p>নিচের উদহরণে দুইটি ড্রপডাউনসহ একটি ফরম দেখানো হলো (সিলেক্ট লিস্ট):</p>
<form role="form">
<div class="form-group">
<label for="selectlist1">সিলেক্ট লিস্ট (একটি সিলেক্ট করুন):</label>
<select class="form-control">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
<br>
<label for="selectlist2">একের অধিক সিলেক্ট লিস্ট (একের অধিক সিলেক্ট করার জন্য Ctrl চেপে ধরুন):</label>
<select multiple class="form-control">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>
</form>
</div>
</body>
</html>
ফলাফল