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

ورود و ثبت نام

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

بلاگ

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

آموزش فرم‌های ورودی در بوت‌استرپ ۴

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

در یک عنصر فرم می‌توان از تعدادی زیادی کلاس‌های مختلف استفاده کرد. فرم‌های ورودی مختلفی در بوت‌استرپ وجود دارد. این فرم‌ها برای گرفتن اطلاعات ورودی مانند نام کاربری، رمز، ایمیل و … به کار می‌روند. در این قسمت از آموزش رایگان با تعدادی از گروه‌های ورودی در فرم یا input groups در بوت‌استرپ آشنا خواهید شد.

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

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

فرم‌های ورودی در bootstrap

فهرست عناوین

  • فرم‌های ورودی در bootstrap
  • استفاده از Checkbox در فرم‌های بوت‌استرپ
  • Radio Button به‌عنوان متن کمکی در بوت‌استرپ
  • نوشتن label برای input group

کلاس input-group درواقع کلاسی است که با استفاده از چندین کلاس ورودی با افزودن یک نماد، متن یا یک دکمه به عنوان “متن راهنما” به کاربر کمک می‌کند تا فرم را به‌راحتی تکمیل کند. این فرم‌ها متنی یا آیکونی خواهند بود.

input groups در بوت‌استرپ

برای افزودن “متن راهنما” به فرم‌های وب‌سایتتان از کلاس .input-group-prepend برای اضافه کردن متن راهنما در مقابل ورودی و کلاس .input-group-append برای اضافه کردن متن راهنما به پشت ورودی استفاده می‌شود. برای درک بیشتر به کد زیر مراجعه کنید:

1
2
3
4
5
6
7
8
9
10
<h3>گروه های ورودی</h3>
<form>
  <div class="input-group">
   <div class="input-group-prepend">
     <span class="input-group-text">@</span>
   </div>
   <input type="text" class="form-control" placeholder="نام کاربری" id="usr" name="username">
  </div>
  <button type="submit" class="btn btn-primary">ارسال</button>
</form>

 

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

در کلاس‌های input groups در بوت‌استرپ عناصری وجود دارند که می‌توانید از آن‌ها برای فرم‌ها استفاده کنید. شما می‌توانید در فرم‌های مربوط به وب‌سایتتان از گزینه‌هایی به عنوان پیشنهاد به کاربر بهره ببرید. بدین صورت‌که به جای استفاده از متن و کادر خالی، از radio button و Checkbox نیز استفاده کنید. به مثال زیر توجه کنید:

input groups در بوت‌استرپ

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <h3>فرم ورودی با کادرهای انتخاب و دکم های رادیویی</h3>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox">
        </div>
      </div>
      <input type="text" class="form-control" placeholder="متن">
    </div>
  </form>
</div>

 

زمانی استفاده از یک چک‌باکس مفید خواهد بود که بخواهید، به کاربر تعدای انتخاب از لیست پیشنهادی ارائه دهید. اگر می‌خواهید عناصر Checkbox در یک خط نمایش داده شوند، می‌توانید از کلاس checkbox-inline. برای آن استفاده نمایید.

Radio Button به‌عنوان متن کمکی در بوت‌استرپ

دکمه‌های رادیویی یا Radio Button هنگامی استفاده می‌شوند که بخواهید کاربر را محدود به انتخاب یک گزینه کنید.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
<h3>دکمه های رادیویی در فرم های ورودی</h3>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="radio">
        </div>
      </div>
      <input type="text" class="form-control" placeholder="متن موردنظر">
    </div>
  </form>
</div>

 

نوشتن label برای input group

در صورتی که می‌خواهید در فرم‌های وب‌سایت خود از برچسب‌ یا label استفاده کنید، باید آن را خارج از گروه ورودی (input group) قرار دهید. همچنین توجه داشته باشید که مقدار ویژگی آن باید با شناسه ورودی مطابقت داشته باشد. در این صورت زمانی‌که روی label کلیک کنید، input فعال می‌شود:

input groups در بوت‌استرپ

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <h2>برچسب ها در فرم های ورودی</h2>
  <form>
    <label for="demo">ایمیل خود را در این قسمت وارد کنید</label>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="ایمیل" id="demo" name="ایمیل">
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </form>
</div>

بیشتر بخوانیم:

  • آموزش کار با فایل Media Object در بوت‌استرپ 4
  • نحوه کار با فرم ها در CSS
  • ساخت اسلایدر در بوت‌استرپ ۴
  • UMT چیست؟ راهنمای کامل برای استفاده از UTM
اشتراک گذاری:
برچسب ها: Bootstrspinput groupsآموزشآموزش Bootstrspآموزش بوت‌استرپآموزش رایگان بوت‌استرپآموزش وب سایتبوتاسترپدوره Bootstrspدوره رایگاندوره رایگان بوت‌استرپکار با فرم‌های ورودی یا input groups در بوت‌استرپ ۴
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

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

آموزش انیمیشن‌سازی با 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 آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

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

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