آموزش طراحی سایت-آموزش کار با فرم در Bootstrap 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم

• کار با منو بار Navs در Bootstrap 4
• آموزش کار با لبه ها Tabs در Bootstrap 4
• آموزش کار با Pills در بوت استرپ 4
• آموزش کاربرد Dropdown با منوی pills
• آموزش کاربرد Dropdown با منوی Tabs

حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با فرم Form در Bootstrap 4

بوت استرپ 4، کلاس ها و امکانات ویژه ای برای کار با فرم ها (تگ <form>) فراهم کرده است.

کنترل های درون تگ Form در بوت استرپ 4، به صورت خودکار کلیه ی استایل عمومی را دریافت می کند. برای مثال کلیه کادرهای متن در فرم ها مثل تگ <input>، تگ <teatarea> و تگ <select> در صورت دریافت کلاس form control، عرضی برابر 100 درصد خواهند داشت.

بوت استرپ 4 دو نوع قالب یا layout در نمایش اجرای فرم به کار می برد :

1-حالت تمام عرض برای هر کنترل (stacked full width) : در این حالت، کنترل های فرم بر روی هم و با عرض 100 درصد صفحه یا عنصر دربرگیرنده، نمایش داده می شوند.

2- حالت درون خطی (inline form): در این حالت کنترل های فرم در کنار هم و در یک خط، حالت چپ چین نمایش داده می شوند.

آموزش حالت تمام عرض در فرم های بوت استرپ 4:

در کد مثال عملی زیر، یک فرم بوت استرپ با 2 کنترل ورودی کادر متن، یک دکمه checkbox و یک دکمه ارسال submit button ایجاد کرده ایم که در حالت تمام عرض (full width) نمایش داده می شوند.

برای اطمینان از نمایش درست کنترل ها و رعایت مارجین و Padding، هر کنترل را درون یک عنصر دربرگیرنده با کلاس form-group قرار دهید :

مثال 1

<div class=&quotform-group&quot>

  <label for=&quotemail&quot>Email address:</label>

  <input type=&quotemail&quot class=&quotform-control&quot id=&quotemail&quot>

</div>

<div class=&quotform-group&quot>

  <label for=&quotpwd&quot>Password:</label>

  <input type=&quotpassword&quot class=&quotform-control&quot id=&quotpwd&quot>

</div>

<div class=&quotform-group form-check&quot>

  <label class=&quotform-check-label&quot>

    <input class=&quotform-check-input&quot type=&quotcheckbox&quot> Remember me

  </label>

</div>

<button type=&quotsubmit&quot class=&quotbtn btn-primary&quot>Submit</button>

آموزش حالت درون خطی inline form در آموزش طراحی سایت :

در حالت نمایش درون خطی (inline form)، تمامی کنترل ها در یک خط و با حالت پیش فرض چپ چین نمایش داده می شوند.

نکته :

حالت inline فقط در صفحه نمایش های بزرگتر از عرض 576 پیکسل کار می کند. در صفحات موبایلی و کمتر از عرض 576 پیکسل، به صورت خودکار فرم ها به صورت تمام عرض و هر کنترل در یک خط نمایش داده می شود.

برای نمایش المنت های فرم به صورت درون خطی در Bootstrap 4، بایستی کلاس form-inline. را به تگ <form> اضافه نمایید.

مثال عملی : در کد مثال عملی زیر، دو کنترل کادر متن، یک chechbox و دکمه ارسال submit را در یک فرم به صورت خطی (inline) نمایش داده ایم :

مثال 2

<form class=&quotform-inline&quot action=&quot/action_page.php&quot>

  <label for=&quotemail&quot>Email address:</label>

  <input type=&quotemail&quot class=&quotform-control&quot id=&quotemail&quot>

  <label for=&quotpwd&quot>Password:</label>

  <input type=&quotpassword&quot class=&quotform-control&quot id=&quotpwd&quot>

  <div class=&quotform-check&quot>

    <label class=&quotform-check-label&quot>

      <input class=&quotform-check-input&quot type=&quotcheckbox&quot> Remember me

    </label>

  </div>

  <button type=&quotsubmit&quot class=&quotbtn btn-primary&quot>Submit</button>

</form>

آموزش چیدمان بهتر کنترل ها در حالت inline با استفاده از کلاس های کمکی utilities بوت استرپ 4:

کنترل های فرم در مثال آموزشی قبلی، بسیار به هم چسبیده و فشرده هستند. شما می توانید از کلاس های کمکی بوت استرپ (utility classes) برای چیدمان بهتر این کنترل ها در فرم استفاده کنید.

مثلا در کد مثال زیر، از کلاس کمکی mr-sm-2. استفاده کرده ایم که در تمامی دستگاه و اندازه های صفحه نمایش، یک مارجین راست 2 پیکسلی را به تمامی کنترل ها می دهد.

