فرم ورود ساده با اعتبارسنجی جاوااسکریپت | HTML, CSS, JS

معرفی سورس

یک فرم ورود (Login Form) ساده، تمیز و آماده استفاده که با HTML، CSS و JavaScript خالص پیاده‌سازی شده است. این پروژه شامل فیلدهای نام کاربری و رمز عبور، دکمه ورود و نمایش پیام موفقیت یا خطا بر اساس اعتبارسنجی در سمت کاربر (Frontend) می‌باشد. برای یادگیری نحوه کار با فرم‌ها، مدیریت رویداد submit و دستکاری DOM بسیار مناسب است.

🎯 ویژگی‌ها

• ✅ فرم ورود کامل با طراحی مینیمال و کاربرپسند
• ✅ اعتبارسنجی ساده با JavaScript (بررسی نام کاربری و رمز عبور)
• ✅ نمایش پیام رنگی "ورود موفق" (سبز) یا "اطلاعات اشتباه است" (قرمز)
• ✅ جلوگیری از ارسال واقعی فرم با preventDefault()
• ✅ طراحی واکنش‌گرا و تمیز
• ✅ کدنویسی خوانا و دارای کامنت
• ✅ بدون نیاز به هیچ کتابخانه خارجی

🎨 طراحی ظاهری

کارت سفید با سایه ملایم در مرکز صفحه قرار دارد. فیلدهای ورودی دارای حاشیه‌های نازک و دکمه ورود به رنگ آبی (#0066ff) طراحی شده است. پیام‌های بازخورد (موفقیت یا خطا) در پایین فرم و با رنگ‌های سبز و قرمز نمایش داده می‌شوند.

📦 محتویات سورس

• index.html – ساختار فرم ورود
• style.css – استایل‌دهی کامل فرم، دکمه و پیام‌ها
• script.js – مدیریت رویداد submit و اعتبارسنجی

🚀 نحوه استفاده

1. سه فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. نام کاربری admin و رمز عبور 1234 را وارد کنید تا پیام موفقیت را ببینید.
4. برای ادغام در پروژه خود، کدهای HTML، CSS و JS را به صفحات خود اضافه کنید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3, JavaScript (Vanilla)
• اعتبارسنجی: Frontend (سمت کاربر) – صرفاً جنبه آموزشی دارد
• طراحی: واکنش‌گرا (Responsive)
• وابستگی: صفر
• تعداد فایل: ۳
• حجم کلی: کمتر از 4 کیلوبایت

🎁 این سورس برای چه کسانی مناسب است؟

• افراد مبتدی که می‌خواهند کار با فرم‌ها و رویدادها در JavaScript را یاد بگیرند
• دانشجویان برای پروژه‌های آموزشی و تمرینی
• توسعه‌دهندگانی که یک قالب آماده برای فرم ورود نیاز دارند

💡 چرا این سورس؟

• 🔹 کد بسیار ساده، تمیز و قابل فهم
• 🔹 یادگیری عملی مفاهیم مهم (DOM، رویدادها، اعتبارسنجی)
• 🔹 طراحی مینیمال و قابل شخصی‌سازی
• 🔹 اجرای فوری و بدون پیش‌نیاز
• 🔹 نقطه شروع عالی برای ساخت فرم‌های پیچیده‌تر