<input>

وسم حقل الإدخال <input>

وسم input أكثر وسوم النماذج تنوعًا — حقل واحد يتحول عبر type إلى نص وبريد وكلمة مرور ورقم وتاريخ وملف وأكثر.

وسم ذاتي الإغلاق تحدد type نوعه وسلوكه بالكامل: text وemail وpassword وnumber وdate وcheckbox وradio وfile وrange وغيرها. اختيار النوع الصحيح يمنحك مجانًا: لوحة المفاتيح الأنسب على الجوال (لوحة أرقام لـ number، @ ظاهرة لـ email)، وتحققًا مدمجًا، ومنتقيات جاهزة (تقويم لـ date).

مع كل input ضع label مرتبطًا — للوصولية ولتكبير منطقة الضغط.

الصياغة

<input type="text" name="username" placeholder="اسم المستخدم" required>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<label>الاسم: <input type="text" name="name" placeholder="أحمد"></label>
<br><br>
<label>العمر: <input type="number" name="age" min="10" max="99"></label>
<br><br>
<label><input type="checkbox" name="agree"> أوافق على الشروط</label>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
type	نوع الحقل: text, email, password, number, date, checkbox, radio, file…
name	اسم الحقل عند الإرسال — بدونه لا يُرسل
required	يمنع الإرسال والحقل فارغ
placeholder	نص تلميح يختفي عند الكتابة — ليس بديلًا عن label
min / max / minlength / maxlength	حدود القيمة أو طول النص — تحقق مدمج

💡 نصائح عملية

اختر type بدقة — يغيّر لوحة مفاتيح الجوال والتحقق المدمج مجانًا
أزرار radio تتشارك نفس name لتصبح مجموعة يُختار منها واحد
placeholder يختفي عند الكتابة — الاسم الدائم للحقل هو label

⚠️ أخطاء شائعة

الاعتماد على placeholder بدل label — يختفي أثناء الكتابة ويربك قارئات الشاشة
نسيان name فلا يصل الحقل إلى الخادم أصلًا
type="text" لكل شيء — تخسر لوحات المفاتيح الذكية والتحقق

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs