الغرض من ميزة HTML5 الجديدة هو تحسين دعم التضمين ، مثل الفيديو والصوت ، وتزويد المطورين والمستخدمين النهائيين ببرمجة بسيطة وتجربة مستخدم أفضل. الآن ينتظر عالم الإنترنت ، ويمكن للمتصفح دعم الإصدار الجديد من HTML5 عند تحديثه. تم دعم HTML5 من قبل العديد من المتصفحات ، مثل Safari ، Chrome ، Firefox ، Opera ، IE9. إنه متوافق مع الوراء ، ولكن لا يمكن أن تكون متصفحات اليوم متوافقة تمامًا مع HTML5.
يعد ترقية موقع ويب إلى HTML5 أمرًا سهلاً للغاية لأنه متوافق مع HTML4. تحتاج فقط إلى تعديل doctype الخاص بك. يساعد هذا التحديث الجديد في جعل الأمور بسيطة ، بحيث يمكنك الآن تحديث جميع مواقع الويب الخاصة بك ولن تتعطل لأن جميع علامات HTML4 لا تزال مدعومة بنسبة 100 ٪ في HTML5.
تحدد نماذج HTML5 أكثر من عشرة أنواع وميزات إدخال جديدة ، وتتيح هذه العناصر الجديدة للمبرمجين بالبرمجة بسهولة أكبر. دعنا نتحدث عن هذه الميزات الجديدة أدناه.
1. صندوق الإدخال النائب
في HTML4 ، يستخدم المطورون JavaScript و jQuery كأصحاب نائب مربع الإدخال ، بينما في HTML5 ، يمكن للمطورين عرض حامل نائب بسهولة. ما هي العناوين النائبة؟ العنصر النائب هو النص المطري الذي يظهر في مربع الإدخال. عند النقر فوق حقل الإدخال ، سوف يختفي تلقائيًا. يمكنك مطالبة نموذج النص الذي يجب على المستخدم إدخاله في مربع النص. بدلاً من ذلك ، يوجد مربع إدخال بريد إلكتروني حيث يمكنك تعيين العناصر النائبة [email protected] وسيختفي عند النقر فوقها.
أي FF Safari Chrome Opera iPhone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. أحداث التركيز التلقائي
HTML5 فقط قم بتحميل صفحة ويب ، وستنقل صفحة الويب تلقائيًا التركيز إلى مربع إدخال معين ، تمامًا مثل JavaScript. ما هو الفرق؟ نظرًا لأنها مجرد علامة HTML الآن ، يمكن للمستخدمين تعطيل هذه الخاصية بسهولة في متصفحهم. لا تدعم جميع المتصفحات التركيز التلقائي ، لكن المتصفحات لا تتجاهل هذه الخاصية ببساطة. إذا كنت تريد أن تعمل جميع المتصفحات ، فما عليك سوى إضافة خصائص تركيز HTML5 الجديدة ، ثم تحقق مما إذا كان المتصفح يدعم التركيز التلقائي. إذا استطعت ذلك ، فلن تضطر إلى استخدام برنامج نصي للضبط التلقائي. إذا لم يكن لديك واحد ، فأنت بحاجة إلى إضافة برنامج نصي لضبط تلقائي للصورة.
FF IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML نوع الإدخال المحدد حديثًا
1. البريد الإلكتروني
مربع الإدخال الأول الذي سأقوله هو عنوان البريد الإلكتروني. المتصفحات القديمة التي لا تدعم أنواعًا جديدة تعاملها أيضًا ببساطة كمربع نص ، ولن يلاحظ 99 ٪ من المستخدمين هذا التغيير حتى يقدموا النموذج (سيكون هناك التحقق من صحة النموذج في هذا الوقت).
2. موقع الويب
دعنا نتحدث عن مربع إدخال عنوان URL. إذا كنت بحاجة إلى إدخال عنوان URL ، تتوقع إدخاله مثل http://www.vevb.com. الآن في مربع إدخال نوع عنوان URL ، ستظهر لوحة مفاتيح افتراضية متغيرة كما في iPhone. يمكن للمستخدمين بسهولة إدخال Slashes و .com. وبالمثل ، فإن المستخدمين غير مدركين لها قبل تقديم النموذج.
3. الأرقام
للحصول على أرقام مطابقة في HTML4 ، يجب عليك استخدام نصوص jQuery للمساعدة في التحقق. يضيف HTML5 أنواعًا رقمية. بعض الخصائص الإضافية (اختياري): دقيقة: تحدد الحد الأدنى لرقم الإدخال الذي يمكن قبوله بواسطة مربع الإدخال. ماكس: هو الحد الأقصى للرقم المسموح به للدخول. الخطوة: الفاصل القانوني لمجال إدخال السمة ، الافتراضي هو 1.
كما هو موضح في الشكل أعلاه ، لا يُسمح إلا بالأرقام (في معظم الحالات ، لن يتم ملاحظة ذلك حتى تتم مطالب الخطأ عند التقديم) ، فقط 0 ، 2 ، 4 قانوني (6 غير قانونية لأن الخطوة 10 ، والقانونية هي 0 ، 10 ، 20 ...).
4. شريط التمرير الرقمي
يتيح لك HTML5 استخدام نوع جديد يسمى النطاق ، ويصبح مربع الإدخال شريطًا منزلقًا. يمكن أن يستخدم نموذج موقع الويب الخاص بك شريط التمرير. علامة السمة الخاصة بها هي نفس نوع الرقم ، ما عليك سوى تغيير نوع الإعداد = "الرقم" إلى type = 'range'.
5. التقويم
أفضل الإضافات الجديدة حتى الآن ، وأنواع ذرة التاريخ المسماة Date و DateTime (هناك أنواع أخرى من التاريخ/الوقت الإضافي مثل الوقت والأسبوع والشهر والتقويم المحلي). العديد من أطر عمل JavaScript مثل JQuery UI و Yiu لديها بالفعل هذه الضوابط ، ولكن إضافة محدد التقويم أمر مزعج للغاية. يحدد HTML5 محددًا جديدًا للتاريخ المحلي لا يتعين عليه تضمين استخدام البرامج النصية على الصفحة. اعتبارًا من الآن ، هي الأوبرا هي الوحيدة التي تدعم هذه الميزة بالكامل ، وبالنسبة للمتصفحات الأخرى ، يمكنك القيام برناري بديل في حالة عدم دعم المتصفح. ومع ذلك ، في النهاية ، سيتم تحديث جميع المتصفحات.
6. البحث
HTML5 يضيف نوع مربع إدخال البحث. هذا لا شيء ، لكنه تغيير جيد لبعض المستخدمين. يمكنه ببساطة دائرة حول حواف مربع الإدخال تلقائيًا ، وعندما تبدأ في الكتابة ، سيكون هناك X صغير إلى اليمين. ليس كل المتصفحات تدعمها حاليًا.
7. اللون
يحدد HTML5 أيضًا لون النوع ، والذي يسمح لك بتحديد لون وإعادة القيمة السداسية. Opera11 هو المتصفح الوحيد الذي يدعم هذا النوع من المتصفح. ومع ذلك ، لا ينبغي أن يكون هناك الكثير من الأشخاص الذين يستخدمون هذا النوع ، لذلك ليس مشكلة كبيرة عدم دعمه.
8. شكل التحقق
الميزة الجديدة الأكثر إثارة هي التحقق من النموذج. يقوم معظم المطورين بالتحقق من صحة ، إما العميل أو الخادم. ربما لا يحل التحقق من صحة النموذج HTML5 محل التحقق من جانب الخادم الخاص بك ، ولكنه بالتأكيد سيحل محل التحقق من جانب العميل في النهاية. تكمن مشكلة التحقق من JavaScript في أنه من السهل على المستخدمين تجاوزه ، يمكن تجاوزه بسهولة عن طريق تعطيل JavaScript. الآن بعد أن قلق HTML5 ، لا داعي للقلق بشأن هذا. الأخطاء كلها مطالبات HTML5 الأصلية ولا يتم استخدام javaScript.
أي FF Safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - -
9. الحقول المطلوبة
لا يقتصر التحقق من صحة نموذج HTML5 على نوع حقل التحقق ، كما يسمح أيضًا بدعوة علامة إضافية جديدة مطلوبة. تتيح هذه الخاصية الجديدة للمطورين التحقق من ملء مربع الإدخال دون استخدام JavaScript.
ملخص: التحديثات المذكورة أعلاه ضرورية لتقصير دورات التطوير وتعزيز تجربة المستخدم. بمجرد أن تقبل جميع المتصفحات HTML5 ، سيتجاوز الجيل القادم من مواقع الويب توقعات أي شخص. HTML5 ليس متاعب ، وسوف يساعد المطورين بشكل كبير وتحسين تجربة المستخدم.