کار با فرم‌های ورودی یا input groups در بوت‌استرپ ۴


نویسنده:
سه شنبه ۴ آذر ۱۳۹۹
input group در بوت استرپ

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *