ترجمة: فلاد Merzhevich

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

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

نص سريع دعم النص الفوري

أي.	فايرفوكس	سفاري	الكروم	الأوبرا	ايفون	أندرويد
-	4.0+	4.0+	4.0+	11.0+	4.0+	-

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

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

عند النقر فوق شريط العناوين، يختفي نص التلميح.

إليك كيفية تضمين نص مقترح في نماذجك.

المتصفحات التي لا تدعم سمة العنصر النائب تتجاهلها ببساطة. لا ضرر ولا مخالفة.

اسأل الأستاذ ماركوب

☞ س. هل يمكنني استخدام ترميز HTML لسمة العنصر النائب؟ أريد إدراج صورة أو ربما تغيير الألوان.

أ. يمكن أن تحتوي سمة العنصر النائب على نص فقط، ولا تحتوي على تعليمات برمجية بتنسيق HTML. ومع ذلك، هناك ملحقات CSS خاصة تسمح لك بتعيين نمط النص في بعض المتصفحات.

مجالات التركيز التلقائي دعم التركيز التلقائي

أي.	فايرفوكس	سفاري	الكروم	الأوبرا	ايفون	أندرويد
-	-	4.0+	3.0+	10.0+	-	-

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

نظرًا لأن التركيز التلقائي يعمل من خلال JavaScript، فقد تكون هناك صعوبة في التعامل مع هذه الحالات القصوى وخيارات قليلة للأشخاص الذين لا يريدون أن "تسرق" صفحة الويب تركيزهم.

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

إليك كيفية ضبط حقل النموذج على التركيز التلقائي.

المتصفحات التي لا تدعم خاصية التركيز التلقائي سوف تتجاهلها.

ماذا حدث؟ لنفترض أنك تريد أن يعمل التركيز التلقائي في كل مكان، وليس فقط في متصفحات HTML5 الفاخرة؟ يمكنك ترك النص الحالي مع التركيز التلقائي، فقط قم بإجراء تغييرين صغيرين:

• إضافة سمة التركيز التلقائي إلى كود HTML؛
• تحقق مما إذا كان المتصفح يدعم سمة التركيز التلقائي، وإذا لم يكن كذلك، قم بتشغيل البرنامج النصي الخاص بك.

التركيز التلقائي مع البديل

إذا (!("التركيز التلقائي" في document.createElement("input"))) ) (
document.getElementById("q").focus();
}

ضبط التركيز في وقت مبكر

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

على سبيل المثال، في القسم السابق، تم وضع البرنامج النصي للتركيز التلقائي مباشرة بعد حقل النموذج الذي أشار إليه. هذا الحل الأمثل، لكنه قد يسيء إلى مشاعرك، بلوك كود جافا سكريبتفي منتصف الصفحة (أو بشكل أكثر واقعية؛ قد لا يكون نظامك مرنًا). إذا لم تتمكن من إدراج برنامج نصي في منتصف الصفحة، فيجب عليك ضبط التركيز عبر حدث مخصص مثل $(document).ready() في jQuery بدلاً من window.onload .

التركيز التلقائي عبر jQuery

$(مستند).جاهز(وظيفة() (

$("#q").focus();
}
});

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

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

التركيز التلقائي مع حدث مخصص بديل

$(document).bind("autofocus_ready"، وظيفة () (
إذا (!("التركيز التلقائي" في document.createElement("input"))) (
$("#q").focus();
}
});





$(document).trigger("autofocus_ready");

هذا الحل هو الأمثل، تماما مثل النهج الأول. سيتم ضبط التركيز على حقل النموذج في أقرب وقت ممكن تقنيًا بينما لا يزال نص الصفحة قيد التحميل. تم نقل جزء من منطق التطبيق (التركيز في حقل النموذج) من نص الصفحة إلى القسم. يعتمد هذا المثال على jQuery، لكن مفهوم الأحداث المخصصة ليس فريدًا في jQuery. توفر مكتبات JavaScript الأخرى مثل YUI وDojo إمكانات مماثلة.

