درس چهارم: فرمهای مدرن و هوشمند
درس چهارم: فرمهای مدرن و هوشمند
در این درس یاد میگیرید چگونه ورودیهایی طراحی کنید که کاربران از پر کردن آنها لذت ببرند؛ از فیلد نام و ایمیل گرفته تا دکمههای انتخاب و منوهای کشویی.
۱. فیلدهای متنی: کلاس form-control
در HTML معمولی، ورودیها ظاهر بسیار ساده و گاهی زشتی دارند. در بوتاسترپ، تمام جادو با کلاس .form-control اتفاق میافتد. این کلاس باعث میشود ورودی شما تمام عرض را بگیرد، حاشیههای گرد پیدا کند و هنگام کلیک، یک هاله آبی زیبا دور آن ایجاد شود.
اجزای یک فیلد استاندارد:
- Label: برای برچسب بالای فیلد از کلاس
.form-labelاستفاده میکنیم. - Input: فیلد اصلی که کلاس
.form-controlمیگیرد. - Help Text: توضیحات کوچکی که زیر فیلد میآید و کلاس
.form-textمیگیرد.
مثال کد یک فیلد ایمیل:
<label class=“form-label”>آدرس ایمیل</label>
<input type=“email” class=“form-control” placeholder=“name@example.com”>
<div class=“form-text”>ما ایمیل شما را با کسی به اشتراک نمیگذاریم.</div>
</div>
۲. منوهای کشویی و چکباکسها
برای انتخابهای چندگانه یا تکگزینهای، بوتاسترپ کلاسهای اختصاصی دارد که در موبایل بسیار راحتتر لمس میشوند.
الف) منوی کشویی (Select):
به جای کلاس control، اینجا از .form-select استفاده میکنیم تا فلش کناری آن استایل مدرنی بگیرد.
ب) چکباکس و رادیو (Check & Radio):
اینجا ساختار کمی متفاوت است. ما از یک ظرف با کلاس .form-check استفاده میکنیم تا تیک و متن در یک ردیف قرار بگیرند.
.form-switch را به ظرف اصلی اضافه کنید.۳. گروهبندی پیشرفته (Input Groups)
گاهی نیاز است در کنار فیلد ورودی، یک آیکون، متن ثابت یا دکمه قرار بگیرد. مثلاً برای فیلد قیمت که واحد “تومان” همیشه در کنار آن است.
کلاس مورد استفاده: .input-group
⚠️ اشتباهات خطرناک در طراحی فرم:
- عدم استفاده از Label: حتی اگر ظاهر سایتتان مینیمال است، هرگز برچسب فیلد را حذف نکنید؛ این کار برای دسترسیپذیری (معلولین) و سئو فاجعه است.
- فیلدهای خیلی طولانی: در دسکتاپ، اجازه ندهید یک فیلد نام ساده کل ۱۲ ستون را بگیرد. از گرید (درس ۱) استفاده کنید و فیلدها را در
col-md-6قرار دهید. - فراموش کردن نوع Input: برای ایمیل حتما از
type="email"و برای رمز عبور ازtype="password"استفاده کنید تا کیبورد موبایل به درستی نمایش داده شود.
🔬 کارگاه عملی درس چهارم: طراحی فرم تماس با ما
با ترکیب تمام آموختهها، یک فرم تماس حرفهای بسازید که شامل موارد زیر باشد:
- یک Row داشته باشید که در دسکتاپ دو ستون باشد (نام و ایمیل در کنار هم).
- یک فیلد متنی بزرگ (Textarea) برای “متن پیام” زیر آنها قرار بگیرد (تمام عرض).
- یک Switch برای “اشتراک در خبرنامه” اضافه کنید.
- یک دکمه Success بزرگ در انتهای فرم بگذارید.
input از تگ textarea با همان کلاس form-control استفاده کنید.پایان درس چهارم
حالا شما میتوانید دادههای کاربران را جمعآوری کنید. در درس پنجم به سراغ یکی از جذابترین بخشهای بوتاسترپ یعنی **اجزای متحرک و شناور (Modals & Tooltips)** خواهیم رفت.