📌 عنصر الإدخال <input>

🔹 ما هو <input>؟

• عنصر يستخدم لإدخال بيانات من المستخدم.

• من العناصر الفارغة (Empty) → مفيش وسم إغلاق.

• له خاصية أساسية اسمها type بتحدد نوع الإدخال.

✅ التركيب العام:

🔹 الأنواع الأساسية لـ <input>

1. type=”text”

• حقل نص عادي (إدخال جملة أو كلمة).

✅ مثال:

🔎 النتيجة: مربع نص تكتب فيه أي حاجة.

2. type=”email”

• حقل خاص بالبريد الإلكتروني.

• المتصفح يتحقق من أن الإدخال على شكل بريد صحيح (user@example.com).

✅ مثال:

🔎 النتيجة: إذا كتبت حاجة مش إيميل → المتصفح يظهر رسالة خطأ عند الإرسال.

3. type=”password”

• حقل إدخال كلمة مرور.

• يظهر النجوم (●●●) بدل النص.

✅ مثال:

🔎 النتيجة: النص مخفي عند الكتابة.

4. type=”number”

• حقل لإدخال أرقام فقط.

• يظهر أسهم ↑↓ لزيادة/إنقاص الرقم.

✅ مثال:

🔎 النتيجة: يقبل أرقام فقط بين 18 و 60.

5. type=”checkbox”

• مربع اختيار متعدد (On/Off).

• المستخدم يقدر يحدد أكتر من خيار.

✅ مثال:

🔎 النتيجة: مربعات اختيار تقدر تختار منها أكتر من واحدة.

6. type=”radio”

• زر اختيار واحد من مجموعة.

• لازم تشترك كل الأزرار في نفس name عشان يقدر يختار واحد بس.

✅ مثال:

🔎 النتيجة: أزرار اختيار، تقدر تختار واحد فقط.

🔹 خصائص عامة مهمة لـ <input>

• name → اسم الحقل (لازم علشان البيانات تتبعت للسيرفر).

• value → القيمة الافتراضية للحقل.

• placeholder → نص إرشادي داخل الحقل.

• required → يجعل الحقل إجباري.

• disabled → يعطل الحقل.

• readonly → يقرأ الحقل فقط بدون تعديل.

✅ مثال:

🔹 مثال عملي كامل

🔹 ملخص

• <input> = عنصر إدخال بيانات.

• type=”text” → نص عادي.

• type=”email” → بريد إلكتروني مع تحقق.

• type=”password” → كلمة مرور مخفية.

• type=”number” → أرقام فقط مع حدود.

• type=”checkbox” → اختيار متعدد.

• type=”radio” → اختيار واحد من مجموعة.

• خصائص مهمة: name, value, placeholder, required, disabled, readonly.