همچنین کلاس کمکی mb-2.، در صورتی که کنترل ها در حالت stacked و بر روی هم قرار بگیرند (به دلیل عرض کم جهت نمایش همه آن ها در یک خط)، یک مارجین زیر (bottom margin) به اندازه 2 پیکسل را به همه کنترل ها اضافه کردند. برای درک بهتر به خروجی و کد مثال دقت نمایید :

مثال 3

<form class=&quotform-inline&quot action=&quot/action_page.php&quot>

  <label for=&quotemail&quot class=&quotmr-sm-2&quot>Email address:</label>

  <input type=&quotemail&quot class=&quotform-control mb-2 mr-sm-2&quot id=&quotemail&quot>

  <label for=&quotpwd&quot class=&quotmr-sm-2&quot>Password:</label>

  <input type=&quotpassword&quot class=&quotform-control mb-2 mr-sm-2&quot id=&quotpwd&quot>

  <div class=&quotform-check mb-2 mr-sm-2&quot>

    <label class=&quotform-check-label&quot>

      <input class=&quotform-check-input&quot type=&quotcheckbox&quot> Remember me

    </label>

  </div>

  <button type=&quotsubmit&quot class=&quotbtn btn-primary mb-2&quot>Submit</button>

</form>

راهنمایی :

راهنمایی : به طور کامل در بخش آموزش کلاس های کمکی (Bootstrap 4 utilities classes) به آموزش استفاده از این کلاس ها خواهیم پرداخت.

آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap 4:

در بوت استرپ 4، می توانید از کلاس اعتبارسنجی (Validation Classes) برای ارسال فیدبک های چک کردن اطلاعات وارد شده در فرم، به کاربر، استفاده کنید.

می توانید کلاس های was-validated یا needs-validation را به المنت form اضافه کرده، بسته به این که بخواهید فرم را قبل یا بعد از زدن دکمه ارسال یا submit، چک کرده و پیام های اعتبارسنجی را به کاربر نشان دهید.

در صورت ورود اطلاعات درست در هر کادر متن یا input فرم، کنترل دارای خطوط حاشیه سبز (valid) و در صورت ورود اطلاعات اشتباه یا عدم ورود اطلاعات لازم، دارای خطوط حاشیه قرمز (invalid) خواهد بود.

همچنین می توانید از المنت هایی با کلاس valid-feedback یا invalid-feedback برای اعلام دقیق پیام خطا به کاربر و یا اعلام اینکه چه چیزی فراموش شده یا نادرست است، استفاده کنید.

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

مثال 4

<form action=&quot/action_page.php&quot class=&quotwas-validated&quot>

  <div class=&quotform-group&quot>

    <label for=&quotuname&quot>Username:</label>

    <input type=&quottext&quot class=&quotform-control&quot id=&quotuname&quot placeholder=&quotEnter username&quot name=&quotuname&quot required=&quot&quot>

    <div class=&quotvalid-feedback&quot>Valid.</div>

    <div class=&quotinvalid-feedback&quot>Please fill out this field.</div>

  </div>

  <div class=&quotform-group&quot>

    <label for=&quotpwd&quot>Password:</label>

    <input type=&quotpassword&quot class=&quotform-control&quot id=&quotpwd&quot placeholder=&quotEnter password&quot name=&quotpswd&quot required=&quot&quot>

    <div class=&quotvalid-feedback&quot>Valid.</div>

    <div class=&quotinvalid-feedback&quot>Please fill out this field.</div>

  </div>

  <div class=&quotform-group form-check&quot>

    <label class=&quotform-check-label&quot>

      <input class=&quotform-check-input&quot type=&quotcheckbox&quot name=&quotremember&quot required=&quot&quot> I agree on blabla.

      <div class=&quotvalid-feedback&quot>Valid.</div>

      <div class=&quotinvalid-feedback&quot>Check this checkbox to continue.</div>

    </label>

  </div>

  <button type=&quotsubmit&quot class=&quotbtn btn-primary&quot>Submit</button>

</form>

آموزش کار با کادرهای ورود اطلاعات فرم در Bootstrap 4

بوت استرپ 4 از کنترل های فرم و ورود اطلاعات زیر، پشتیبانی می کند :

• ورود متن input.
• ورود متن چند خطی textarea.
• کنترل انتخاب گزینه checkbox.
• کنترل های رادیویی radio.
• کنترل کادر کشویی select.

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

آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4:

بوت استرپ 4 از کلیه کنترل های ورود اطلاعات (input type) زبان HTML 5 پشتیبانی می کند، از جمله : کادر متن (text)، کادر رمز عبور (password)، کنترل زمان، تاریخ (datetime)، کنترل زمان محلی (datetime-local)، کنترل تاریخ (date)، کنترل ماه جاری (month)، کنترل هفته جاری (week)، کنترل ورود عدد (number)، کنترل ورود ایمیل (email)، کنترل آدرس اینترنتی (url)، کنترل جستجو (search)، کنترل شماره تلفن (tel) و کنترل انتخاب رنگ (color).

بوت استرپ 4، استایل و افکت های زیبایی را برای نمایش بهتر و ریسپانسیو به کنترل های اشاره شده می دهد.

نکته :

اگر نوع (type) را در تگ کنترل های input به درستی و کامل تعیین نکنید، بوت استرپ 4، قادر نخواهد بود استایل مناسب و صحیح را به آن ها بدهد. پس نوع را کامل رعایت نمایید!

مثال عملی : در کد مثال عملی زیر، دو کنترل ورود اطلاعات Input را در فرم قرار داده ایم. یکی کنترل ورود متن type=”text” و دیگری کنترل ورود رمز عبور type=”password”. همانطور که در بخش آموزش کار با فرم ها در بوت استرپ 4، اشاره کردیم، برای استایل دهی کامل Bootstrap 4 به هر کنترل (مثل تمام عرض شدن، استایل بهتر و رعایت padding و مارجین)، بایستی کلاس form-control را به هر تگ input بدهید :

مثال 1

<div class=&quotform-group&quot>

  <label for=&quotusr&quot>Name:</label>

  <input type=&quottext&quot class=&quotform-control&quot id=&quotusr&quot>

</div>

<div class=&quotform-group&quot>

  <label for=&quotpwd&quot>Password:</label>

  <input type=&quotpassword&quot class=&quotform-control&quot id=&quotpwd&quot>

</div>

آموزش کار با کنترل کادر متن textarea در Bootstrap 4:

کنترل کادر متن textarea، یک کنترل کادر متن بزرگ و چند خطی است که کاربر می توانید مطالب بیشتری را در آن وارد نمایید.

مثال: در کد مثال عملی زیر، یک کنترل textarea را ایجاد کرده ایم که 5 خطی است و به کمک یک تگ مرتبط label برایش عنوان هم تعیین نموده ایم :

مثال 2

<div class=&quotform-group&quot>

  <label for=&quotcomment&quot>Comment:</label>

  <textarea class=&quotform-control&quot rows=&quot5&quot id=&quotcomment&quot></textarea>

</div>

آموزش کار با کنترل انتخاب checkbox در آموزش طراحی سایت :

کنترل های انتخابی checkbox، برای اینکه یک لیست از گزینه ها به کاربر ارائه داده و وی بتواند یک یا چندین مورد آن ها را انتخاب کند، بسیار مناسب هستند.

مثال عملی : در کد مثال عملی زیر، 3 کنترل انتخابی checkbox را در یک فرم قرار داده ایم که کنترل سوم غیر فعال (disabled) است و کاربر نمی تواند آن را انتخاب کند :

مثال 3

<div class=&quotform-check&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot>Option 1

  </label>

</div>

<div class=&quotform-check&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot>Option 2

  </label>

</div>

<div class=&quotform-check&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot disabled 3

  </label>

</div>

توضیح مثال : از یک عنصر دربرگیرنده (wrapper) مثل یک تگ div با کلاس class=”form-check” استفاده کرده تا مطمئن شوید کپشن ها (labels) و کنترل های checkbox دارای مارجین و padding مناسب هستند.

سپس به هر آیتم لیبل (label) کلاس form-check-label و به هر کنترل انتخاب کلاس form-check-input داده تا استایل های جدید بوت استرپ 4 به آن ها، اعمال شوند.

آموزش قرار دادن checkbox ها در یک خط (inline):

اگر در عنصر دربرگیرنده فرم کنترل های انتخابی checkbox از کلاس form-check-inline استفاده نمایید، آن ها به جای قرار گرفتن بر روی هم، در یک خط به صورت inline نمایش داده می شوند، همانند عکس زیر:

مثال 4

<div class=&quotform-check-inline&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot>Option 1

  </label>

</div>

<div class=&quotform-check-inline&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot>Option 2

  </label>

</div>

<div class=&quotform-check-inline&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotcheckbox&quot class=&quotform-check-input&quot value=&quot&quot disabled 3

  </label>

</div>

آموزش کار با دکمه های رادیویی Radio Button در Bootstrap 4:

دکمه های رادیویی Radio Buttons در زمانی کاربرد دارند که می خواهید 2 یا چند گزینه را به کاربر ارائه کرده و وی بتواند فقط یکی از آیتم ها را انتخاب نماید، مثل دکمه های رادیویی قدیمی!

