فرم‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


تنظیمات پیش فرض بوت استرپ

کنترل‌های فرم بطور خودکار یکسری استایل‌های سراسری را با بوت استرپ دریافت می‌کنند:[۱]

همهٔ عناصر <input> ،<textarea> و <select> متنی با کلاس .form-control عرض ۱۰۰٪ دارند.

چیدمان فرم بوت استرپ

بوت استرپ سه نوع چیدمان فرم را ایجاد کرده‌است:

  • فرم عمودی (حالت پیش فرض)
  • فرم افقی
  • فرم درون خطی (به انگلیسی: Inline)


قوانین استاندارد برای هر سه چیدمان فرم:

  • برچسب‌ها و کنترل‌های فرم در <div class="form-group"> قرار داده شوند (برای فضایابی بهینه مورد نیاز است)
  • کلاس .form-controlبه همهٔ عنصرهای <input> ،<textarea> و <select> اضافه شود

فرم عمودی بوت استرپ (پیش فرض)

مثال زیر یک فرم عمودی با دو فیلد ورودی، یک چک باکس و یک کلید ثبت را ایجاد می‌کند:

مثا‎ل

 1 <form action="/action_page.php">
 2   <div class="form-group">
 3     <label for="email">Email address:</label>
 4     <input type="email" class="form-control" id="email">
 5   </div>
 6   <div class="form-group">
 7     <label for="pwd">Password:</label>
 8     <input type="password" class="form-control" id="pwd">
 9   </div>
10   <div class="checkbox">
11     <label><input type="checkbox"> Remember me</label>
12   </div>
13   <button type="submit" class="btn btn-default">Submit</button>
14 </form>


مشاهدهٔ نتیجه


فرم درون خطی بوت استرپ

در یک فرم درون خطی، همهٔ عنصرها درون خطی و چپ-چین هستند و برچسب‌ها در کنار آنها هستند.

توجه: این تنظیمات فقط برروی فرم‌های درون صفحه نمایش‌هایی با پهنای حداقل 768px اعمال می‌شود!

قاعده اضافی برای فرم درون خطی:

  • کلاس .form-inline به عنصر <form> اضافه شود

مثال زیر فرم درون خطی با دو فیلد ورودی، یک چک باکس و یک کلید ثبت را تولید می‌کند:

مثال

 1 <form class="form-inline" action="/action_page.php">
 2   <div class="form-group">
 3     <label for="email">Email address:</label>
 4     <input type="email" class="form-control" id="email">
 5   </div>
 6   <div class="form-group">
 7     <label for="pwd">Password:</label>
 8     <input type="password" class="form-control" id="pwd">
 9   </div>
10   <div class="checkbox">
11     <label><input type="checkbox"> Remember me</label>
12   </div>
13   <button type="submit" class="btn btn-default">Submit</button>
14 </form>


مشاهدهٔ نتیجه


نکته: اگر برای هر ورودی یک برچسب اضافه نکنید، صفحه خوان‌ها با فرم‌های شمات دچار مشکل می‌شوند. می‌توانید برچسب‌ها را برای همه دستگاه‌ها به جز صفحه خوان‌ها، حدف کنید برای این منظور از کلاس .sr-only استفاده کنید:

مثال

 1 <form class="form-inline" action="/action_page.php">
 2   <div class="form-group">
 3     <label class="sr-only" for="email">Email address:</label>
 4     <input type="email" class="form-control" id="email">
 5   </div>
 6   <div class="form-group">
 7     <label class="sr-only" for="pwd">Password:</label>
 8     <input type="password" class="form-control" id="pwd">
 9   </div>
10   <div class="checkbox">
11     <label><input type="checkbox"> Remember me</label>
12   </div>
13   <button type="submit" class="btn btn-default">Submit</button>
14 </form>


مشاهدهٔ نتیجه


فرم افقی بوت استرپ

فرم افقی بوت استرپ یعنی در صفحه نمایش‌های بزرگ و متوسط، برچسب‌ها در کنار فیلد ورودی (افقی) قرار می‌گیرند. در صفحه نمایش‌های کوچک (767px و کمتر)، این فرم به حالت عمودی تبدیل می‌شود (برچسب‌ها بالای هر ورودی قرار می‌گیرند).

قواعد اضافی برای یک فرم افقی:

  • کلاس .form-horizontal به عنصر <form> اضافه شود
  • کلاس .control-label به همهٔ عنصرهای <label> اضافه شود
نکته: از کلاس تعریف شدهٔ grid بوت استرپ برای قرار دادن برچسب‌ها و گروه‌های کنترل فرم در یک چیدمان افقی استفاده کنید.

مثال زیر یک فرم افقی با دو فیلد ورودی، یک چک باکس و یک کلید ثبت تولید می‌کند.

مثال

 1 <form class="form-horizontal" action="/action_page.php">
 2   <div class="form-group">
 3     <label class="control-label col-sm-2" for="email">Email:</label>
 4     <div class="col-sm-10">
 5       <input type="email" class="form-control" id="email" placeholder="Enter email">
 6     </div>
 7   </div>
 8   <div class="form-group">
 9     <label class="control-label col-sm-2" for="pwd">Password:</label>
10     <div class="col-sm-10">
11       <input type="password" class="form-control" id="pwd" placeholder="Enter password">
12     </div>
13   </div>
14   <div class="form-group">
15     <div class="col-sm-offset-2 col-sm-10">
16       <div class="checkbox">
17         <label><input type="checkbox"> Remember me</label>
18       </div>
19     </div>
20   </div>
21   <div class="form-group">
22     <div class="col-sm-offset-2 col-sm-10">
23       <button type="submit" class="btn btn-default">Submit</button>
24     </div>
25   </div>
26 </form>


مشاهدهٔ نتیجه



منابع آموزشی