عند تصميم نماذج HTML، يلعب إدراج الأزرار المختلفة والحقول النصية دورًا هامًا في جمع البيانات وإرسالها إلى الخادم. في هذا المقال، سنتعرف على كيفية استخدام أنواع الأزرار المختلفة مثل submit وreset، بالإضافة إلى خصائص readonly وdisabled لتخصيص الحقول النصية. سيساعدك هذا المقال في تحسين تجربة المستخدم وجعل نماذجك أكثر فعالية.

ما هو نوع Submit في عناصر HTML داخل النماذج؟ نوع submit هو نوع مخصص في عناصر HTML داخل النماذج يسمح بإرسال البيانات التي تم إدخالها داخل النموذج إلى الخادم. يمكن استخدام هذا النوع مع عناصر مثل input وbutton لجعلها تعمل كزر إرسال.

كيفية إضافة زر لإرسال البيانات من صفحة ويب HTML؟ لإضافة زر إرسال البيانات، يمكنك استخدام كود HTML بسيط:

في هذا المثال، يتم استخدام زر الإرسال لإرسال البيانات التي تم إدخالها داخل النموذج إلى الخادم.

كيفية إضافة زر يعيد ضبط عناصر النموذج إلى القيم الافتراضية؟ يمكنك استخدام نوع reset مع عنصر input لإعادة ضبط جميع عناصر النموذج إلى القيم الافتراضية. إليك المثال:

يعمل زر إعادة الضبط على إعادة تعيين جميع الحقول داخل النموذج إلى حالتها الأصلية.

مراجعة لأنواع الأزرار في النماذج:

• submit: لإرسال البيانات إلى الخادم.


• reset: لإعادة ضبط القيم إلى الحالة الافتراضية.


• button: يمكن تخصيصه لأداء وظائف أخرى باستخدام JavaScript.

ما هي خاصية Readonly في عناصر HTML؟ خاصية readonly تجعل حقل الإدخال غير قابل للتعديل من قبل المستخدم. هذا يعني أن المستخدم لا يمكنه تغيير القيمة المدخلة في الحقل، ولكن سيتم إرسالها إلى الخادم عند تقديم النموذج.

كيفية إرسال قيمة افتراضية عبر النموذج؟ لإرسال قيمة افتراضية عبر النموذج، يمكنك استخدام خاصية value مع عنصر input دون استخدام readonly أو disabled. إليك المثال:

كيفية عرض معلومات افتراضية في حقل الإدخال دون إرسالها؟ لاستخدام الحقل لعرض معلومات دون إرسالها عند تقديم النموذج، يمكنك استخدام خاصية disabled مع عنصر input. إليك المثال:

كيفية عرض أو إضافة قيمة افتراضية لا يمكن تغييرها؟ لجعل قيمة الحقل الافتراضية غير قابلة للتعديل، استخدم خاصية readonly مع عنصر input. إليك المثال:

كلمة عن الدرس:

تعتبر إدارة عناصر النموذج في HTML جزءًا هامًا من تصميم تجربة مستخدم فعالة. من خلال فهم كيفية استخدام الأنواع المختلفة من الأزرار والحقول النصية، يمكنك تخصيص نماذجك لتلبية احتياجات المستخدمين بشكل أفضل وضمان جمع البيانات المطلوبة بدقة.