انتقل إلى محتوى الدرس

HTML form inputs الحقول داخل عنصر form في لغة HTML

سوف تتعلم في هذا الدرس جميع أنواع inputs الحقول داخل عنصر HTML form، ووظيفة كل input، بالإضافة إلى الحقول الأكثر استخدامًا.

1 صفوف تعليمية
لغة HTML
12,774 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

حقول النماذج في HTML هي عناصر إدخال يستخدمها المستخدم لملء البيانات ليتم إرسالها إلى الخادم [server] لمعالجتها أو حفظها.

تتنوع هذه الحقول في أنواعها، حيث إن هناك حقول نصية، وحقول للاختيار، وحقول للملفات، وحقول لاختيار الألوان، وكل نوع يقبل نوعًا محددًا من البيانات.

أنواع إدخالات النماذج في HTML:

  • text: يُستخدم لإدخال نصوص، مثل: اسم المستخدم، الاسم.

  • password: لإدخال كلمات المرور مع إخفاء محارفها بصريًا عادةً؛ الإخفاء ليس تشفيرًا للقيمة.

  • email: لإدخال عنوان بريد إلكتروني.

  • radio: لاختيار خيار واحد من مجموعة خيارات متعددة، مثل: النوع، ذكر أو أنثى.

  • checkbox: لاختيار مجموعة خيارات، مثل: مجموعة دورات.

  • submit: يُنشئ زرًا لإرسال البيانات إلى الخادم بعد إكمال الإدخال.

  • reset: يُنشئ زرًا لإعادة الحقول إلى قيمها الافتراضية، وليس بالضرورة جعلها فارغة.

  • button: يُستخدم لتنفيذ أوامر JavaScript عند الضغط عليه.

  • image: يُستخدم هذا النوع لعرض صورة تقوم بإرسال البيانات عند النقر عليها، بدلاً من استخدام زر تقليدي.

  • color: لاختيار لون باستخدام أداة انتقاء اللون.



  • range: لإنشاء مؤشر للتحريك بين قيمتين محددتين مسبقًا.

  • date: لإدخال تاريخ.

  • datetime-local: لإدخال تاريخ ووقت محلي.

  • month: للتحكم في إدخال الشهر والسنة.

  • week: لإدخال التاريخ مع الأسبوع والسنة.

  • number: لإدخال قيمة رقمية.

  • url: لإدخال رابط صفحة ويب.

  • search: لإدخال نص بحث.

  • tel: لإدخال رقم هاتف.

  • file: لاختيار ملف من الجهاز؛ لا يرفعه الاختيار وحده إلى الخادم.

  • hidden: لحقل إدخال مخفي.

HTML form input

يظهر حقل الإدخال في HTML بهذا الشكل في المتصفح عندما يكون نوعه نصيًا [text].