مثال عملی : در کد مثال عملی زیر، یک فرم با 3 دکمه رادیویی Radio Button ایجاد کرده ایم، که آیتم آخر آن غیر فعال یا disabled بوده و کاربر نمی تواند بر روی آن کلیک نماید :

مثال 5

<div class=&quotform-check&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot>Option 1

  </label>

</div>

<div class=&quotform-check&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot>Option 2

  </label>

</div>

<div class=&quotform-check disabled&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot disabled 3

  </label>

</div>

همچنین در صورتی که می خواهید دکمه های رادیویی مثال فوق، درون یک خط و به صورت inline نمایش داده شوند (نه بر روی هم)، کافی است کلاس تگ div اصلی فرم را به form-check-inline تغییر دهید :

مثال 6

<div class=&quotform-check-inline&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot>Option 1

  </label>

</div>

<div class=&quotform-check-inline&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot>Option 2

  </label>

</div>

<div class=&quotform-check-inline disabled&quot>

  <label class=&quotform-check-label&quot>

    <input type=&quotradio&quot class=&quotform-check-input&quot name=&quotoptradio&quot disabled 3

  </label>

</div>

آموزش لیست انتخابی کرکره ای Select List در Bootstrap 4:

کنترل کادر کشویی کرکره ای یا Select List در مواقعی کاربرد دارد که می خواهید کاربر از بین چندین گزینه، انتخاب نماید. این کنترل دو حالت دارد :

انتخاب یک گزینه از چند مورد یا انتخاب یک یا چندین گزینه از موارد که در مثال عملی نشان خواهیم داد.

مثال 1: در کد مثال زیر، یک کنترل کشویی ایجاد کرده ایم که کاربر فقط می تواند یکی از موارد موجود در لیست را انتخاب نماید :

مثال 7

<div class="form-group">Select list (select one): <select name="sellist1"><option>1</option><option>2</option><option>3</option><option>4</option> </select></div>

مثال 2: در مثال دوم، با اضافه کردن کلمه کلیدی multiple به کنترل Select، منو به صورت باز شده نمایش داده می شود و کاربر می تواند یک یا چنیدن آیتم را انتخاب کند :

مثال 8

<div class=&quotform-group&quot>

  <label for=&quotsel2&quot>Mutiple select list (hold shift to select more than one):</label>

  <select multiple=&quot&quot class=&quotform-control&quot id=&quotsel2&quot name=&quotsellist2&quot>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

  </select>

</div>

آموزش تعیین سایز کنترل های فرم در بوت استرپ 4:

بوت استرپ 4، در حالت پیش فرض کنترل های فرم را در اندازه معمول نشان می دهد اما می توانید با به کار بردن کلاس های form-control-rm، اندازه کنترل را کوچک کرده و با کاربرد کلاس form-control-lg، آن ها را در سایز بزرگ نمایش دهید :

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

مثال 9

<input type=&quottext&quot class=&quotform-control form-control-sm&quot>

<input type=&quottext&quot class=&quotform-control form-control&quot>

<input type=&quottext&quot class=&quotform-control form-control-lg&quot>

نمایش کنترل به صورت متن ساده در بوت استرپ 4:

می توانید با استفاده از کلاس form-control-plantext، کنترل مورد نظر را مثل یک فیلد متنی ساده نمایش دهید، همانند کد مثال عملی زیر :

مثال 10

<input type=&quottext&quot class=&quotform-control-plaintext&quot>

آموزش ساخت کنترل Range و آپلود فایل در بوت استرپ 4:

دو نوع کنترل دیگر در بوت استرپ 4 را می توانیم استایل دهی کنیم.

اولی کنترل Range است که معمولا برای انتخاب یک عدد در بازه تعیین شده (مثلا 0 تا 100) استفاده می شود. برای ساخت این کنترل بایستی کلاس form-control-range را به المنت input-type=”range” اضافه کنید.

کنترل دوم، کنترل آپلود فایل است که از آن برای ارسال فایل به سرور استفاده می شود. برای ساخت این کنترل نیز بایستی کلاس form-control-file را به المنت input type=”file” اضافه کنید.

بووت استرپ 4، این کنترل ها را در حالت تمام عرض (full width) نمایش می دهد، همانند کد مثال زیر :

مثال 11

<p>Bootstrap Example</p>

<div class=&quotcontainer&quot>

<h2>Form Control Range and File</h2>

<p>Add the .form-control-range class to input type&quotrange&quot or .form-control-file to input type&quotfile&quot to style a range control or a file field with full-width:</p>

<div class=&quotform-group&quot><input name=&quotrange&quot type=&quotrange&quot></div>

<div class=&quotform-group&quot><input name=&quotfile&quot type=&quotfile&quot></div>

Submit

</div>

آموزش طراحی سایت ادامه دارد