دعونا نلخص.

• من المهم ضبط التركيز بشكل صحيح.
• إذا أمكن، اطلب من المتصفح استخدام سمة التركيز التلقائي في الحقل الذي تريد التركيز عليه.
• إذا كنت تستخدم تعليمات برمجية بديلة للمتصفحات الأقدم، فحدد الدعم لسمة التركيز التلقائي بحيث يعمل البرنامج النصي فقط في المتصفحات الأقدم.
• ضبط التركيز في أقرب وقت ممكن. أدخل البرنامج النصي للتركيز في الكود مباشرة بعد حقل النموذج. إذا كان هذا لا يزعجك، فقم بتضمين مكتبة JavaScript تدعم الأحداث المخصصة ورفع الحدث في التعليمات البرمجية مباشرة بعد حقل النموذج. إذا لم يكن ذلك ممكنًا، استخدم حدثًا مثل $(document).ready() من jQuery.
• لا يجب عليك الانتظار حتى يتم التركيز على window.onload تحت أي ظرف من الظروف.

العناوين بريد إلكتروني

لأكثر من عقد من الزمن، احتوت النماذج على أنواع قليلة فقط من الحقول. الأكثر شيوعا هي التالية.

لا تزال جميع أنواع الحقول هذه تعمل في HTML5. إذا قمت "بالترقية إلى HTML5" (ربما عن طريق تغيير !DOCTYPE )، فلن تضطر إلى إجراء تغيير واحد على النماذج الخاصة بك. ياي للتوافق مع الإصدارات السابقة!

ومع ذلك، يحدد HTML5 13 نوعًا جديدًا من الحقول ولا يوجد سبب لعدم البدء في استخدامها.

أول هذه الأنواع الجديدة من عناوين البريد الإلكتروني. يبدو شيئا من هذا القبيل.

كنت سأكتب جملة تبدأ "على المتصفحات التي لا تدعم النوع = "email" ..." لكنها توقفت. لماذا؟ لأنني لست متأكدًا مما إذا كانت المتصفحات لا تدعم type="email" . جميع المتصفحات "تدعم" النوع = "البريد الإلكتروني" . قد لا يفعلون أي شيء خاص، لكن المتصفحات التي لا تتعرف على type="email" ستعامله على أنه type="text" وستعرضه كحقل نص عادي.

وسوف أؤكد على مدى أهمية هذا. هناك الملايين من النماذج على الإنترنت التي تطلب منك إدخال عنوان بريدك الإلكتروني، وجميعها تستخدم . ترى مربع نص، أدخل عنوان بريدك الإلكتروني فيه وهذا كل شيء. ثم يأتي HTML5، الذي يحدد النوع = "البريد الإلكتروني" . هل أصبحت المتصفحات مجنونة؟ لا. يتعامل كل متصفح على وجه الأرض مع سمة النوع غير المعروفة على أنها type = "text" - حتى IE6. لذا يمكنك "تحديث" النماذج الخاصة بك باستخدام type="email" الآن.

ماذا يحدث إذا قلنا أن المتصفح يدعم type="email"؟ حسنا، يمكن أن يعني أي شيء. لا تتطلب مواصفات HTML5 أي واجهة مستخدم محددة لأنواع الحقول الجديدة. يضيف Opera رمزًا صغيرًا إلى حقل النموذج. يتم عرض متصفحات HTML5 الأخرى مثل Safari وChrome كحقل نصي - مثل type="text" - لذلك لن يلاحظ المستخدمون الفرق (حتى ينظروا إلى كود المصدر).

ثم هناك اي فون.

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

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

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

عناوين الويب

