ساخت فرم چندمرحله‌ای با CSS — راهنمای کامل

فرم‌های چندمرحله‌ای (multi-step forms) تجربه کاربری بهتری در ثبت‌نام‌ها، سفارش‌ها و پرسشنامه‌ها ایجاد می‌کنند. در این مقاله به صورت جامع نشان می‌دهیم چگونه با CSS و حداقل HTML یک فرم چندمرحله‌ای بسازید، نکات دسترس‌پذیری، پاسخگویی و بهینه‌سازی را بررسی می‌کنیم و نمونه‌کدهای عملی ارائه می‌دهیم.

چرا فرم چندمرحله‌ای؟

فرم‌های طولانی کاربر را خسته می‌کنند. تقسیم فرم به مراحل کوچک، نرخ تکمیل را افزایش می‌دهد. همچنین می‌توانید اعتبارسنجی مرحله‌ای، نمایش پیشرفت و تعامل بصری ساده‌تری پیاده کنید.

مفاهیم پایه‌ای

• مرحله‌بندی منطقی: هر مرحله باید یک هدف کوچک داشته باشد (مثلاً اطلاعات تماس، آدرس، خلاصه).
• نمایش پیشرفت: کاربر بداند چند مرحله مانده است.
• دسترسی پذیری: فرم باید با صفحه‌خوان و کیبورد قابل استفاده باشد.
• فراگیری: امکان بازگشت به مراحل قبل و ویرایش اطلاعات.

روش‌های پیاده‌سازی

دو رویکرد معمول وجود دارد:

• CSS-only (بدون جاوااسکریپت): با استفاده از input[type=”radio”] یا :target و نمایش/پنهان‌سازی مراحل.
• CSS + JavaScript: کامل‌تر، کنترل بهتر، اعتبارسنجی مرحله‌ای و انیمیشن‌های دلخواه.

نمونه ساده HTML (ساختار فرم)

<form class="multi-step">
  <input type="radio" name="step" id="step1" checked>
  <input type="radio" name="step" id="step2">
  <input type="radio" name="step" id="step3">

  <div class="steps">
    <section class="step" id="s1">
      <h2>اطلاعات حساب</h2>
      <label>نام<input type="text" name="name"></label>
      <label>ایمیل<input type="email" name="email"></label>
      <label for="step2" class="next">بعدی</label>
    </section>

    <section class="step" id="s2">
      <h2>آدرس</h2>
      <label>شهر<input type="text" name="city"></label>
      <label>کد پستی<input type="text" name="zip"></label>
      <label for="step1" class="prev">قبلی</label>
      <label for="step3" class="next">بعدی</label>
    </section>

    <section class="step" id="s3">
      <h2>تأیید</h2>
      <p>خلاصه اطلاعات و دکمه ارسال</p>
      <button type="submit">ارسال</button>
    </section>
  </div>
</form>

توضیح: در این ساختار از input[type=”radio”] برای مدیریت حالت (کدام مرحله فعال است) استفاده شده و با labelهایی که به آی‌دی‌های رادیو اشاره دارند، به عنوان دکمه‌های «بعدی» و «قبلی» عمل می‌کنیم. این روش بدون جاوااسکریپت کار می‌کند و ساده است.

نمونه CSS برای نمایش مرحله‌ای و پیشرفت

.multi-step { max-width: 600px; margin: 0 auto; font-family: sans-serif; }
.steps { position: relative; overflow: hidden; }
.step { display: none; padding: 20px; box-sizing: border-box; }
input[name="step"] { display: none; }

/* نمایش مرحله‌ها طبق رادیو */#step1:checked ~ .steps #s1,
#step2:checked ~ .steps #s2,
#step3:checked ~ .steps #s3 { display: block; }

/* استایل دکمه‌ها */label.next, label.prev, button { cursor: pointer; display: inline-block; padding: 8px 14px; margin: 10px 5px; background: #1976d2; color: #fff; border-radius: 4px; text-decoration: none; }

/* نمونه بار پیشرفت */.progress { height: 6px; background: #eee; border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg,#1976d2,#4fc3f7); transition: width 0.3s ease; }
#step1:checked ~ .progress .progress-bar { width: 33%; }
#step2:checked ~ .progress .progress-bar { width: 66%; }
#step3:checked ~ .progress .progress-bar { width: 100%; }

/* ریسپانسیو */@media (max-width: 480px) {
  .step { padding: 14px; }
  label.next, label.prev { padding: 10px 12px; }
}

توضیح: این CSS مرحله‌ها را مخفی می‌کند و تنها مرحلهٔ مربوط به رادیوی تیک‌خورده را نشان می‌دهد. بار پیشرفت نیز با قوانین CSS براساس رادیوی فعال تغییر عرض می‌دهد. این رویکرد ساده و قابل‌فهم است.

بهبودها و نکات حرفه‌ای

• اعتبارسنجی مرحله‌ای: برای اعتبار ورودی‌ها بهتر است از JavaScript برای جلوگیری از رفتن به مرحله بعد استفاده کنید. در حالت CSS-only این کنترل محدود است.
• دسترسی‌پذیری: برای کاربران صفحه‌خوان، از aria-hidden، aria-current یا aria-live برای اطلاع‌رسانی تغییر مرحله استفاده کنید. همچنین از عناصر button به جای label برای تعامل بهتر با کیبورد استفاده کنید اگر از JS بهره می‌برید.
• انیمیشن‌ها: به جای display:none از transform و opacity با position:absolute استفاده کنید تا انیمیشن نرم‌تری داشته باشید.

نمونه بهینه‌شده (انیمیشن با opacity و transform)

.steps { position: relative; min-height: 200px; }
.step { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(20px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
#step1:checked ~ .steps #s1,
#step2:checked ~ .steps #s2,
#step3:checked ~ .steps #s3 {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}

توضیح: به جای display، از opacity و transform استفاده شده تا امکان انتقال نرم بین مرحله‌ها وجود داشته باشد. pointer-events برای جلوگیری از تعامل با عناصر پنهان است.

جدول مقایسه: CSS-only vs CSS+JS

نکات UX و سئوی داخلی

• هر مرحله عنوان مشخصی داشته باشد (برای SEO و دسترسی).
• از فیلدهای مناسب نوعی (email, tel, number) استفاده کنید تا مرورگر کمک کند.
• فرم را برای بارگذاری آهسته به چند بخش تقسیم نکنید؛ بهتر است همه فیلدها در یک صفحه باشند اما با نمایش مرحله‌ای نشان دهید.

ملاحظات نهایی و توصیه‌های کارشناسی

برای فرم‌های تجاری پیچیده، ترکیب CSS برای رابط کاربری و JavaScript برای منطق و اعتبارسنجی بهترین نتیجه را می‌دهد. از progressive enhancement استفاده کنید: نسخهٔ پایه (CSS-only) کار کند و جاوااسکریپت به تجربه امکانات اضافی بیفزاید.

اگر نیاز به نمونهٔ کامل‌تر (با اعتبارسنجی مرحله‌ای و ARIA) دارید، می‌توانم کد آمادهٔ ترکیبی CSS+JS برای پروژهٔ شما بسازم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال