قم ببناء الجيل التالي من نموذج الويب مع HTML5

بدأ HTML5 من قبل WhatWG (مجموعة عمل تكنولوجيا تطبيق النص التشعبي). كان الاسم الأولي هو تطبيق الويب 1.0. استوعب هذا المعيار معيار نماذج الويب 2.0 وتم تبنيه من قبل مؤسسات W3C للاندماج في الجيل التالي من معيار HTML5.

مقدمة

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

النماذج هي عناصر تحكم شائعة (مجموعات) في صفحات الويب. من تسجيل موقع الويب وتسجيل الدخول إلى أنظمة إدارة بيانات المؤسسة ، هناك نماذج في الأساس. السبب في أن النماذج مهمة للغاية هو أنها مسؤولة عن مهمة التحديث والتفاعل مع عدد كبير من المستخدمين وبيانات خلفية الويب. يمكن القول أن مطوري الويب يحبون وأشكال الويب الكراهية. إنهم يحبون وظيفتهم المريحة في جمع البيانات وتنظيمها ، وهم يكرهون وظائفهم إلى حد كبير. بعض الوظائف التي تبدو عادية على مستخدمي موقع الويب النهائي ، مثل فحص نوع الإدخال ، والتحقق من النماذج ، ومطالبات الخطأ ، وما إلى ذلك ، يحتاج جميع المطورين إلى إنفاق الكثير من الجهد لاستخدام برمجة JavaScript و DOM لتلبية هذه النقاط الوظيفية المطلوبة بشكل طبيعي. مع شعبية Ajax ، قدمت بعض مكتبات أدوات JavaScript مثل Dojo و Yui ، وما إلى ذلك عناصر واجهة مستخدم JavaScript مريحة أو واجهات برمجة التطبيقات للحد من العبء على المطورين.

ميزات جديدة من نموذج HTML5

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

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

     <نوع الإدخال = url> </input>
     <نوع الإدخال = البريد الإلكتروني> </input>

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

     <نوع الإدخال = التاريخ> </input>

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

     <حدد البيانات = http: // domain/getMyOptions> </select>

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

   <نوع الإدخال = النص المطلوب> </input>
   <نوع الإدخال = الرقم min = 10 max = 100> </pected>

• تقديم XML ، ما نستخدمه عادة هو أن تنسيق تشفير النموذج هو التطبيق/x-www-form-urlencoded. المطورين واضحون جدًا حول هذا التنسيق ، ويمكن إرسال البيانات إلى جانب الخادم لسهولة الوصول إليها. سيقدم HTML5 تنسيق بيانات جديد: تقديم XML ، وهو Application/X-WWW-Form+XML. لإعطاء مثال بسيط ، سيتلقى الخادم بيانات النماذج مباشرة في نموذج XML.

   <strishing>
   <اسم الحقل = الاسم الفهرس = 0> بيتر </field>
   <اسم الحقل = فهرس كلمة المرور = 0> كلمة المرور </field>
   </rection>

دراسة حالة

سأستخدم نظام النماذج الجديد لـ HTML5 لإنشاء واجهة تسجيل مستخدم بسيطة ، بما في ذلك اسم المستخدم ، كلمة المرور ، تاريخ الميلاد ، مشكلات السرية ، إلخ. الرمز كما يلي:

 <! doctype html> <html> <head> <style> p label {width: 180px ؛ تعويم: اليسار. محاذاة النص: صحيح ؛ Padding-Right: 10px} جدول {margin-left: 80px} Table td {border-bottom: 1px solid #cccccc} input.submit {margin-left: 80px} </style> </head> (يرجى استخدام البريد الإلكتروني للتسجيل) </label> <inputive name = 'name "type type =' email '> </input> </p> <p> <label for =' password '> password </babel بالنسبة إلى = "الجنس"> الجنسية </label> <حدد name = 'country' data = 'countre. سؤال </td> <td> الإجابة </td> <td> </td> </head> <tr id = QuestionId REPRECT = Template Repert-Start = 1 REPERT-MIN = 1 REFERT-MAX = 3> <TD> <TDY TYPE = TEXT = QUESSION [QuestionId]. اكتب = إزالة> حذف </button> </td> </tr> </table> <p> <input type = 'إرسال' value = 'send' class = 'submit'/> </p> </form> </body> </tml>

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

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

 <srecied xmlns = http: //www.w3

و enctype من النموذج هو التطبيق/x-www-form+xml ، أي تقديم html5 xml. لذلك بمجرد تمرير التحقق من النموذج ، سيتم إرسال محتوى النموذج في XML. ستجد أيضًا أنه إذا لم تكن هناك قيمة في مربع إدخال المعرف ، أو إذا تم إدخال سلسلة من نوع غير الأضعف ، بمجرد محاولة إرسال النموذج ، فستكون هناك رسالة خطأ ، وهي مدمجة في المتصفح.

خاتمة

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