عنوان الويب - الذي يطلق عليه المهوسون عناوين URL، باستثناء عدد قليل من المتحذلقين الذين يطلقون على عناوين URI - هو نوع آخر من النصوص المتخصصة. يقتصر بناء جملة عنوان الويب على معيار الإنترنت ذي الصلة. إذا طلب منك شخص ما إدخال عنوان ويب في نموذج، فإنه يتوقع شيئًا مثل "http://www.google.com/"، وليس "125 Farwood Road". الخطوط المائلة شائعة - حتى في الخطوط الرئيسية صفحات جوجلهناك ثلاثة منهم. النقاط شائعة أيضًا، لكن المسافات محظورة. وكل عنوان ويب يحتوي على لاحقة نطاق مثل ".com" أو ".org".

وهكذا... (قرع الطبل من فضلك)... . على iPhone يبدو مثل هذا.

أعاد جهاز iPhone تصميم لوحة المفاتيح الافتراضية الخاصة به تمامًا كما فعل مع البريد الإلكتروني، ولكنه الآن يعمل على تحسينها لكتابة عنوان الويب. يتم استبدال المساحة بالكامل بثلاثة المفاتيح الافتراضية: الشرطة المائلة والنقطة و".com" (يمكنك الضغط باستمرار على مفتاح ".com" لتحديد لاحقة مختلفة مثل ".org" أو ".net").

ستعامل المتصفحات التي لا تدعم HTML5 النوع = "url" على أنه نوع = "نص"، لذلك ليس هناك أي جانب سلبي لاستخدام هذا النوع لجميع الحقول التي تحتاج إلى إدخال عنوان ويب فيها.

الأرقام كعدادات

الخطوة التالية: الأرقام. يعد طلب رقم أكثر تعقيدًا من طلب بريد إلكتروني أو عنوان ويب. أولًا، الأرقام أكثر تعقيدًا مما تعتقد. حدد رقمًا بسرعة. -1؟ لا، أقصد رقمًا بين 1 و10.7 ½؟ لا، لا، لا تكن جزءًا صغيرًا، أيها الغبي. π؟ الآن اخترت للتو رقمًا غير منطقي.

أود أن أشير إلى أنه لا يُطلب منك غالبًا "مجرد رقم". من الأرجح أنهم سيطلبون رقمًا في نطاق معين. قد تحتاج فقط إلى أنواع معينة من الأرقام ضمن هذا النطاق - ربما أرقام صحيحة، ولكن ليس كسورًا أو أرقام عشريةأو شيئًا أكثر غرابة، مثل مضاعفات الرقم 10. ويغطي HTML5 كل ذلك.

اختر رقمًا تقريبًا

دعونا ننظر إلى سمة واحدة في وقت واحد.

• النوع = "الرقم" يعني أن هذا حقل رقمي.
• يحدد الحد الأدنى = "0" الحد الأدنى للقيمة المسموح بها لهذا الحقل.
• الحد الأقصى = "10" هو الحد الأقصى للقيمة المسموح بها.
• تحدد الخطوة = "2" مع الحد الأدنى للقيمة الأرقام الصالحة في النطاق: 0، 2، 4 وما إلى ذلك، حتى الحد الأقصى للقيمة.
• القيمة = "6" القيمة الافتراضية. يجب أن تبدو هذه السمة مألوفة، فهي نفس السمة المستخدمة دائمًا لتحديد قيم حقل النموذج. أذكر هذا هنا كنقطة بداية يرتكز عليها HTML5 الإصدارات السابقة HTML. ليس عليك أن تتعلم من جديد كيفية القيام بما قمت به بالفعل.

هذا هو الرمز لحقل رقمي. ضع في اعتبارك أن كل هذه السمات اختيارية. إذا كان لديك حد أدنى وليس حدًا أقصى، فيمكنك تحديد سمة min وليس سمة max. قيمة الخطوة الافتراضية هي 1 ويمكنك حذف سمة الخطوة حتى تكون هناك حاجة إلى قيمة خطوة مختلفة. إذا لم تكن هناك قيمة افتراضية، فيمكن أن تكون سمة القيمة عبارة عن سلسلة فارغة أو حتى يتم حذفها تمامًا.

