دعم نماذج HTML5 المحمولة وأنواع إدخال HTML. قم بتضمين التفاصيل الأكثر أهمية فقط في النموذج الخاص بك.
هذا المقالهو إعلان عن وظائف جديدة.
لا يوصى باستخدام محتويات هذه المقالة للتعرف على وظائف جديدة.
وصف كاملسيتم توفير وظائف جديدة في الوثائق الخاصة بالإصدار المقابل.
القائمة الكاملةتغييرات في نسخة جديدةيتم توفيره في ملف v8Update.htm.
تم تنفيذه في الإصدار 8.3.11.2867.
نحن نواصل تطوير منصة الهاتف المحمول، بإضافة الوظائف المتوفرة بالفعل في المنصة حواسيب شخصية. بالإضافة إلى ذلك، نقوم بتطوير إمكانات منصة محددة ذات صلة فقط بـ أجهزة محمولة. سنخبرك الآن ببعض التحسينات الأكثر أهمية.
مجدول
لم يتغير نموذج كائن المجدول "المحمول"، ولكن تغيرت طريقة تفاعل المستخدم مع المجدول، نظرًا لأن طرق إدخال المعلومات على الأجهزة المحمولة تختلف عن تلك المستخدمة على أجهزة الكمبيوتر المكتبية.
على سبيل المثال، يتم إجراء التحرير السريع لعنصر ما من خلال نقرة واحدة على العنصر. مكالمات الضغط لفترة طويلة قائمة السياقوظهور العلامات التي تسمح لك بتمديد العنصر. يتم السحب عن طريق الضغط لفترة طويلة ثم تحريك إصبعك.
يتم تمرير المخطط بالكامل عن طريق التمرير بإصبع واحد، والتكبير/التصغير بإصبعين، وما إلى ذلك.
من ميزات التنفيذ الحالي لبرنامج الجدولة "المحمول" أنه لا يدعم الطباعة بعد.
وثيقة منسقة
كائن "جديد" آخر أضفناه إلى منصة الهاتف المحمول هو تنسيق المستند. من وجهة نظر المستخدم، يختلف المستند المنسق "المحمول" فقط في أن لوحة التحرير الخاصة به مدمجة في عنصر التحكم نفسه، وهي جزء منطقي لوحة مفاتيح افتراضية. لا يُطلب منك، كمطورين، إضافته بشكل منفصل إلى التكوين. لوحة التحرير لديها نوع مختلفحسب نوع الجهاز المحمول (هاتف أو جهاز لوحي).
معاينة النموذج "المحمول" في أداة التهيئة
في أداة التهيئة، عند تطوير نموذج، أضفنا القدرة على رؤية كيف سيبدو النموذج الخاص بك على جهاز محمول.
في لوحة الأوامر، يمكنك تحديد خيار الواجهة جهاز محمول، وشاهد كيف سيبدو النموذج في الاتجاه القياسي.
هنا يمكنك تدوير جهازك المحمول.
بالإضافة إلى ذلك، لقد قدمنا لك الفرصة للاختيار من بينها عدد كبيرالأجهزة المشتركة.
بالإضافة إلى ذلك، يمكنك عرض نماذج الهاتف المحمول بثلاثة مستويات مختلفة:
- بكسل إلى بكسل- عندما تتوافق بكسل شاشة الجهاز المحمول مع بكسل شاشة النافذة معاينة;
- الحجم الأصلي - عندما يتطابق حجم الجهاز المحمول الموجود على الشاشة الأبعاد الهندسيةالأجهزة؛
- حسب حجم النافذة- عند تحديد مقياس العرض بطريقة تناسب منطقة العرض "المحمول" في نافذة المعاينة دون التمرير.
تجهيز دفعة من وثائق جداول البيانات
لقد أضفنا عددًا من العناصر الجديدة إلى النظام الأساسي للجوال والتي تتيح لك إنشاء حزم من المستندات المعروضة. تشبه هذه الوظيفة تلك الموجودة في منصة الكمبيوتر الشخصي. وبالتالي، يمكنك الآن، على سبيل المثال، إرسال عدة مستندات للطباعة مرة واحدة.
تطوير الإخطارات القابلة للتسليم
لقد قمنا بتنفيذ الدعم لخدمة إعلام Windows Push (WNS، Windows Notification Services). يمكنك الآن استخدام وظيفة الإشعارات التي تم تسليمها عند تشغيل تطبيق جوال على الأنظمة الأساسية لعائلة Windows.
لقد قمنا أيضًا بإعادة صياغة نظام معالجة الأخطاء لإرسال الإشعارات التي تم تسليمها. في الحالات التي تم فيها طرح خطأ مسبقًا كاستثناء، يتم طرحه الآن كقيمة يمكنك التعامل معها باللغة المضمنة.
تسريع الأجهزة في نظام التشغيل أندرويد
على إصدارات التشغيل أنظمة أندرويد 4.4.2 وما فوق منصة متنقلةيستخدم الآن تسريع الأجهزة. سمح لنا ذلك بزيادة سرعة عرض الواجهة بمقدار 1.5 - 3 مرات.
في هذه المقالة، سنلقي نظرة على بعض تحسينات النموذج الجديدة في HTML5 ونحلل كيفية مساعدتها في التحسين واجهة المستخدمعلى الجوال. وعلى وجه الخصوص، سنرى كيف يمكن توسيع النماذج باستخدام أنواع الإدخال الإضافية التي يوفرها HTML5، وسنعرض ما يمكنك توقعه من متصفحات الأجهزة المحمولة المختلفة.
أنواع المدخلات HTML5
يحتوي HTML5 على مجموعة من أنواع الإدخال الجديدة للنماذج. تسمح هذه الأنواع من المدخلات بمزيد من التحكم والتحقق من بيانات الإدخال. بعضها مفيد بشكل خاص ل مستخدمي الهاتف المحمولالذين غالبا ما يواجهون صعوبات عمل HTMLمدخل. القائمة الكاملة لأنواع بيانات الإدخال موضحة أدناه:
- اللون - اختيار اللون
- التاريخ - اختيار التاريخ
- التاريخ والوقت - حدد التاريخ والوقت
- البريد الإلكتروني - التحقق من صحة قناع البريد الإلكتروني
- الرقم - أدخل الرقم
- النطاق - شريط تمرير النطاق
- بحث - حقل البحث
- الهاتف - التحقق من صحة قناع الهاتف
- الوقت - التوقيت
- عنوان URL - التحقق من صحة عنوان URL
وبطبيعة الحال، هذه القائمة ليست كاملة. وهذا لا يشمل الأنواع التي يقبلها المعيار، ولكن جوهرها ليس واضحا بعد. سننظر في الأنواع المذكورة أعلاه الأكثر شيوعًا وذات الصلة في هذه المقالة مع الأمثلة.
1. نوع الإدخاللون
إذا كان نوع الإدخال هذا مدعومًا، فسيقوم متصفح المستخدم باستدعاء منتقي الألوان المدمج جهاز العميل. سيتم عرض اللون المحدد في المقابلة القيمة السداسية العشرية RGB.
< input type = "color" / > |
مثال على العمل:
يعتمد نمط النافذة المنبثقة على متصفحك. انقر فوق الزر لترى كيف يعمل.
اختر اللون الخاص بك:
للأسف، يدعم من هذا النوع متصفحات الجوال يترك الكثير مما هو مرغوب فيه. من بين جميع الخرائط الموجودة، لا يمكن العثور على التعيين الصحيح إلا في أوبرا موبايلو كروم اندرويد. بالنسبة لجميع المتصفحات الأخرى، سيتم عرض حقل نصي فارغ. وهذا يستحق أن نأخذ في الاعتبار. وبدلاً من ذلك، يمكنك رسم اللوحة في JS أو استخدام المكونات الإضافية.
2. تاريخ نوع الإدخال
إذا كان المتصفح مدعومًا، فإنه يوفر كتلة مناسبة لتحديد التاريخ.
< input type = "date" / > |
مثال على العمل:
اختيار التاريخ:
لاحظ أن نوع إدخال التاريخ، بالإضافة إلى متغيرات النوع التاريخ والوقت والوقت المحلي، يقدم سمات مفيدة، وقيم مثل min وmax، والتي يمكنها تعيين الحدود والتحقق من صحة إدخال المستخدم. وسوف نوضح هذا أدناه في النص.
نوع تاريخ إدخال HTML مدعوم من قبل جميع المتصفحات تقريبًا. الاستثناءات هي Opera Mini ومتصفح Android الافتراضي.
3. نوع الإدخال التاريخ والوقت والوقت المحلي
هذا نوع الإدخاليسمح للمستخدم بتحديد التاريخ والوقت بتنسيق مناسب. إذا كان مدعومًا، فسيتم عرضه كعنصر واجهة مستخدم للتاريخ/الوقت الأصلي للجهاز. الفرق بين أنواع الإدخال هذه هو أن الأول مرتبط بالتوقيت العالمي، والثاني لا يحتوي على أي معلومات عن المنطقة الزمنية.
< input type = "datetime-local" / > |
مثال على العمل:
اختر التاريخ والوقت:
غير معتمدفي آي موبايل وأوبرا ميني. في المتصفحات الشائعة الأخرى (الجوال)، يعمل النوع بشكل صحيح إلى حد ما، ولكن حالات الأخطاء ومواطن الخلل ليست غير شائعة. ضع ذلك في الاعتبار أيضًا، ولا تنسَ احتياطيات JavaScript.
4. نوع الإدخال البريد الإلكتروني
هذا النوع لا يتطلب أي تمثيل. يستخدمه العديد من الأشخاص بالفعل وهو مدعوم من قبل جميع المتصفحات تقريبًا.
< input type = "email" / > |
مثال على العمل:
أدخل عنوان بريدك الالكتروني:
قبل الإرسال، يتحقق المتصفح من صحة الحقل المملوء ويبلغ المستخدم إذا كان تنسيق الإدخال غير صالح. يعتمد الحساب على التعبير التالي (النص)@(المجال)
5. رقم نوع الإدخال والهاتف
وهذا نوع آخر لا يتطلب الكثير من النقاش. ومع ذلك، في بيئة متنقلة للغاية اداة مفيدة. استخدمه في الحالات التي يُعرض فيها على المستخدم مجموعة من الأرقام فقط. في هذه الحالة، سيتم تقديمه واجهة سهلة الاستخدامالمفاتيح العددية.
مثال على العمل:
اختار القيمة:
يتراوح النطاق الافتراضي في معظم المتصفحات بين 0 و100. أي أن الموضع الموجود في أقصى يسار شريط التمرير هو 0، والموضع الأبعد هو 100. ويمكنك تغيير النطاق باستخدام سمتي min وmax. يمكننا أيضًا تعيين قيمة الخطوة من خلال خطوة السمة. لذلك، لتحديد نطاق من 5 إلى 50، بزيادات قدرها 5، سوف نستخدم:
< input type = "range" min = "5" max = "50" step = "5" / > |
الدعم من الجميع المتصفحات الشعبيةباستثناء أوبرا ميني.
7. التحقق من صحة النموذج
أنها مريحة للغاية لتعيين خاص سمة HTMLالإدخال للتحقق من بيانات الإدخال. على سبيل المثال، نريد إنشاء حقل يجب ملؤه:
الأشخاص الذين يستخدمون الخاص بك تطبيق جوالأو موقع ويب، لتحقيق هدف محدد. عادة، ما يقف بين المستخدم وهدفه هو الشكل. في الواقع تعتبر النماذج الخطوة الأخيرة في عملية تحقيق أهداف المستخدم. ولهذا السبب من المهم جدًا أن يقوم المستخدم بملء النموذج في أسرع وقت ممكن ودون أي عوائق.
اتبع هذه القواعد السبعة لإنشاء نماذج بسيطة وواضحة:
القاعدة رقم 1: يجب أن تكون النماذج متوافقة مع الطريقة التي يُدخل بها المستخدم بياناته
تأكد من عدم حجب حقول النموذج بواسطة عناصر الواجهة (مثل لوحة المفاتيح). أثناء قيام المستخدم بملء حقول النموذج، قم بتحريك الحقول تلقائيًا لأعلى.
القاعدة رقم 2: قلل عدد حقول الإدخال وحاجة المستخدم إلى الكتابة
كلما بدا النموذج أطول وأكثر تعقيدًا، قل احتمال رغبة المستخدمين في ملء الفراغات، خاصة على الشاشات الصغيرة. سيؤدي تقليل عدد حقول الإدخال إلى جعل النموذج الخاص بك أقل انشغالًا، خاصة عند مطالبة المستخدم عدد كبير منمعلومة. 
اجعل النموذج بسيطًا وقصيرًا قدر الإمكان
لكن تقليل عدد الحقول لا يكفي. يجب عليك أيضًا الانتباه إلى الجهد الذي يبذله المستخدم عند إدخال البيانات. الطباعة مطلوبة درجة عاليةالتفاعلات. هناك احتمال كبير لحدوث أخطاء، حتى عند الدخول من لوحة مفاتيح كاملة الحجم (خاصة على شاشة اللمس).
لذلك، حاول تقليل الحاجة إلى الكتابة وأخطاء المستخدم.
الإعدادات الافتراضية الذكية
تساعد الإعدادات الافتراضية الذكية المستخدمين على ملء جميع حقول النماذج بشكل أسرع وأكثر دقة. على سبيل المثال، يمكنك التحديد المسبق لبلد إقامة المستخدم بناءً على بيانات الموقع الجغرافي الخاصة به.
الكشف التلقائيسيوفر الموقع وقت المستخدم في البحث عن غرفة فندق
أزرار الاختيار لاختيارات مماثلة ولكنها حصرية بشكل متبادل
عندما يواجه المستخدم الاختيار من قائمة الخيارات، فكر في استخدام قائمة أفقية من العلامات. يتيح لك ذلك استخدام مساحة الشاشة المتاحة بكفاءة أكبر.
أشرطة التمرير للسعر الأدنى/الأقصى أو نطاق الميزانية
فكر في استخدام أشرطة التمرير للحقول التي تحتوي على الأسعار أو الميزانية. بهذه الطريقة يمكن للمستخدم تحريك شريط التمرير إلى القيمة الدنيا/القصوى. من السهل تحريك شريط التمرير أفقيًا، ويمكنك بسهولة تخصيص هذا الإجراء باستخدام الإشارات المرئية. لكن تذكر أنه لا ينبغي إخفاء الأرقام عند التفاعل مع شريط التمرير (خاصة عند استخدام إبهامك).
شريط تمرير AirBnB لتحديد السعر
القاعدة رقم 3: يجب أن تكون عناوين النماذج إما فوق الحقول نفسها أو عائمة
تخبر العناوين المستخدم بالغرض الرئيسي للحقل، ويعد النص الواضح إحدى الطرق الرئيسية لتسهيل الوصول إلى واجهة المستخدم.
لماذا لا يجب عليك أبدًا استخدام عناوين النص داخل الحقل
الرؤوس الموجودة في الحقل (أو العناصر النائبة) هي نص موجود داخل حقل نموذج ويختفي بمجرد أن يبدأ المستخدم في إدخال بياناته.
العناوين داخل الميدان
على الرغم من أن العناوين الواردة في الصندوق تبدو جيدة من الناحية الجمالية، إلا أن هذه الميزة غالبًا ما تكون مبالغًا فيها. الخطأ الرئيسي هو فقدان السياق. بعد أن ينقر المستخدم على الحقل، يختفي النقش. وعليه، فهو لا يستطيع التحقق من أنه كتب ما هو مطلوب بالضبط.
النص الموجود داخل الحقل ليس هو الأكثر أفضل بديلرأس مرئي
أيضًا، قد يعتقد بعض المستخدمين الذين يرون أن شيئًا ما مكتوبًا بالفعل في الحقل أن الحقل مملوء مسبقًا بالفعل ولا يحتاجون إلى إدخال أي شيء آخر وقد يتجاهلون التعبئة.
لماذا تعد محاذاة رؤوس الحقول إلى اليسار أمرًا سيئًا للأجهزة المحمولة
الشيء الرئيسي الذي يجب مراعاته عند استخدام العناوين المحاذية لليسار على جهاز محمول هو حجم الشاشة ونسبة العرض إلى الارتفاع. إذا كان العنوان الموجود على اليسار مقابلًا للحقل، فمع اتجاه الشاشة العمودي، سيكون لديك مساحة صغيرة جدًا للحقل نفسه. وهذا يخلق بعض الصعوبة في الاستخدام لأنه لا توجد مساحة كافية لعرض ما يكتبه المستخدم. عدم القدرة على رؤية النص المُدخل يخلق مشكلة للمستخدمين لأنه يمنعهم من ملاحظة خطأ الإدخال بسرعة قبل إرسال النموذج.
من الصعب جدًا ملاحظة الخطأ إذا لم تكن البيانات مرئية بالكامل
رأس علوي أو رأس مستجيب
يجب أن تكون عناوين النماذج في أعلى حقول النموذج حتى يتمكن المستخدمون من رؤية ما يقومون بملئه وكيف. الميزة الرئيسية لوضع رؤوس النماذج أعلى النموذج هي أنه يمكنك تمديد النموذج عبر العرض الكامل للشاشة وجعله كبيرًا بما يكفي لإدخال البيانات (على سبيل المثال، بحجم خط يبلغ 16 بكسل). فائدة إضافيةسيكون من الممكن كتابة عناوين واضحة ومفهومة (لا تقتصر على كلمة أو كلمتين).
العيب الرئيسي لوضع الرؤوس فوق الحقول هو أن النموذج بأكمله يشغل مساحة رأسية أكبر، مما يعني أن المستخدم يحتاج إلى تمرير الشاشة. ومع ذلك، هذه ليست مشكلة خطيرة للغاية - اليوم، اعتاد الجميع على التمرير.
وبدلاً من ذلك، يمكنك استخدام الرؤوس سريعة الاستجابة للتأكد من قيام المستخدمين بملء الحقل بشكل صحيح. يتم عرض نص العنصر النائب بشكل افتراضي، ولكن بعد النقر على الحقل وإدخال النص، ينتقل نص العنصر النائب إلى أعلى الحقل، كما هو موضح أدناه.
القاعدة رقم 4: يجب أن يتم التحقق من صحة حقل النموذج في الوقت الفعلي
في عالم مثالي، يمكن للمستخدمين ملء النموذج معلومات ضروريةوسوف أكمل هذه المهمة بنجاح. في العالم الحقيقي، غالبًا ما يرتكب المستخدمون الأخطاء. في الوقت نفسه، لا يحب المستخدمون حقيقة أنه بعد عملية ملء الحقول بأكملها، يصلون إلى زر "إرسال" ويكتشفون أنهم ارتكبوا خطأ. من الصحيح إبلاغ المستخدم بالنجاح/الخطأ في الحقل فور ملئه. تُعلم رسالة التحقق المستخدم على الفور بأن المعلومات التي تم إدخالها صحيحة. يتيح هذا الأسلوب للمستخدمين تصحيح الأخطاء بشكل أسرع ودون الحاجة إلى انتظار ظهور الأخطاء بعد النقر فوق زر الإرسال.
إذا كنت تتوقع إجابات محددة للأسئلة، فأنت بحاجة إلى إظهار ما يجب إدخاله على الفور وبأي شكل.
قد يكون التحقق من صحة السلسلة حلاً أيضًا. في المثال أدناه، يمكنك أن ترى مثال جيد، كيف يمكنك تصحيح خطأ محتمل.
القاعدة رقم 5: عرض تخطيط لوحة المفاتيح وفقًا لبيانات الإدخال
يفضل المستخدمون تخطيط لوحة المفاتيح المقابل في التطبيق. على سبيل المثال، عندما يحتاج المستخدم إلى إدخال رقم بطاقة إئتمان، قم بإظهار إدخال الأرقام فقط بحيث يقوم المستخدم بإدخال الأرقام وليس الرموز. سيؤدي ذلك إلى زيادة سرعة التعبئة وتقليل الكمية الأخطاء المحتملةمدخل.
تحتاج إلى التأكد من ذلك هذه الفرصةيتم تنفيذها على التطبيق بأكمله، وليس على أجزائه الفردية.
القاعدة رقم 6: تقديم معلومات مفيدة في السياق
في بعض الأحيان، هناك حاجة إلى تقديم ذات الصلة و معلومات مفيدةلتبسيط العملية بالنسبة للمستخدم لإكمال النموذج. ولكن يجب استخدام هذا النص المصاحب فقط عند الحاجة إليه حقًا:
- عند تخطيط التواريخ، يقدر المستخدمون السياق مثل التقويم المدمج لتحديد أيام الأسبوع. وهذا يقلل من الحاجة إلى الخروج من التطبيق لعرض التقويم، مما يقلل من خطر تشتيت انتباه المستخدم عن مهمته الأساسية.
- قد يشعر الأشخاص بالقلق بشأن أمان بياناتهم، لذا يتعين عليك أن توضح لهم أن بياناتهم لن تتم مشاركتها مع أطراف ثالثة.
كقاعدة من قواعد الأخلاق الحميدة، يجب ألا تمتد شرحك إلى 100 حرف.
القاعدة رقم 7: استخدم تنسيقًا مرنًا
تتطلب بعض المهام معلومات دقيقة للغاية من المستخدم. ولكن، في الوقت نفسه، فإن مطالبة المستخدم بتقديم المعلومات في شكل معين قد يتعارض مع مبادئ سهولة الاستخدام. إذا طلبت من المستخدم إدخال معلومات رقمية (مثل رقم الهاتف) في نموذج، فكن مرنًا وقم بإنشاء شاشات يمكنها دعم تنسيقات مختلفةإدخال وعرض المعلومات في الشكل الأكثر سهولة في الاستخدام لمنع الأخطاء.
لا تستخدم تنسيقًا ثابتًا لإدخال البيانات
خاتمة
قد يكون لدى المستخدم كل أنواع الشكوك عند ملء النموذج، لذلك يجب أن تحاول جعل العملية بسيطة قدر الإمكان. يمكن لجميع النصائح الموضحة في هذه المقالة تحسين سهولة استخدام النماذج بشكل كبير.
يضيف JQuery Mobile تلقائيًا التصميم إلى نماذج HTML، مما يجعلها أكثر جاذبية وأكثر سهولة في الاستخدام عند اللمس.
هيكل نموذج JQuery Mobile
JQuery Mobile لاستخدام CSS لتصميم العناصر نموذج HTMLلجعلها أكثر جاذبية وأسهل في الاستخدام.
في JQuery Mobile، يمكنك استخدام عناصر النموذج التالية:
- حقل إدخال النص
- البحث عن حقل الإدخال
- زر الراديو
- خانة الاختيار
- اختر قائمة
- المنزلق
- الوجه تبديل التبديل
في باستخدام مسجنموذج الجوال الذي يجب أن تعرفه:
- <Форма>يجب أن يكون للعنصر طريقة وسمة إجراء
- يجب أن يكون لكل عنصر نموذج سمة "معرف" فريدة. يجب أن يكون المعرف فريدًا في جميع الصفحات في جميع أنحاء الموقع. يحدث هذا بسبب مسج موبايليتم تقديم آلية التنقل المكونة من صفحة واحدة بطريقة تجعل الكثيرين صفحات مختلفةمعًا
- يجب أن يكون لكل عنصر نموذج تسمية. علامة تبويب الإعدادات لخصائص لتتناسب مع معرف العنصر
أمثلة
جربها "
لإخفاء تسمية، استخدم فئة UI-hidden-accessible. يُستخدم هذا غالبًا عندما تقوم بإحالة عنصر كعلامة نائب:
أمثلة
جربها "
نصيحة:يمكننا استخدام سمة data-net-BTN = "true" لإضافة زر لمسح محتويات حقل الإدخال (رمز X على يمين حقل الإدخال):
أمثلة
<Ярлык = "имя_файла">اسم:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
جربها "
أيقونة نماذج الجوال jQuery
نموذج رمز الزر HTML القياسي <вход>العنصر (زر، إعادة تعيين، إرسال). سيقومون تلقائيًا بعرض الأنماط، وتكييف الأجهزة المحمولة تلقائيًا مع سطح المكتب:
أمثلة
<Тип входного = "Сброс" значение = "кнопка сброса">
جربها "
إذا كنت بحاجة إلى إضافة أنماط إضافية إلى<вход>الزر، يمكنك استخدام جدول البيانات * السمات التالي:
زر لإضافة أيقونة:
<Тип входного = "Сброс" значение = "кнопка сброса">
جربها "
مجال الحاويات
لجعل التسميات وعناصر النموذج تبدو أكثر ملاءمة للشاشات العريضة، من فضلك أو