التصميم التفاعلي

كيفية ترويض النماذج في تصميم المواقع

تعتبر النماذج في الغالب أحد عناصر HTML الأكثر إيلاما للبرنامج. لكن شكل التصميم والتطوير قد تقدم بسرعة فائقة ؛ انها ليست صعبة كما كانت في السابق.

ومع ذلك ، في حين حققت الصناعة تقدما هائلا ، لا تزال بعض العقبات قائمة. في النهاية ، تكون نماذج الترويض ممكنة ؛ انها فقط تأخذ بعض العمل.

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

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

كسر الضوابط

لنبدأ بتقسيمهم إلى مجموعتين ، لأن بعض عناصر التحكم في النموذج لم تكن مشكلة كبيرة في العمل.

ضوابط ودية

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

مع تقدم الزوايا المستديرة CSS3 ، الظلال المسقطة والتدرجات ، العديد من الأنماط الأكثر شيوعًا أصبحت الآن أكثر سهولة. ليس لديك ما تخشاه مع هذه الضوابط.

ضوابط مزعجة

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

تتضمن عناصر التحكم بالنموذج المزعجة:

  • اختر متعددة ،
  • اختر القائمة المنسدلة
  • خانات،
  • أزرار الراديو،
  • تحميل الملف.

الأدوات الحديثة للنماذج

كما ذكرنا ، يتوفر عدد من الأدوات المدهشة لمساعدتك على توجيه عناصر التحكم في الشكل.

إضفاء الطابع الرسمي هو سلاحك السري للحصول على عناصر التحكم الأساسية وأساليب التصرف باستمرار عبر المتصفحات. وأنماطها الافتراضية نظيفة وجميلة. تعمل هذه المكتبة الرائعة أيضًا بشكل رائع مع مجموعة كبيرة من مكتبات JavaScript ، مثل مسج ، دوجو و موتولز .

استبدال التحكم في النموذج

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

أحد الأمثلة الرائعة على ذلك زى موحد ، مكون إضافي jQuery لإنشاء أشكال البقعة. يأتي في ثلاثة مواضيع مختلفة. وإذا كنت تريد إنشاء مظهر مخصص ، فما عليك سوى استخدام الخدمة مولد CSS لتسهيل المكونات بسهولة.

آخر المكونات في مسج Niceforms . على الرغم من أنه لا يحتوي على وظيفة سهلة لإعادة ارتداء الزي الرسمي ، إلا أنه يقدم أسلوبًا أساسيًا يمكن أن يلائم احتياجاتك تمامًا.

وأخيرًا ، هناك ملحق jQuery التجاري Wijmo . الوحدة التي نهتم بها هنا هي شكل الديكور ، والتي هي في الواقع مجانية الاستخدام. يتعامل مع عدد قليل من الضوابط الأكثر إشكالية: مربعات الاختيار وأزرار الراديو والمنسدلة. كونها جزءًا من مكتبة تجارية أكبر ، فإن هذه الأداة تجلب بعض الفوائد ، وأهمها قوية كابل بيانات ودفعت الدعم . أخيرا ، أنا أحب الطريقة التي يعالج بها السلخ ؛ يستخدم jQuery UI ThemeRoller ، مما يجعل العمل السهل من التصاميم المخصصة.

ضوابط نموذج مخترع

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

المتزلجون

هناك شيء واحد مفقود في HTML القياسي (ولكنه جزء من HTML5) وهو عنصر تحكم أساسي في شريط التمرير. هناك العديد من الإجابات على هذا ، بما في ذلك واحد من Wijmo والتي تقوم على jQuery UI slider .

أوبلوأدرس

على الرغم من إمكانية استخدام عنصر التحكم في إدخال الملفات لتمكين المستخدمين من تحديد ملف للتحميل ، فقد تحتاج إلى شيء أكثر إثارةً ، خاصة إذا كانت عمليات تحميل الملفات مهمة لموقعك على الويب. واحد من أفضل الحلول هو Uploadify . يسمح للمستخدمين بتحديد ملفات متعددة ولعرض التقدم. لأنه يأتي مع مجموعة متنوعة من خيارات التخطيط والوظائف.

مربعات الاختيار على غرار المتزلج وأزرار الراديو

أحد عناصر واجهة المستخدم الشائعة (بفضل الـ iPhone) هو مفتاح التشغيل / الإيقاف الذي ينزلق من جانب إلى آخر. مع هذا البرنامج المساعد jQuery في متناول يدي ، يمكنك تحويل خانة اختيار أو زر اختيار في واحد. سواء كنت تستدعي هذا التحكم في النموذج أو أداة استبدال النموذج ، فهي طريقة رائعة لتمكين المستخدمين من تشغيل الخيارات وإيقافها.

أزرار إبداعية

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

نماذج HTML5

جلبت HTML5 الكثير من الاحتمالات المثيرة لأشكال الويب. على الرغم من أنه خارج نطاق هذه المقالة ، إلا أنه لا يزال مناسبًا. في ما يلي بعض الموارد الأساسية لمساعدتك في الحفر:

في الختام ، تشكل الضوابط الشكلية واحدة من أهم العقبات في تطوير موقع الويب الأساسي.

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

سهولة الاستخدام تصميم الويب إستمارات أشكال أتش تي أم أل كيفية تصميم النماذج أشكال مسج