عنصر <input> في HTML يُستخدم لتجميع بيانات المستخدم في النماذج <form> . يمكن أن يكون لهذا العنصر أنواع متعددة، وكل نوع يُستخدم لجمع نوع معين من البيانات. إليك شرحًا لأنواع المدخلات المتاحة:
.jpeg)
| النوع | الفائدة والاستخدام | مثال |
|---|---|---|
text | يستخدم لإدخال النصوص العامة. | <input type="text" name="username"> |
password | يستخدم لإدخال كلمات المرور. يخفي النص المدخل. | <input type="password" name="password"> |
email | يستخدم لإدخال عناوين البريد الإلكتروني. يتأكد من أن النص المدخل يحتوي على صيغة بريد إلكتروني صحيحة. | <input type="email" name="email"> |
number | يستخدم لإدخال الأرقام فقط. يمكن تعيين نطاقات القيم المسموح بها. | <input type="number" name="quantity" min="1" max="10"> |
tel | يستخدم لإدخال أرقام الهاتف. لا يتحقق من صحة الرقم المدخل. | <input type="tel" name="phone"> |
url | يستخدم لإدخال عناوين المواقع (URLs). يتأكد من أن النص المدخل يحتوي على صيغة URL صحيحة. | <input type="url" name="website"> |
date | يستخدم لإدخال التواريخ. | <input type="date" name="birthday"> |
time | يستخدم لإدخال الوقت. | <input type="time" name="appointment"> |
datetime-local | يستخدم لإدخال التواريخ والأوقات المحلية. | <input type="datetime-local" name="meeting"> |
month | يستخدم لإدخال الشهر والسنة. | <input type="month" name="start"> |
week | يستخدم لإدخال الأسبوع والسنة. | <input type="week" name="week"> |
color | يستخدم لاختيار الألوان. | <input type="color" name="favcolor"> |
file | يستخدم لاختيار الملفات لتحميلها. | <input type="file" name="resume"> |
checkbox | يستخدم لإنشاء مربع اختيار يمكن تحديده أو إلغاء تحديده. | <input type="checkbox" name="subscribe" value="newsletter"> |
radio | يستخدم لإنشاء أزرار اختيار دائرية، يمكن اختيار واحدة فقط منها في نفس المجموعة. | <input type="radio" name="gender" value="male"> Male<br><input type="radio" name="gender" value="female"> Female |
range | يستخدم لإنشاء شريط تمرير لاختيار القيم في نطاق معين. | <input type="range" name="volume" min="0" max="100"> |
submit | يستخدم لإنشاء زر إرسال النموذج. | <input type="submit" value="Submit"> |
reset | يستخدم لإنشاء زر لإعادة تعيين جميع القيم في النموذج إلى قيمها الافتراضية. | <input type="reset" value="Reset"> |
button | يستخدم لإنشاء زر عام يمكن برمجته لتنفيذ إجراءات معينة باستخدام JavaScript. | <input type="button" value="Click me" onclick="alert('Button clicked!')"> |
hidden | يستخدم لإدخال بيانات مخفية لا تظهر للمستخدم. | <input type="hidden" name="userid" value="12345"> |
image | يستخدم لإنشاء زر إرسال يظهر كصورة. | <input type="image" src="submit.png" alt="Submit"> |
هذا الجدول يغطي أنواع المدخلات المختلفة في HTML مع شرح لكل نوع وأمثلة على كيفية استخدامها. إذا كان لديك أي استفسارات أخرى أو تحتاج إلى مزيد من التفاصيل، فلا تتردد في طرحها!