বুটস্ট্রাপ ফরম ইনপুট (অন্যান্য)
Static কন্ট্রোল
যদি আপনি static কোন কন্ট্রোল সরাসরি প্রবেশ করাতে চান তাহলে একটি <p> এলিমেন্টের মধ্যে .form-control-static ক্লাস ব্যবহার করতে পারেনঃ
উদাহরণ
<!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>স্থির কন্ট্রোল সহ Horizontal ফরমঃ</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">E-mail:</label>
<p class="form-control-static">someone@email.com</p>
</div>
<div class="form-group">
<label class="control-label">password:</label>
<input type="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">submit</button>
</div>
</form>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ ফরম কন্ট্রোলের বিভিন্ন অবস্থা
- ফোকাস ইনপুট - ফোকাস অবস্থায় ইনপুটের আউটলাইন বাদ হয়ে যায় এবং তার পরিবর্তে স্যাডো বক্স ব্যবহৃত হয়।
- ডিসেবল(disabled) ইনপুট - একটি ইনপুট ফিল্ডকে disabled করার জন্য ঐ ইনপুট ফিল্ডে
disabledএট্রিবিউট ব্যবহার করুন। - ডিসেবল ফিল্ডসেট(FIELDSET) - একটি ফিল্ডসেটের সকল ইনপুট disabled করার জন্য ঐ ফিল্ডসেটে
disabledএট্রিবিউট ব্যবহার করুন। - শুধুমাত্র পঠনযোগ্য ইনপুট - একটি ইনপুটকে ইউজারের নিকট শুধুমাত্র পঠনযোগ্য করে উপস্থাপনের জন্য ঐ ইনপুট ফিল্ডে
readonlyএট্রিবিউট ব্যবহার করুন। এই ধরনের ইনপুট ইউজার পরিবর্তন/এডিট করতে পারেনা। - ভ্যালিডেশন অবস্থা(STATES) - বুটস্ট্রাপে ভূল, সতর্কতা এবং সফলতা বার্তার জন্য ভ্যালিডেশন স্টাইল রয়েছে। বুটস্ট্রাপের এই ভ্যালিডেশন স্টাইল ব্যবহার করার জন্য পেরেন্ট এলিমেন্টে
.has-warning,.has-errorঅথবা.has-successক্লাস যুক্ত করুন। - আইকন - আপনি
.has-feedbackক্লাস এবং একটি আইকনের সাহায্যে ফিডব্যাক যুক্ত করতে পারেন। - অদৃশ্যমান লেভেল - লেভেল অদৃশ্যমান অবস্থায় রাখার জন্য লেভেলে
.sr-onlyক্লাস যুক্ত করুন।
নিম্নলিখিত উদাহরণে একটি আনুভূমিক(Horizontal) ফরমে কিছু ফরম কন্ট্রোলের বিভিন্ন অবস্থা দেখানো হলোঃ
উদাহরণ
<!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>Horizontal ফরমঃ কন্ট্রোল স্টেট</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label">ফোকাস</label>
<input class="form-control" type="text" placeholder="ফোকাস দেখার জন্য ক্লিক করুন">
</div>
<div class="form-group">
<label class="control-label">Disabled</label>
<input class="form-control" type="text" placeholder="এটি একটি disable ইনপুট" disabled>
</div>
<fieldset disabled>
<div class="form-group">
<label class="control-label">Disable ইনপুট এবং সিলেক্ট লিস্ট (disabled ফিল্ডসেট)</label>
<input type="text" class="form-control" placeholder="disabled input">
</div>
<div class="form-group">
<label class="control-label"></label>
<select class="form-control">
<option>Disabled সিলেক্ট অপশন</option>
</select>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="control-label">সফল ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label">সতর্কতাসহ ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label">ভূল ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</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>
<form class="form-inline" role="form">
<div class="form-group">
<label class="control-label">ফোকাস</label>
<input class="form-control" type="text" placeholder="ফোকাস দেখার জন্য ক্লিক করুন">
</div>
<div class="form-group">
<label class="control-label">Disabled</label>
<input class="form-control" type="text" placeholder="এটি একটি disable ইনপুট" disabled>
</div>
<fieldset disabled>
<div class="form-group">
<label class="control-label">Disable ইনপুট এবং সিলেক্ট লিস্ট (disabled ফিল্ডসেট)</label>
<input type="text" class="form-control" placeholder="disabled input">
</div>
<div class="form-group">
<label class="control-label"></label>
<select class="form-control">
<option>Disabled সিলেক্ট অপশন</option>
</select>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="control-label">সফল ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label">সতর্কতাসহ ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label">ভূল ইনপুট এবং glyphicon</label>
<input type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</div>
</body>
</html>
ফলাফল