نماذج HTML هي أداة قوية جدًا للتفاعل مع المستخدمين ، ولكن لأسباب فنية ليس من الواضح دائمًا كيفية استخدامها بكامل إمكاناتها. مجرد إرسال البيانات ليس كافيًا في هذه الحالة - تحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج سيتم إرسالها بالتنسيق الصحيح المطلوب حتى تتم معالجتها بنجاح وأن هذا لن يكسر التطبيقات الحالية. من المهم أيضًا مساعدة المستخدمين على ملء النماذج بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام التطبيقات.
يتم استخدام العلامة لإنشاء نموذج HTML. لا يُنشئ فعليًا هامشًا ، ولكنه يُستخدم كحاوية رئيسية لعناصر مثل. سواء كنت ترغب في عمل نموذج اشتراك بسيط بسداد ودفع منتظمين ، أو تطبيقات ويب تفاعلية ، فستحتاج إلى استخدام علامات عناصر HTML للعمل ، وأهمها.
كيف قياسينماذج HTML
تم اختراع نماذج HTML وتوحيدها إلى حد كبير قبل ظهور JavaScript غير المتزامن وتطبيقات الويب المعقدة. اليوم ، يتم استخدام مدخلات النموذج والأزرار وآليات التفاعل الأخرى ، ولكن في جوهر هذا هو نظام يعتمد على نموذج طلب واستجابة
عندما يقوم المستخدم بتحميل الصفحة ، يتم إرسال طلب http (عادة ما يسمى طلب GET). يتم إرسالها عن طريق متصفحك إلى الخادم ، وعادة ما يستجيب الخادم بصفحة الويب التي يبحث عنها المستخدم. هذا التفاعل هو أحد المفاهيم الأساسية للإنترنت. وهذا يشرح بالضبط كيفية عمل نماذج HTML.
عملية تبادل المعلومات مع الخادم
يقع كل منها ، الذي يتضمن عناصر مثل ، بداخله وله اسم سمة (اسم) ، بالإضافة إلى قيمته. يتم تحديد القيمة بطرق مختلفة. بالنسبة للنص ، ستكون هذه هي القيمة التي أدخلها مستخدم الموقع في الحقل. بالنسبة لزر الاختيار ، قيمة الخيار المحدد. يمكن للمستخدم تعيين القيمة ، ولكن في أغلب الأحيان لا يمكنه تعيين سمة الاسم. يؤدي هذا إلى إنشاء مجموعة من أزواج الاسم / القيمة حيث يتم تحديد القيم من خلال إدخال المستخدم.
الاختلاف الرئيسي بين النموذج ووثيقة HTML العادية هو أنه في معظم الحالات ، يتم إرسال البيانات التي تم جمعها بواسطة نموذج إلى خادم ويب. في هذه الحالة ، تحتاج إلى إعداد خادم ويب لتلقي البيانات ومعالجتها. سمة عمل العلامةيحدد الموقع (URL) حيث يجب إرسال البيانات المجمعة.
كيف تبدو استجابة الخادم
عند إرسال النموذج ، يتم تضمين أزواج الاسم والقيمة وجميع الحقول داخل العنصر في HTTP. يتم تقديم طلب إلى عنوان URL المحدد في شكل سمة الإجراء. سيكون نوع الطلب (GET أو POST) في سمة الأسلوب. هذا يعني أنه يتم إرسال جميع البيانات المقدمة من المستخدم إلى الخادم بمجرد إرسال النموذج ، ويمكن للخادم فعل ما يريد بهذه البيانات. عندما يتلقى الخادم إرسال نموذج ، فإنه يعامله مثل أي طلب HTTP آخر. يقوم الخادم بكل ما يلزم للقيام بالبيانات المضمنة ويصدر ردًا على المتصفح.
إذا كنت تتذكر أن تحميل الصفحة هو الجواب ، فستلاحظ أن نفس الشيء يحدث هنا. في نموذج نموذجي تم إنشاؤه باستخدام العلامة ، تكون الاستجابة عبارة عن صفحة جديدة يتم تحميلها بواسطة المتصفح. عادةً ما تحل الصفحة الجديدة محل المحتوى الحالي ، ولكن يمكن تجاوز ذلك بالسمة الهدف. تعمل الغالبية العظمى من النماذج عبر الإنترنت بهذه الطريقة ، وهذا هو سبب إرسال المستخدم إلى صفحة شكرًا لك عندما يملأ نموذج اشتراك بريد إلكتروني.
تطبيقات الويب والنماذج بدون علامة
تستخدم تطبيقات الويب التفاعلية الحديثة كود JavaScript لعمل طلبات http غير متزامنة. هذه مكالمات إلى الخادم لا تتسبب في إعادة تحميل الصفحة. لا يعتمدون على علامة - عنصر HTML مضمن في السلوك. إنهم لا يجمعون كل البيانات في كل واحد.المستخدم ولا ترسلهم على الفور. لهذا السبب ، لا يستخدم العديد من مصممي تخطيط HTML + JS في تطبيقات الويب العلامة في جميع النماذج. في كثير من الأحيان ، يستخدمونها ببساطة كنوع من الحاوية لأنواع مختلفة من حقول الإدخال والعناصر. في هذه الحالة ، لن تكون سمات الأسلوب والإجراء المستخدمة مرئية.
المزيد حول النماذج
نماذج HTML هي إحدى السمات البارزة لتفاعل المستخدم مع موقع الويب أو التطبيق. أنها تسمح للمستخدمين بإرسال البيانات إلى الموقع. في معظم الأحيان ، يتم إرسال البيانات إلى خادم الويب ، ولكن يمكن لصفحة الويب أيضًا اعتراضها لاستخدامها بمفردها. هناك العديد من العناصر المتعلقة بالنموذج - أنواع مختلفة من الأزرار ، ومحددات لأنواع مختلفة ، وآليات التغذية الراجعة. لذلك ، قد يكون من الصعب تحديد القيم المراد تعيينها لسمات العلامة. عندما يتعلق الأمر بإنشاء النماذج ، فأنت بحاجة إلى جعلها تعمل على أحجام شاشات مختلفة. من المهم جعلها في متناول الأشخاص ذوي الإعاقة. هذا هو السبب في أن النماذج وعلامات السمات ربما تكون أكثر جوانب HTML تعقيدًا.
ما يتكون الشكل
شكل HTML يتكون من عنصر واجهة مستخدم واحد أو أكثر. يمكن أن تكون حقول نصية أحادية السطر أو متعددة الأسطر ، أو مربعات اختيار ، أو أزرار ، أو أزرار اختيار. غالبًا ما ترتبط بسمة تصف الغرض منها - يمكن للتنفيذ الصحيح أن يوجه المستخدمين المبصرين والمكفوفين بوضوح حول كيفية الوصول إلى نموذج الإدخال. ينسبمرتبطة بشكل صحيح بسماتهم for و id ، على التوالي. تشير التسمية بعد ذلك إلى سمة المعرف الخاصة بالقطعة المقابلة ، وسيقوم قارئ الشاشة ، باستخدامها ، بقراءة ما هو مكتوب فيها.
إلى جانب الهياكل الخاصة بالعلامة ، من المهم أن تتذكر أن النماذج هي مجرد كود HTML. هذا يعني أنه يمكنك استخدام القوة الكاملة لـ HTML لهيكلة النماذج الخاصة بك. من الممارسات الشائعة استخدام العلامة لالتفاف العناصر الموسومة بعلامة
. تُستخدم قوائم HTML أيضًا على نطاق واسع ؛ تُستخدم مربعات اختيار متعددة أو أزرار اختيار للهيكل. بعد إنشاء حقول الإدخال ، يبقى إضافة زر باستخدام العلامة والتحقق من النتيجة. إن مرونة نماذج HTML تجعلها واحدة من أكثر الهياكل تعقيدًا في تنسيق HTML. ولكن مع الهيكل الصحيح عند إنشاء نموذج HTML ، يمكنك التأكد من أنه قابل للاستخدام ويمكن الوصول إليه.