لكن HTML5 لا يتوقف عند هذا الحد. بنفس السعر المنخفض للحرية، يمكنك الحصول على تقنيات JavaScript المفيدة هذه.

• يعمل input.stepUp(n) على زيادة قيمة الحقل بمقدار n.
• يعمل input.stepDown(n) على تقليل قيمة الحقل بمقدار n.
• تُرجع input.valueAsNumber القيمة الحالية كرقم فاصلة عائمة (خاصية input.value تكون دائمًا سلسلة).

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

في إصدار سطح المكتب من Opera، يظهر الحقل type = "number" كعداد به أسهم صغيرة لأعلى ولأسفل يمكنك النقر فوقها لتغيير القيم.

يحترم Opera سمات min و max و step، لذلك ستحقق دائمًا قيمة رقمية مقبولة. إذا قمت بزيادة القيمة إلى الحد الأقصى، يتحول السهم لأعلى في العداد إلى اللون الرمادي.

كما هو الحال مع جميع حقول الإدخال الأخرى التي ناقشتها في هذا الفصل، فإن المتصفحات التي لا تدعم النوع = "رقم" ستتعامل معه على أنه نوع = "نص" . سيتم عرض القيمة الافتراضية في الحقل (كما تم تخزينها في سمة القيمة)، ولكن سيتم تجاهل السمات الأخرى مثل الحد الأدنى والحد الأقصى. أنت حر في تنفيذها بنفسك أو استخدام إطار عمل JavaScript الذي ينفذ بالفعل إدارة العدادات. تحقق هنا أولا.

إذا (! .inputtypes.number) (
// لا يوجد دعم أصلي للحقل type=number
// قد يجرب Dojo أو إطار عمل JavaScript آخر
}

الأرقام كشريط تمرير

العداد ليس الطريقة الوحيدة لتمثيل إدخال الأرقام. ربما تكون قد شاهدت أيضًا شريط تمرير يشبه هذا.

الآن يمكنك أيضًا الحصول على شريط تمرير في النموذج. يبدو الرمز مشابهًا بشكل غريب لحقل العداد.

جميع السمات المتاحة هي نفسها الخاصة بـ type="number" - min و max و step و value - وتعني نفس الشيء. والفرق الوحيد هو واجهة المستخدم. بدلاً من حقل الإدخال، من المتوقع أن تعرض المتصفحات type = "range" كشريط تمرير. في وقت الكتابة أحدث الإصداراتلقد عمل Safari وChrome وOpera مع هذا. لسوء الحظ، يتم عرض iPhone كحقل نصي بسيط، ولا يقوم حتى بتحسين لوحة المفاتيح التي تظهر على الشاشة لإدخال الأرقام. تتعامل جميع المتصفحات الأخرى مع الحقل على أنه type="text" ، لذلك لا يوجد سبب لبدء استخدام هذا النوع على الفور.

لا يتضمن HTML 4 تحديد التاريخ عبر التقويم. تتيح لك أطر عمل JavaScript التغلب على هذا (Dojo، وjQuery UI، وYUI، وClose Library)، ولكن، بالطبع، يتطلب كل حل من هذه الحلول "تنفيذ" إطار العمل لأي تقويم مدمج.

يحدد HTML5 أخيرًا طريقة لتمكين منتقي التاريخ الأصلي دون أي برمجة نصية. يوجد في الواقع ستة منها: التاريخ والشهر والأسبوع والوقت والتاريخ + الوقت والتاريخ + الوقت مع المنطقة الزمنية.

وحتى الآن الدعم ضئيل.

دعم منتقي التاريخ اكتب Opera المتصفحات الأخرى

النوع = "التاريخ"	9.0+	-
اكتب = "شهر"	9.0+	-
اكتب = "أسبوع"	9.0+	-
اكتب = "الوقت"	9.0+	-
اكتب = "التاريخ والوقت"	9.0+	-
النوع = "التاريخ والوقت المحلي"	9.0+	-

