فرم ها در طراحی سایت کاربردهای بسیاری دارند ، ما میتوانیم از انواع فرمها به شیوه های مختلف استفاده کنیم اما در بوت استرپ فرم ها به چه صورت تعریف میشوند ؟
در ادامه ی این اموزش به این سوال پاسخ خواهیم داد پس همراه ما باشید.
پیشنهاد میشود اگر قسمت های پیشین دوره ی بوت استرپ 4 را ندیده اید حتما مطالعه فرمایید ، تا حدامکان در این اموزش به مباحث پیشین نیز اشاره خواهیم داشت.
تنظیمات پیش فرض فرم ها
کنترل های فرم به طور خودکار برخی از ظاهر طراحی شده جهانی را با Bootstrap دریافت می کنند:همه عناصر متنی <input> ، <textarea> و <select> با کلاس .form-control دارای 100٪ عرض هستند.
لایه های فرم ها
بوت استرپ ساختار دو نوع فرم را در اختیار شما قرار میدهد :
- فرم های تمام عرض
- فرم های درون خطی
راه اندازی فرم در بوت استرپ 4
فرم زیر تشکیل شده از دوکادر ، یک چک باکس و دکمه ی ارسال است.
برای اطمینان از حاشیه های مناسب ، یک عنصر بسته بندی را با کلاس .form-group ، در اطراف هر کنترل اشکال اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action="/action_page.php"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> |
فرم درون خطی
در یک فرم درون خطی ، همه عناصر بصورت درون خطی و چپ تر هستند.
به یاد داشته باشید که این فقط در مورد فرم های داخل نمایشی که حداقل 576 پیکسل عرض دارند ، صدق می کند. در صفحه نمایش های کوچکتر از 576px ، به صورت افقی پشته خواهد شد.
قانون اضافی برای فرم درون خطی:
- اضافه کردن کلاس .form-inline در استفاده از تگ <form>
مثال زیر یک فرم درون خطی با دو قسمت ورودی ، یک چک باکس و یک دکمه ارسال است:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form class="form-inline" action="/action_page.php"> <label for="email">Email address:</label> <input type="email" class="form-control" placeholder="Enter email" id="email"> <label for="pwd">Password:</label> <input type="password" class="form-control" placeholder="Enter password" id="pwd"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> |
فرم درون خطی با برنامه های کاربردی
فرم درون خطی فوق احساس “فشرده سازی” می کند ، و با خدمات فاصله بین بوت استرپ بسیار بهتر به نظر می رسد. مثال زیر یک حاشیه درست (.mr-sm-2) به هر ورودی در همه دستگاه ها (کوچک و بالاتر) اضافه می کند. و یک کلاس پایین حاشیه (.mb-2) برای سبک کردن قسمت ورودی هنگام شکستن (از حالت افقی به عمودی به دلیل عدم وجود فضای کافی / عرض) استفاده می شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form class="form-inline" action="/action_page.php"> <label for="email" class="mr-sm-2">Email address:</label> <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email"> <label for="pwd" class="mr-sm-2">Password:</label> <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd"> <div class="form-check mb-2 mr-sm-2"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form> |
ردیف یا شبکه فرم
همچنین می توانید از ستون ها (.col) برای کنترل عرض و تراز کردن ورودی های فرم بدون استفاده از ابزارهای فاصله استفاده کنید. فقط به یاد داشته باشید که آنها را درون یک ظرف .row قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 |
<form> <div class="row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form> |
اگر حاشیه های شبکه ای کمتری می خواهید (نادیده گرفتن ناودان ستون پیش فرض) ، از .from-row به جای .row استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="Enter password" name="pswd"> </div> </div> </form> |
اعتبار سنجی فرم ها
برای ارائه بازخورد ارزشمند برای کاربران می توانید از کلاسهای مختلف اعتبار سنجی استفاده کنید. بسته به اینکه آیا شما می خواهید بازخورد اعتبارسنجی را قبل یا بعد از ارسال فرم ارائه دهید ، به اعتبار <اعتبارسنجی] یا اعتبارسنجی لازم اضافه کنید. قسمتهای ورودی دارای حاشیه سبز (معتبر) یا قرمز (نامعتبر) هستند تا آنچه در فرم وجود دارد را نشان دهند. همچنین می توانید یک پیام بازخورد معتبر یا .invalid-feedback را اضافه کنید تا صریحاً به کاربر بگویید که چه چیزی از دست رفته است ، یا قبل از ارسال فرم باید انجام شود.
در این مثال ، ما از کلاس .was-validated استفاده می کنیم تا قبل از ارسال فرم آنچه را ناقص است را نشان دهیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form action="/action_page.php" class="was-validated"> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required=""> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required=""> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required=""> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> |
در این مثال ، ما از اعتبارسنجی .needs-validation استفاده می کنیم ، که اثر اعتبارسنجی را بعد از ارسال فرم دریافت می کند (اگر چیزی وجود ندارد). توجه داشته باشید که برای این کار نیز باید تعدادی کد جی کوئری برای این مثال اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<form action="/action_page.php" class="needs-validation" novalidate> <div class="form-group"> <label for="uname">Username:</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla. <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Check this checkbox to continue.</div> </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> < script > // Disable form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Get the forms we want to add validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> |
ویدیوی قسمت بیست و یکم
امیدوارم این اموزش براتون مفید و کاربردی واقع شده باشه.
در صورت نیاز برای مطالعه موراد بیشتر میتوانید به سایت getbootstrap مراجعه فرمایید.
پایدار باشید.
4 Comments
Join the discussion and tell us your opinion.
لطفا اموزش ها رو به صورت ویدئویی قرار بدید. ممنون
باعرض سلام ، متاسفانه برای ویدیوها مسئله ای به وجود و اومد و فایل صوت ویدیوها از بین رفتن مجدد باید ریکورد بشن و هرچه سریعتر اینکار رو انجام میدیم.
مگه شما php آموزش ندادید؟ پس چرا برای ولیدیشن اومدید جاوا اسکریپت استفاده کردید؟ این چیه اخه؟ مخاطب رو احمق فرض کردید؟؟؟؟؟ وقتی بلد نیستید چرا اصرا دارید آموزش اشتباه بدید. یه سرچ انگلیسی بکنی ولیدیشن با php رو یاد میگیری
سپاس از اینکه اینقدر صریح مطرح کردید ، مجموعه آموزش های PHP با مجموعه آموزش های بوت استرپ از هم متفاوت عمل می کنند ، اعتبار سنجی یا validation که در بوت استرپ به واسطه جاوا اسکریپت مطرح شد به دلیل تغییر رنگ هاست و فرم ها در سطح کلی به PHP نیاز دارند .
در این دوره صرفا بدون هیچ عقبه ای ، آموزش های بوت استرپ رو قرار دنبال کنیم ، آموزش های PHP می توانند نقش مکمل داشته باشند اما باید سطح کلی افراد در نظر گرفته شود.