فرم ورود و ثبت‌نام مدرن با HTML و CSS | افکت Floating Label

یک رابط کاربری مدرن و مینیمال برای فرم‌های ورود و ثبت‌نام که با HTML و CSS خالص ساخته شده و هیچ وابستگی به کتابخانه‌ها یا فریم‌ورک‌های جاوااسکریپتی ندارد. این سورس شامل یک کارت شیشه‌ای (Glassmorphism) با پس‌زمینه‌ی گرادیانی آبی-بنفش و فیلدهای ورودی با افکت Floating Label است که هنگام فوکوس، لیبل به بالای فیلد منتقل می‌شود و یک هاله‌ی نوری زیر input ظاهر می‌شود.

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

ویژگی‌های ظاهری و طراحی

طراحی این رابط کاربری روی سه اصل استوار است: سادگی، خوانایی و ظاهر مدرن. به جای استفاده از عناصر تزئینی اضافی، تمرکز روی فرم اصلی و تجربه‌ی کاربر در وارد کردن اطلاعات گذاشته شده است.

پس‌زمینه‌ی گرادیانی

پس‌زمینه‌ی صفحه از یک linear-gradient با ترکیب رنگ‌های آبی و بنفش ساخته شده که به صفحه عمق و حس مدرن می‌دهد. این انتخاب به جای رنگ ساده، باعث می‌شود صفحه بدون نیاز به تصاویر سنگین، جذاب به نظر برسد و سرعت بارگذاری آن حفظ شود.

کارت شیشه‌ای (Glassmorphism)

فرم اصلی داخل یک کارت با افکت شیشه‌ای قرار گرفته که از ترکیب backdrop-filter: blur() و یک پس‌زمینه‌ی نیمه‌شفاف ساخته شده است. این سبک که در طراحی‌های مدرن سال‌های اخیر رایج شده، حس عمق و لایه‌بندی را به رابط کاربری اضافه می‌کند و در عین حال خوانایی محتوا را حفظ می‌کند.

افکت شناور لیبل (Floating Label)

یکی از ویژگی‌های اصلی این فرم، افکت Floating Label است. لیبل هر فیلد در حالت عادی وسط فیلد قرار دارد، اما به محض اینکه کاربر روی آن کلیک کند یا متنی وارد کند، لیبل با یک انیمیشن نرم به بالای فیلد منتقل می‌شود و در همان‌جا باقی می‌ماند. این تکنیک باعث می‌شود همیشه مشخص باشد هر فیلد برای چه چیزی است، بدون اینکه فضای اضافی اشغال شود.

هاله‌ی نوری هنگام فوکوس

هنگام فوکوس روی هر فیلد، یک هاله‌ی نوری (Glow) با گرادیان دایره‌ای در پشت آن ظاهر می‌شود. این افکت بصری به کاربر بازخورد فوری می‌دهد و به او می‌فهماند که کدام فیلد فعال است.

فونت وزیرمتن

فونت استفاده‌شده در این پروژه وزیرمتن (Vazirmatn) است که یکی از بهترین فونت‌های رایگان برای زبان فارسی محسوب می‌شود. این فونت خوانایی بالایی در اندازه‌های مختلف دارد و برای رابط‌های کاربری فارسی بهینه شده است.

ریسپانسیو و پشتیبانی از RTL

این سورس برای زبان فارسی و چیدمان راست‌به‌چپ (RTL) بهینه شده است. صفت dir="rtl" روی تگ html تنظیم شده و موقعیت لیبل‌ها، padding فیلدها و جهت انیمیشن‌ها همه بر اساس RTL تنظیم شده‌اند.

در بخش ریسپانسیو، از یک media query برای نمایشگرهای زیر ۴۸۰ پیکسل استفاده شده است. در این حالت:

• اندازه‌ی فونت‌ها کوچک‌تر می‌شود
• padding فیلدها کاهش می‌یابد
• border-radius کمی کمتر می‌شود تا با صفحه‌های کوچک هماهنگ باشد
• فاصله‌ی بین فیلدها متناسب با فضای موجود تنظیم می‌شود

این تنظیمات باعث می‌شود فرم روی موبایل، تبلت و دسکتاپ ظاهر یکپارچه و مرتبی داشته باشد.

دسترس‌پذیری (Accessibility)

در طراحی این سورس، اصول پایه‌ی دسترس‌پذیری رعایت شده است:

• هر input دارای id یکتا و label مرتبط با for است
• ویژگی aria-required="true" برای فیلدهای الزامی تنظیم شده
• ویژگی autocomplete برای هر فیلد مناسب (username, email, current-password) تعریف شده
• حالت :focus-visible برای کاربرانی که با کیبورد ناوبری می‌کنند
• احترام به تنظیم prefers-reduced-motion برای کاربرانی که انیمیشن را غیرفعال کرده‌اند

نکته مهم: وابستگی به اینترنت برای فونت

در نسخه‌ی فعلی این سورس، فونت وزیرمتن از طریق سرویس Google Fonts بارگذاری می‌شود. این یعنی:

• مرورگر کاربر برای نمایش فونت، نیاز به دسترسی به اینترنت دارد
• اگر گوگل فونتز در دسترس نباشد (فیلتر، اختلال شبکه، اینترانت داخلی)، فونت پیش‌فرض سیستم نمایش داده می‌شود
• در هر بار بارگذاری صفحه، یک درخواست به سرورهای گوگل ارسال می‌شود که ممکن است سرعت بارگذاری را کمی کاهش دهد
• آدرس IP کاربر به سرورهای گوگل ارسال می‌شود که از نظر حریم خصوصی قابل توجه است

ساختار فایل‌ها و نحوه استفاده

این پروژه از دو فایل اصلی تشکیل شده است:

• index.html — ساختار HTML فرم
• style.css — استایل‌های CSS

برای استفاده از این سورس، کافی است فایل style.css را در پروژه‌ی خود کپی کنید و ساختار زیر را در HTML قرار دهید:

<div class="input-container">
    <input type="text" id="username" placeholder=" " required>
    <label for="username">نام کاربری</label>
    <div class="focus-bg"></div>
</div>

نکته‌ی مهم درباره‌ی این ساختار: وجود placeholder=" " (یک فاصله) ضروری است، چون CSS از سلکتور :placeholder-shown برای تشخیص پر بودن فیلد استفاده می‌کند. همچنین ترتیب قرارگیری input، label و focus-bg باید حفظ شود چون از سلکتورهای + و ~ در CSS استفاده شده است.

شخصی‌سازی رنگ‌ها و ظاهر

یکی از مزایای این سورس، قابلیت شخصی‌سازی سریع آن است. برای تغییر رنگ‌ها نیازی به بازنویسی کامل CSS نیست و می‌توان با تغییر چند مقدار، ظاهر کلی را دگرگون کرد:

برای مثال، اگر پروژه‌ی شما از رنگ سبز استفاده می‌کند، کافی است مقدار linear-gradient در body را از #667eea → #764ba2 به ترکیب سبز تغییر دهید و بقیه‌ی رنگ‌ها را بر همان اساس تنظیم کنید.

پشتیبانی از مرورگرها

این سورس با مرورگرهای مدرن سازگار است. ویژگی backdrop-filter که برای افکت شیشه‌ای استفاده شده، از نسخه‌های زیر پشتیبانی می‌شود:

• Chrome 76+ (با پیشوند -webkit- تا نسخه‌ی ۸۸)
• Firefox 103+
• Safari 9+ (با پیشوند -webkit-)
• Edge 79+

در مرورگرهایی که از backdrop-filter پشتیبانی نمی‌کنند، افکت شیشه‌ای نمایش داده نمی‌شود اما بقیه‌ی استایل‌ها به درستی کار می‌کنند و فرم قابل استفاده است.

محدودیت‌ها و نکات مهم

برای استفاده‌ی درست و واقع‌بینانه از این سورس، باید چند نکته را در نظر بگیرید:

• این سورس فقط بخش ظاهری (Frontend) است. هیچ منطق اعتبارسنجی، ارسال به سرور یا مدیریت حساب کاربری در آن پیاده‌سازی نشده است.
• بدون JavaScript است. افکت‌های موجود همگی با CSS پیاده‌سازی شده‌اند و هیچ کد JS در آن وجود ندارد.
• اتصال به بک‌اند (مانند Django، Flask، Node.js یا PHP) باید به‌صورت جداگانه انجام شود.
• برای استفاده‌ی واقعی، امنیت باید در سمت سرور پیاده‌سازی شود. اطلاعات حساس مثل رمز عبور نباید بدون ارتباط امن (HTTPS) ارسال شوند و ذخیره‌سازی آن‌ها باید با هش مناسب انجام شود.
• اعتبارسنجی سمت کلاینت (بررسی خالی نبودن فیلد، فرمت ایمیل و...) نیاز به JavaScript دارد و در این سورس وجود ندارد.

