جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانفرم‌ در بوت‌استرپ

فرم‌ در بوت‌استرپ

21 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
365 بازدید
همیارمن

فرم‌ در بوت‌استرپ | آموزش طراحی عناصر برای انواع فرم‌ها در Bootstrsp 4

فهرست عناوین

  • فرم‌ در بوت‌استرپ | آموزش طراحی عناصر برای انواع فرم‌ها در Bootstrsp 4
    • فرم‌ها در بوت‌استرپ
      • تنظیمات پیش‌فرض فرم
      • آرایش فرم‌ها در بوت‌استرپ
    • فرم‌های Stacked (تمام عرض)
    • فرم‌های inline
    • فرم‌های افقی
    • اعتبارسنجی فرم‌ها

فرم‌ها در بوت‌استرپ

تمام عناصر فرم‌ در بوت‌استرپ استایل‌دهی شده هستند. این فرم‌ها به صورت گوناگون از پیش تعریف‌شده در بوت‌استرپ موجودند که به شکل زیر می‌باشند:

تنظیمات پیش‌فرض فرم

تنظیمات پیش‌فرض فرم به این صورت می‌باشد:

تمام <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
  • آموزش کار با عناصر Block و Inline در CSS
  • دانلود افزونه فرم ساز گرویتی فرمز نسخه 2.5.7.3 | Gravity Forms
اشتراک گذاری:
برچسب ها: Bootstrspآموزش وب سایتدوره رایگانطراحیفرم‌ در بوت‌استرپ
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت