فرم در بوت‌استرپ
فرم در بوت‌استرپ | آموزش طراحی عناصر برای انواع فرم‌ها در Bootstrsp 4
فرم‌ها در بوت‌استرپ
تمام عناصر فرم در بوت‌استرپ استایل‌دهی شده هستند. این فرم‌ها به صورت گوناگون از پیش تعریف‌شده در بوت‌استرپ موجودند که به شکل زیر می‌باشند:
تنظیمات پیش‌فرض فرم
تنظیمات پیش‌فرض فرم به این صورت می‌باشد:
تمام <input>های متنی، <textarea> و عناصر <select> با کلاس form-control. دارای پهنای (عرض) 100% هستند.
آرایش فرم‌ها در بوت‌استرپ
فرم در بوت‌استرپ سه نوع آرایش دارد که به صورت زیر تعریف شده است :
- فرم‌های انباشته (تمام عرض)
- فرم‌های Inline ( درون‌خطی)
- فرم‌های افقی
قوانین استاندارد برای همه فرم‌ها به شکل زیر است :
- برچسب‌ها و همه‌ی کنترل‌های فرم را در <“div class=”form-group> قرار می‌گیرد.
- کلاس form-control. را به عناصر متنی از جمله <input> ،<textarea> و <select> اضافه کنید.
فرم‌های Stacked (تمام عرض)
در تصویر زیر یک فرم stacked را مشاهده می‌کنید.
برای ساخت یک فرم تمام عرض نیاز به input ،checkbox و دکمه submit دارید. هنگام طراحی این نوع فرم‌ها برای اینکه marginها در صفحه وب به‌هم نریزد، هر کدام از عناصر فرم را در یک عنصر نگهدارنده با کلاس form-group. قرار می‌دهیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form action="/action_page.php"> <div class="form-group"> <label for="email">آدرس ایمیل</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> </div> <div class="form-group"> <label for="pwd"> رمز عبور </label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> </div> <div class="form-group form-check"> </div> <button type="submit" class="btn btn-primary"> ارسال </button> </form> |
فرم‌های inline
در فرم‌های inline تمام برچسب‌ها زیر هم قرار نمی‌گیرند. بلکه همه عناصر حتی برچسب‌ها از سمت چپ به طور پیش‌فرض چیده می‌شوند. البته نکته‌ای که باید توجه داشته باشید، اینست که به‌خاطرواکنش گرایی بوت‌استرپ، این تنظیمات در صورتی انجام می‌گیرد که عرض صفحه از 576px کمتر نباشد. در صورتی‌که عرض نمایشگری کمتر از 576px شود، تمامی عناصر فرم مانند inputها در زیر هم قرار خواهند گرفت.
برای ساخت فرم inline باید کلاس form-inline. را به عنصر <form> اضافه کنید. برای مثال در کد زیر دو عدد input، یک checkbox و یک دکمه ی submit وجود دارد:
|
1 2 3 4 5 6 7 8 9 |
<form class="form-inline" action="/action_page.php"> <label for="email">آدرس ایمیل</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> <label for="pwd"> رمز عبور </label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> <div class="form-check"> </div> <button type="submit" class="btn btn-primary"> ارسال </button> </form> |
فرم‌های افقی
در یک فرم افقی در صفحه نمایشگرهای متوسط وبزرگ، هر برچسب در کنار یک عنصر Input به صورت افقی قرار می‌گیرد. اما در صفحه نمایش‌هایی با عرضی کوچک‌تر از 767 پیکسل، فرم‌های افقی به فرم‌های عمودی تبدیل می‌شوند. برای ایجاد فرم‌های افقی، کلاس form-horizontal. را به عنصر <form> و کلاس control-label. را به تمام عناصر <label> اضافه کنید.
اعتبارسنجی فرم‌ها
حتما شما هم هنگامی‌که در حال پر کردن فرمی در وب‌سایتی هستید، اعلانی مبنی بر اشتباه پر کردن آن دریافت کرده‌اید. شما برای اینکار می‌توانید از کلاس‌های اعتبارسنجی مختلفی در وب‌سایتتان استفاده کنید تا بتوانید اشتباهات کاربران را در هنگام پر کردن فرم‌ها به آن‌ها متذکر شوید.
فرم برای نمایش خطا یا موفق بودن دریافت اطلاعات از حاشیه‌های سبز یا قرمز استفاده می‌کند. همچنین کلاس‌های valid-feedback. و invalid-feedback. به کاربر دقیقا می‌گویند که کدام قسمت از فرمی که پر کرده‌اند، اشتباه بوده و نیاز به تصحیح دارد.
کلاس was-validated. را به عنصر <form> اضافه کنید. این کد، فرم را هنگام ورود داده‌ها اعتبارسنجی می‌کند. در این صورت قبل از ثبت فرم، اشتباهاتی که کاربر مرتکب شده‌است را می‌توان به او متذکر شد:
|
1 2 3 4 5 6 7 8 |
<form action="/action_page.php" class="was-validated"> <div class="form-group"> <label for="uname">نام کاربری</label> <input type="text" class="form-control" id="uname" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback"> لطفا این قسمت را پر کنید.</div> <button type="submit" class="btn btn-primary">ارسال</button> </form> |
زمانی‌که کلاس needs-validation را به عنصر <form> اضافه کنید، پس از ثبت داده‌ها آن را اعتبارسنجی خواهد کرد:
|
1 |
<form action="/action_page.php" class="needs-validation" novalidate> |
بیشتر بخوانیم:
مطالب زیر را حتما مطالعه کنید
آموزش انیمیشن‌سازی با CSS
نحوه اضافه کردن کد PHP در وردپرس
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
دیدگاهتان را بنویسید