إليك كيفية عرض Opera:

إذا كنت بحاجة إلى وقت مع التاريخ، فإن Opera يدعم أيضًا:

إذا كنت بحاجة إلى شهر بالإضافة إلى سنة (على سبيل المثال، تاريخ انتهاء الصلاحية بطاقة إئتمان)، يمكن لـ Opera عرض:

الأقل شيوعًا، ولكنه متاح، هو تحديد الأسبوع من السنة عبر:

وأخيرًا وليس آخرًا، التوقيت مع:

منتقي التاريخ مع البديل

...

var i = document.createElement("input");
i.setAttribute("type", "date");
إذا (i.type == "نص") (
// لا يوجد دعم لمنتقي التاريخ الأصلي :(
// استخدم Dojo/jQueryUI/YUI/Closure لإنشائه،
// ثم استبدل العنصر ديناميكيًا
}

ومن المحتمل أن تدعم المتصفحات الأخرى هذه الأنواع في النهاية. مثل type="email" والأنواع الأخرى، ستظهر حقول النماذج هذه كنص عادي في المتصفحات التي لا تتعرف على type="date" ومتغيراته. إذا كنت تريد، يمكنك فقط استخدام ، وإسعاد مستخدمي Opera، والانتظار حتى تلحق المتصفحات الأخرى بالركب. يعد استخدام هذا أكثر واقعية، ولكن تحقق مما إذا كان المتصفح يتمتع بدعم منتقي التاريخ الأصلي، وقم بتضمين حل بديل في شكل برنامج نصي من اختيارك (Dojo، أو jQuery UI، أو YUI، أو Closure Library، أو خيارات أخرى).

نافذة البحث

لذا، ابحث. ليس فقط عمليات البحث من Google أو Yahoo (حسنًا، تلك أيضًا). فكر في أي مربع بحث، في أي صفحة، في أي موقع ويب. لدى أمازون مربع بحث، ولدى ياندكس مربع بحث، ومعظم المدونات لديها أيضًا مربع بحث. كيف يتم صنعها؟

، تمامًا مثل أي حقل نصي آخر على الويب. دعونا نصلح هذا.

البحث عن جيل جديد

في بعض المتصفحات لن تلاحظ أي اختلاف عن حقل النص العادي. ولكن إذا كنت تستخدم Safari على نظام التشغيل Mac OS X، فسيبدو الأمر بهذا الشكل. هل وجدت الفرق؟ يحتوي حقل الإدخال على زوايا مستديرة! أعلم، أعلم أنك بالكاد تستطيع احتواء مشاعرك. ولكن انتظر، هناك المزيد! عندما تبدأ في كتابة type = "search" في الحقل، سيقوم Safari بإدراج زر "x" صغير على الجانب الأيمن من النافذة. يؤدي النقر على "x" إلى مسح محتويات الحقل.جوجل كروم ، التي لديها نفس التكنولوجيا تحت غطاء محرك السيارة، تتصرف بنفس الطريقة. تبدو هاتان الحيل الصغيرة وتتصرفان بشكل مشابه للبحث الأصلي في iTunes وغيره من العملاءتطبيقات ماك

نظام التشغيل العاشر

يستخدم موقع Apple.com البحث في الموقع لمساعدة الموقع في نقل شعور "بحب الببغاء". ولكن لا يوجد شيء محدد لأجهزة Mac هنا. إنه مجرد رمز، لذلك يمكن لكل متصفح على كل منصة اختيار كيفية العرض وفقًا لاتفاقيات النظام الأساسي. كما هو الحال مع جميع الأنواع الجديدة الأخرى، فإن المتصفحات التي لا تتعرف على type="search" ستعاملها على أنها type="text" ، لذلك ليس هناك أي سبب على الإطلاق لعدم البدء في استخدام type="search" لجميع مربعات البحث الخاصة بك اليوم.

يقول البروفيسور ماركوب

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

- مظهر webkit: حقل النص؛

شكرًا لجون لين لتعليمي هذه الخدعة.

يحدد HTML5 أيضًا حقلاً يسمح لك بتحديد اللون وإرجاعه بالنظام الست عشري. لا يوجد متصفح يدعم منتقي الألوان، وهو أمر مؤسف لأنني كنت دائمًا أحب لوحات نظام التشغيل Mac OS. ربما يوما ما.

ملحوظة مترجم يدعم Opera 11 هذه الميزة.

التحقق من صحة النموذج

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

هناك مشكلتان كبيرتان تتعلقان بالتحقق من صحة عنوان البريد الإلكتروني في JavaScript:

هناك عدد قليل من زوار موقعك (ربما حوالي 10%) لم يتم تمكين JavaScript لديهم.

سوف تتلقى العنوان بشكل غير صحيح.

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

نوع اختبارات Opera = "البريد الإلكتروني"

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

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

لا يوجد كود يتيح التحقق من صحة النموذج في HTML5، ويتم ذلك بشكل افتراضي. لتعطيل التحقق من الصحة، استخدم سمة novalidate.

لا تختبرني

كانت المتصفحات بطيئة في تضمين الدعم للتحقق من صحة النموذج في HTML5. سيحظى Firefox 4 بالدعم الكامل. لسوء الحظ، يتم تنفيذ Safari وChrome جزئيًا فقط: حيث يقومان بالتحقق من صحة عناصر النموذج، لكن لا يعرضان أي رسائل مرئية عندما يفشل حقل النموذج في التحقق من الصحة. بمعنى آخر، إذا أدخلت تاريخًا غير صحيح (أو به خطأ إملائي) في type="date"، فلن يرسل Safari وChrome النموذج، لكن لن يخبرك بسبب ذلك. سيقومون بتعيين التركيز على الحقل الذي يحتوي على قيمة غير صالحة، لكنهم لن يعرضوا رسالة خطأ مثل Opera أو Firefox 4.

الحقول المطلوبة يدعم

أي.	فايرفوكس	سفاري	الكروم	الأوبرا	ايفون	أندرويد
-	4.0+	-	-	9.0+	-	-

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

رمز الحقول المطلوبة بسيط قدر الإمكان.

قد تقوم المتصفحات بتغيير المظهر الأصلي للحقل المطلوب. فيما يلي مثال لما يبدو عليه في Mozilla Firefox 4.0.

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

تقدم هذه المقالة ملخصًا للاستجابات التي يمكن أن تتخذها مؤسسة أو مشروع لإدارة المخاطر. يمكن تعريف المخاطر بأنها عدم اليقين من النتيجة سواء كانت إيجابية (فرصة) أو سلبية (تهديد).

تعد إدارة المخاطر أمرًا بالغ الأهمية لنجاح المشروع، ومن مهام إدارة المخاطر إدارة تعرض المشروع للمخاطر ().

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

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

يجب أن تحدد خطط الطوارئ الإجراءات التي سيتم اتخاذها في حالة حدوث خطر. غالبًا ما يكون للإجراءات الطارئة تكلفة مرتبطة بها ويجب تخصيص ميزانية جانبًا في حالة العمل لتغطية هذه التكلفة.

أهم 50 مخاطر تجارية وكيفية إدارتها!

20 من مخاطر المشاريع الشائعة - مثال على القائمة المرجعية لسجل المخاطر التي تضم 30 استجابة لمخاطر مخاطر البناء - مراجع مكتب التجارة الحكومية (2002)، إدارة المشاريع الناجحة مع PRINCE2، لندن: TSO.

• The Projects Group PLC، 2006، نظرة عامة على إدارة المخاطر، Sutton: The Projects Group plc.
• بعد تلقي رسالة طلب وتفسيرها، يستجيب الخادم برسالة استجابة HTTP:
• سطر فارغ (أي سطر لا يسبقه أي شيء CRLF) يشير إلى نهاية حقول الرأس
• اختياريا نص الرسالة

تشرح الأقسام التالية الكيانات المستخدمة في رسالة استجابة HTTP.

خط حالة الرسالة

يتكون سطر الحالة من إصدار البروتوكول متبوعًا برمز الحالة الرقمي والعبارة النصية المرتبطة به. يتم فصل العناصر بمسافات SP.

خط الحالة = إصدار HTTP SP، رمز الحالة SP، عبارة السبب، إصدار HTTP CRLF

سيعرض الخادم الذي يدعم HTTP الإصدار 1.1 معلومات الإصدار التالية:

إصدار HTTP = HTTP/1.1

رمز الحالة

عنصر رمز الحالة هو عدد صحيح مكون من 3 أرقام حيث يحدد الرقم الأول من رمز الحالة فئة الاستجابة ولا يحتوي الرقمان الأخيران على أي دور تصنيف. هناك 5 قيم للرقم الأول:

س.ن.

1	الكود والوصف 1xx: معلوماتية
2	وهذا يعني أنه تم استلام الطلب وأن العملية مستمرة. 2xx: النجاح
3	وهذا يعني أنه تم استلام الإجراء وفهمه وقبوله بنجاح. 3xx: إعادة التوجيه
4	وهذا يعني أنه يجب اتخاذ المزيد من الإجراءات لإكمال الطلب. 4xx: خطأ في العميل
5	وهذا يعني أن الطلب يحتوي على بناء جملة غير صحيح أو لا يمكن تحقيقه. 5xx: خطأ في الخادم

وهذا يعني أن الخادم فشل في تلبية طلب صالح على ما يبدو.

رموز حالة HTTP قابلة للتوسيع ولا يُطلب من تطبيقات HTTP فهم معنى جميع رموز الحالة المسجلة. تم تقديم قائمة بجميع رموز الحالة في فصل منفصل للرجوع إليها.

حقول رأس الاستجابة

سندرس الرأس العام ورأس الكيان في فصل منفصل عندما نتعلم حقول رأس HTTP. في الوقت الحالي، دعونا نتحقق من حقول رأس الاستجابة.

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

• مصادقة الوكيل

مصادقة WWW

يمكنك تقديم حقولك المخصصة في حال كنت ستكتب عميل الويب والخادم المخصصين لك.

أمثلة على رسالة الرد

الآن دعونا نجمع كل ذلك معًا لتكوين استجابة HTTP لطلب جلب صفحة hello.htm من خادم الويب الذي يعمل في الموقع

يوضح المثال التالي رسالة استجابة HTTP تعرض حالة الخطأ عندما يتعذر على خادم الويب العثور على الصفحة المطلوبة:

HTTP/1.1 404 لم يتم العثور عليه التاريخ: الأحد، 18 أكتوبر 2012 10:36:20 بتوقيت جرينتش الخادم: Apache/2.2.14 (Win32) طول المحتوى: 230 الاتصال: مغلق نوع المحتوى: نص/html؛ مجموعة الأحرف=iso-8859-1 404 لم يتم العثور عليها لم يتم العثور عليها

لم يتم العثور على عنوان URL المطلوب /t.html على هذا الخادم.

ما يلي هو مثال لرسالة استجابة HTTP التي تظهر حالة الخطأ عندما واجه خادم الويب إصدار HTTP خاطئًا في طلب HTTP المحدد:

HTTP/1.1 400 تاريخ الطلب السيئ: الأحد، 18 أكتوبر 2012 10:36:20 بتوقيت جرينتش الخادم: Apache/2.2.14 (Win32) طول المحتوى: 230 نوع المحتوى: نص/html؛ charset=iso-8859-1 الاتصال: مغلق 400 طلب سيء طلب سيء

أرسل متصفحك طلبًا لم يتمكن هذا الخادم من فهمه.

يحتوي سطر الطلب على أحرف غير صالحة تتبع سلسلة البروتوكول.