ایده‌هایی برای توسعه‌ی این سورس

این پروژه به عنوان یک پایه‌ی ظاهری طراحی شده و می‌توان آن را در جهت‌های مختلفی توسعه داد. برخی از مسیرهای پیشنهادی:

1. افزودن فیلد رمز عبور با قابلیت نمایش/مخفی کردن
2. افزودن چک‌باکس «مرا به خاطر بسپار»
3. افزودن لینک بازیابی رمز عبور
4. افزودن اعتبارسنجی سمت کلاینت با JavaScript
5. نمایش پیام‌های خطا زیر هر فیلد
6. افزودن حالت لودینگ روی دکمه‌ی ارسال
7. اتصال فرم به API یا بک‌اند
8. افزودن حالت تاریک و روشن (Dark/Light Mode)
9. افزودن ورود با کد یک‌بار مصرف (OTP)
10. افزودن احراز هویت دومرحله‌ای

مناسب برای چه پروژه‌هایی؟

این سورس به دلیل ساختار ساده و قابل شخصی‌سازی، در پروژه‌های متنوعی قابل استفاده است:

• صفحات ورود و ثبت‌نام سایت‌های شخصی
• پنل‌های کاربری پروژه‌های متوسط
• سامانه‌های آموزشی و مدیریت محتوا
• فرم‌های عضویت در خبرنامه یا انجمن
• پروژه‌های دانشجویی و آموزشی برای تمرین HTML و CSS

در همه‌ی این موارد، سورس به عنوان پایه‌ی ظاهری عمل می‌کند و منطق برنامه باید بر اساس نیاز پروژه به آن اضافه شود.

مناسب برای یادگیری

این پروژه به دلیل سادگی ساختار، برای افرادی که در حال یادگیری HTML و CSS هستند نیز مفید است. با بررسی این سورس می‌توان با مفاهیم زیر آشنا شد:

• ساختار فرم‌ها و ارتباط label با input
• استفاده از سلکتورهای پیشرفته‌ی CSS مانند :focus و :placeholder-shown
• ساخت گرادیان با linear-gradient و radial-gradient
• افکت شیشه‌ای با backdrop-filter
• انیمیشن‌های CSS با transition و transform
• طراحی ریسپانسیو با media query
• اصول RTL در طراحی فرم‌ها

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

سوالات متداول

آیا این سورس قابل استفاده در پروژه‌های واقعی است؟

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

آیا به JavaScript نیاز دارد؟

خیر، افکت‌های موجود همگی با CSS پیاده‌سازی شده‌اند. اما برای افزودن اعتبارسنجی یا ارسال فرم بدون رفرش، به JavaScript نیاز خواهید داشت.

آیا با فریم‌ورک‌های فرانت‌اند مانند React یا Vue سازگار است؟

بله، ساختار HTML و CSS قابل تبدیل به کامپوننت است. می‌توان همین ظاهر را در قالب یک کامپوننت React، Vue یا Svelte پیاده‌سازی کرد.

چگونه رنگ‌ها را متناسب با برند پروژه تغییر دهم؟

مقادیر linear-gradient در body و رنگ‌های .focus-bg و .form-wrapper را تغییر دهید. جزئیات بیشتر در بخش «شخصی‌سازی رنگ‌ها» آمده است.

آیا از RTL پشتیبانی می‌کند؟

بله، به طور کامل برای RTL بهینه شده است و لیبل‌ها، padding و جهت انیمیشن‌ها بر اساس راست‌به‌چپ تنظیم شده‌اند.

سخن پایانی

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

ساختار ساده و قابل شخصی‌سازی این پروژه، آن را به گزینه‌ای مناسب برای توسعه‌ی بیشتر، یادگیری HTML و CSS و استفاده به عنوان پایه‌ی ظاهری در پروژه‌های واقعی تبدیل می‌کند. با کمی تغییر در رنگ‌ها و اضافه کردن قابلیت‌های مورد نیاز، می‌توان از همین ساختار برای اهداف متنوعی استفاده کرد.