فرم‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

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

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

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

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

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

فرم پشته ای (به انگلیسی: Stacked) بوت استرپ ۴

مثال زیر یک فرم پشته ای با دو فیلد ورودی، یک چک باکس و یک کلید ارسال تولید می‌کند:

برای تضمین حاشیه‌ها (به انگلیسی: Margins) مناسب هر کنترل فرم را داخل یک عنصر .form-group قرار دهید:

مثال

 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" placeholder="Enter email" id="email">
 5   </div>
 6   <div class="form-group">
 7     <label for="pwd">Password:</label>
 8     <input type="password" class="form-control" placeholder="Enter password" id="pwd">
 9   </div>
10   <div class="form-group form-check">
11     <label class="form-check-label">
12       <input class="form-check-input" type="checkbox"> Remember me
13     </label>
14   </div>
15   <button type="submit" class="btn btn-primary">Submit</button>
16 </form>


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


فرم های درون خطی (به انگلیسی: Inline) بوت استرپ

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

توجه: این تنظیمات فقط برروی فرم‌های درون صفحه نمایش‌هایی با پهنای حداقل ۵۷۶ پیکسل اعمال می‌شود! در صفحه نمایش‌های کوچکتر فرم‌ها بطور افقی بالای یکدیگر قرار می‌گیرند (به انگلیسی: Stacked Horizontal).

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

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

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

مثال

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


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


فرم درون خطی با کاربردها (به انگلیسی: Utilities)

فرم درون خطی ذکر شده «فشرده» به نظر می‌رسد و با امکانات فاصله گذاری بوت استرپ خیلی بهتر بنظر می‌رسد. مثال زیر برای هر ورودی یک حاشیه راست (.mr-sm-2) را در همهٔ دستگاه‌ها (کوچک تا بزرگ) اضافه می‌کند؛ و یک کلاس حاشیه پایین (.mb-2) برای استایل دهی به فیلد ورودی در هنگامی که شکسته شود استفاده می‌شود(یعنی به دلیل نبود فضا/عرض کافی، از حالت افقی به حالت عمودی تبدیل شود):

مثال

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


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


در مورد فاصله گذاری و سایر کلاس‌های “helper” در بخش امکانات بوت استرپ ۴ بیشتر خواهید آموخت.

شبکه / ردیف فرم

می‌توان از ستون ها(.col) برای کنترل عرض و alignment ورودی‌های فرم بدون امکانات فاصله گذاری استفاده کرد. تنها به یاد داشته باشید آنها را در یک container (به فارسی: ظرف) .row قرار دهید.

در مثال زیر، از دو ستون که در کنار هم ظاهر می‌شوند استفاده می‌کنیم.

در مورد ردیف‌ها و ستون‌ها در بخش شبکه بندی بوت استرپ بیشتر خواهید آموخت.

مثال

 1 <form>
 2   <div class="row">
 3     <div class="col">
 4       <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
 5     </div>
 6     <div class="col">
 7       <input type="password" class="form-control" placeholder="Enter password" name="pswd">
 8     </div>
 9   </div>
10 </form>


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


اگر حاشیه شبکه بندی کمتری نیاز دارد (gutter پیش فرض ستون‌ها را تغییر دهید) از .form-row بجای .row استفاده کنید:

مثال

 1 <form>
 2   <div class="form-row">
 3     <div class="col">
 4       <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
 5     </div>
 6     <div class="col">
 7       <input type="password" class="form-control" placeholder="Enter password" name="pswd">
 8     </div>
 9   </div>
10 </form>


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

اعتبارسنجی فرم

می‌توانید کلاس‌های اعتبارسنجی (به انگلیسی: Validation) مختلفی را برای ارائه بازخورد به کاربر استفاده کنید. براساس اینکه می‌خواهید بازخورد اعتبارسنجی را قبل یا بعد از ثبت فرم ارائه دهید، از یکی از .was-validated یا .needs-validation برای عنصر <form> استفاده کنید. برای نشان دادن اینکه چه چیزی در فرم کم است، فیلدهای ورودی کادرهای سبز (معتبر) یا قرمز (نامعتبر) می‌گیرند.

همچنین می‌توانید برای اعلام واضح به کاربر که چه چیزی کم است یا چه اقداماتی قبل از ثبت فرم نیاز است، از پیام .valid-feedback یا .invalid-feedback استفاده کنید.

مثال

در این مثال، برای نشان دادن اینکه قبل از ثبت فرم چه چیزی کم است از .was-validated استفاده کنید:

 1 <form action="/action_page.php" class="was-validated">
 2   <div class="form-group">
 3     <label for="uname">Username:</label>
 4     <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
 5     <div class="valid-feedback">Valid.</div>
 6     <div class="invalid-feedback">Please fill out this field.</div>
 7   </div>
 8   <div class="form-group">
 9     <label for="pwd">Password:</label>
10     <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
11     <div class="valid-feedback">Valid.</div>
12     <div class="invalid-feedback">Please fill out this field.</div>
13   </div>
14   <div class="form-group form-check">
15     <label class="form-check-label">
16       <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
17       <div class="valid-feedback">Valid.</div>
18       <div class="invalid-feedback">Check this checkbox to continue.</div>
19     </label>
20   </div>
21   <button type="submit" class="btn btn-primary">Submit</button>
22 </form>

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


مثال

در این مثال از .needs-validation استفاده می‌کنیم، که اثر اعتبارسنجی را بعد از اینکه فرم ثبت شد اضافه می‌کند (اگر چیزی کم باشد). دقت کنید که برای عملکرد صحیح باید کد jQuery را نیز اضافه کنید:

 1 <form action="/action_page.php" class="needs-validation" novalidate>
 2   <div class="form-group">
 3     <label for="uname">Username:</label>
 4     <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
 5     <div class="valid-feedback">Valid.</div>
 6     <div class="invalid-feedback">Please fill out this field.</div>
 7   </div>
 8   <div class="form-group">
 9     <label for="pwd">Password:</label>
10     <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
11     <div class="valid-feedback">Valid.</div>
12     <div class="invalid-feedback">Please fill out this field.</div>
13   </div>
14   <div class="form-group form-check">
15     <label class="form-check-label">
16       <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
17       <div class="valid-feedback">Valid.</div>
18       <div class="invalid-feedback">Check this checkbox to continue.</div>
19     </label>
20   </div>
21   <button type="submit" class="btn btn-primary">Submit</button>
22 </form>
23 
24 <script>
25 // Disable form submissions if there are invalid fields
26 (function() {
27   'use strict';
28   window.addEventListener('load', function() {
29     // Get the forms we want to add validation styles to
30     var forms = document.getElementsByClassName('needs-validation');
31     // Loop over them and prevent submission
32     var validation = Array.prototype.filter.call(forms, function(form) {
33       form.addEventListener('submit', function(event) {
34         if (form.checkValidity() === false) {
35           event.preventDefault();
36           event.stopPropagation();
37         }
38         form.classList.add('was-validated');
39       }, false);
40     });
41   }, false);
42 })();
43 </script>

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



منابع آموزشی