বুটস্ট্রাপ ফরম- Bootstrap Form
বুটস্ট্রাপের ডিফল্ট সেটিংস
বুটস্ট্রাপ ব্যবহারে ফরম কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু সর্বজন ব্যবহার্য সাধারণ স্টাইল গ্রহন করে।
.form-control ক্লাস যুক্ত সকল টেক্সট ইনপুট এলিমেন্ট যেমনঃ <input>, <textarea> এবং
<select> এর প্রশস্ততা সাধারণত ১০০% হয়।
বুটস্ট্রাপ ফরম লে-আউট
বুটস্ট্রাপে তিন ধরণের ফরম লে-আউট রয়েছেঃ
- উলম্ব(Vertical) ফরম (এটিই ডিফল্ট)
- আনুভূমিক(Horizontal) ফরম
- ইনলাইন(Inline) ফরম
তিনটি ফরম লে-আউটের জন্যই স্ট্যান্ডার রুলস গুলো হলোঃ
- সবসময়
<form role="form">ব্যবহার করুন। (স্ক্রিন রিডারদের জন্য সহায়ক) - লেভেল এবং ফরম কন্ট্রোলগুলো
<div class="form-group">এর মধ্যে রাখুন (কাঙ্খিত ব্যবধানের জন্য প্রয়োজন) - সকল টেক্সট এলিমেন্ট যেমন
<input>,<textarea>এবং<select>এ.form-controlক্লাস যুক্ত করুন।
বুটস্ট্রাপ Vertical ফরম (ডিফল্ট)
নিচের উদাহরণে দুইটি ইনফুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটন সহ একট vertical ফরম তৈরি করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms 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>
<form role="form">
<div class="form-group">
<label for="email">E-mail:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ ইনলাইন ফরম
ইনলাইন ফরমে, সকল এলিমেন্টই ইনলাইন এবং বামে এ্যালাইনযুক্ত হয়। এছাড়াও লেভেলগুলো একই সাথে থাকে।
নোটঃ এটি শুধুমাত্র সেখানের এমন দেখাবে যেখানে ভিউপোর্ট(ডিভাইসের স্ক্রিনের আকার) কমপক্ষে 768px প্রশস্ত!
ইনলাইন ফরম তৈরি করা জন্য <form> এলিমেন্টের মধ্যে .form-inline ক্লাস যুক্ত করতে হবে।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ একটি ইনলাইন ফরম দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms 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>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">E-mail:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
ফলাফল
টিপসঃ আপনি যদি আপনার ফরমের প্রতিটি ইনপুট ফিল্ডে লেভেল যুক্ত না করেন, তাহলে স্ক্রিন রিডারদের জন্য তা কষ্টদায়ক হবে। .sr-only ক্লাস ব্যবহার করে চাইলে আপনি স্ক্রিন রিডার ব্যতীত অন্য যেকোন ডিভাইসের জন্য লেভেল হাইড করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms 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>
<form role="form">
<div class="form-group">
<label class="sr-only" for="email">E-mail:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ Horizontal ফরম
একটি Horizontal ফরম মার্কআপের সংখ্যা এবং উপস্থাপনার দিক থেকে অন্যান্য ফরমের চেয়ে আলাদা।
Horizontal ফরম তৈরি করার নিয়মঃ
- Horizontal ফরম তৈরি করার জন্য
<form>এলিমেন্টে.form-horizontalক্লাস অন্তর্ভূক্ত করুন। - এবং সকল
<label>এলিমেন্টে.control-labelক্লাস যুক্ত করুন।
টিপসঃ একটি Horizontal ফরম লে-আউটে লেভেল এবং ফরম কন্ট্রোল গ্রুপকে বিন্যাস(align) করার জন্য বুটস্ট্রাপের পূর্বনির্ধারিত গ্রীড ক্লাস ব্যবহার করুন।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ Horizontal ফরম তৈরি করা হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Forms 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>বুটস্ট্রাপ Horizontal ফরম</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">E-mail:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
ফলাফল