فرم ها (forms) در بوت استرپ

با سلام خدمت کاربران عزیز وب سایت پرنیان طرح

در این بخش به آموزش فرم ها در بوت استرپ خواهیم پرداخت و مثال های متنوعی از کلاس های فرم را برایتان توضیح خواهیم داد.

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

کنترل های فرم به طور خودکار برخی از ظاهر طراحی شده ی جهانی را با بوت استرپ دریافت میکنند:

تمام عناصر متنی <input> , <text area> و <select> با کلاس font-control عرض ۱۰۰٪ دارند.

طرح بندی بوت استرپ ۴:

بوت استرپ دو نوع طرح بندی فرم را ارائه میدهد:

۰ فرم های با عرض تمام صفحه

۰ فرم های درون خطی

فرم های با عرض تمام صفحه (Stacked Forms) :

مثال زیر یک فرم عریض با دو قسمت ورودی ، یک جعبه چک باکس و یک دکمه ارسال ایجاد میکند.

برای اطمینان از حاشیه های مناسب یک عنصر بسته بندی را با form-group. در اطراف هر فرم کنترل اضافه کنید.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”email” class=”form-control” id=”email” placeholder=”Enter email” name=”email”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” placeholder=”Enter password” name=”pswd”>
</div>
<div class=”form-group form-check”>
<label class=”form-check-label”>
<input class=”form-check-input” type=”checkbox” name=”remember”> Remember me
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر زیر خروجی کدهای مثال بالا است:

فرم های درون خطی (inline Forms) :

در یک فرم درون خطی تمام عناصر در یک خط قرار میگیرند و از سمت چپ قرار میگیرند.

نکته :

این فقط در مورد فرم های داخلی نمایشی که حداقل ۵۷۶p عرض دارند ، صدق میکند.

در صفحه نمایش های کوچکتر از ۵۷۶p به صورت افقی ردیف خواهند شد.

مثال زیر یک فرم درون خطی با دو قسمت ورودی یک جعبه چک باکس و یک دکمه ارسال را ایجاد میکند.

مثال:

[php]

<form class=”form-inline” action=”/action_page.php”>
<label for=”email”>Email:</label>
<input type=”email” class=”form-control” id=”email” placeholder=”Enter email” name=”email”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” placeholder=”Enter password” name=”pswd”>
<div class=”form-check”>
<label class=”form-check-label”>
<input class=”form-check-input” type=”checkbox” name=”remember”> Remember me
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر فرم درون خطی:

فرم های درون خطی با ویژگی هایش :

فرم هایی که ویژگی را بالا میبرند ، به طوری که فشرده سازی میکنند و با استفاده از خدمات فاصله بین بوت استرپ بسیار بهتر به نظر میرسد.

مثال زیر یک حاشیه ی مناسب به هر ورودی در همه ی المان ها اضافه میکند.

مثال:

[php]

<form class=”form-inline” action=”/action_page.php”>
<label for=”email2″ class=”mb-2 mr-sm-2″>Email:</label>
<input type=”text” class=”form-control mb-2 mr-sm-2″ id=”email2″ placeholder=”Enter email” name=”email”>
<label for=”pwd2″ class=”mb-2 mr-sm-2″>Password:</label>
<input type=”text” class=”form-control mb-2 mr-sm-2″ id=”pwd2″ placeholder=”Enter password” name=”pswd”>
<div class=”form-check mb-2 mr-sm-2″>
<label class=”form-check-label”>
<input type=”checkbox” class=”form-check-input” name=”remember”> Remember me
</label>
</div>
<button type=”submit” class=”btn btn-primary mb-2″>Submit</button>
</form>

[/php]

در تصویر زیر این ویژگی فرم درون خطی را مشاهده کنید:

اعتبارسنجی فرم (Form Validation) :

جهت ارائه بازخورد ارزشمند برای کاربران میتوانید از کلاس های مختلف اعتبار سنجی استفاده کنید.

هر یک از کلاس های was-validated. یا needs-validation. را بسته به اینکه آیا شما میخواهید بازخورد اعتبارسنجی را قبل یا بعد از ارسال فرم ارائه دهید به عنصر فرم خود اضافه نمایید.

قسمت های ورودی دارای حاشیه ی سبز (معتبر) یا قرمز (نا معتبر) هستند تا آنچه در فرم وجود دارد را نشان دهند.

همچنین میتوانید پیغام بازخورد معتبر یا بازخورد نامعتبر را اضافه کنید تا صریحا به کاربر بگوید که چه چیزی از دست رفته است یا قبل از ارسال فرم باید انجام شود.

برای توضیح بیشتر این مثال را ببینید:

[php]

<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>

[/php]

تصویر مثال بالا: