مقدمة وأمثلة لميزات جديدة من نماذج HTML5

1. مقدمة

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

لذلك ، إليك رقعة لتحسين هذا الجزء من المحتوى. المحتوى العام لهذه المقالة هو:

# <نوع الإدخال = الرقم />

# <إدخال نوع = المدى />

# <نوع الإدخال = التاريخ /> وعناصر تحكم محدد الوقت الأخرى

# <إدخال نوع = color /> محدد الألوان

# <إدخال نوع = بحث />

# <Datalist> سمة العنصر والقائمة

# العلاقة الغامضة بين التحقق من نموذج HTML5 و CSS3

2. ميزات جديدة من أشكال HTML5

يتيح لك عنصر نموذج HTML مع type = الرقم تغيير القيمة في مربع النص عن طريق الضغط على مفتاح. غالبًا ما يظهر هذا التأثير في أنظمة Windows ، مثل:

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

رمز HTML الخام كما يلي:

 عدد الأشخاص: <نوع الإدخال = قيمة الرقم = 1 />

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

المتصفح المدعوم حاليًا هو Opera 11 ، لكن الأزرار التي تضيف وطرح القيم تحت الأوبرا تبدو ملتوية بعض الشيء ولها نمط مجردة.

يمكنك النقر هنا Hard: HTML5 Form Nubmer Control Demo

نطاق قيمة المعنى الصيني النطاق ، وهذا النوع من التأثير شائع أيضًا في نظام النوافذ ، كما هو موضح في لقطة الشاشة التالية:

هناك التحكم في المدخلات مع تأثيرات مماثلة في HTML5. فقط حدد نوعه على أنه نطاق ، سهل جدًا!

 نطاق السحب: <إدخال نوع = قيمة المدى = 50 />

بشكل افتراضي ، يكون نطاق القيمة 0 ~ 100 ، لذلك إذا كان القيمة = 50 ، يكون شريط السحب في منتصف نطاق المنطقة. كما هو مبين في الشكل أدناه:

إن Firefox الخاص بي هو الإصدار 3.6 حاليًا وهذه الميزة غير مدعومة بعد. ومع ذلك ، فإن Chrome و Opera و Safari 4 لها آثار ، لكنها ليست نفس الأب بعد كل شيء ، لذلك هناك بعض الاختلافات في المظهر ، لذلك لن يتم عرض هذه الاختلافات هنا.

يمكنك النقر هنا Hard: Demo HTML5 Form Control Demo

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

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

 حدد التاريخ: <إدخال نوع = قيمة التاريخ = 2011-01-04 />

نتيجة لذلك ، تحت المتصفحات المدعومة ، مثل الأوبرا ، تتوفر الآثار التالية:

هذا هو محدد الوقت غير على قيد الحياة!

بصرف النظر عن مظهره القبيح ، فإن الآخرين مبهجون للغاية.

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

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

يمكنك النقر هنا بشدة: HTML5 Form Time Class Space Demo

لقد اختبرته وقمت فقط بترقية Safari إلى الإصدار 5.0. لقد وجدت أنه في الوقت الحالي ، يدعم متصفح الأوبرا هذا النوع من التحكم في الوقت. الآثار هي كما يلي:

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

 حدد الوقت: <إدخال نوع = قيمة الوقت = 22: 52 />

حدد الوقت:

تحت النوع = أسبوع ، عندما يمر الماوس ، سيصبح لون خلفية تاريخ كل سطر (يمثل أسبوعًا) أغمق بشكل جماعي ، كما هو موضح في الشكل أدناه:

عندما يكون النوع = شهر ، يصبح لون الخلفية للشهر بأكمله أغمق ، كما هو موضح في الشكل أدناه:

قيم البيانات بعد تحديد الاثنين كما يلي:

هذا هو التحكم في محدد الألوان ، وهو قوي للغاية. إنه سهل الاستخدام للغاية ، على النحو التالي:

 حدد اللون: <نوع الإدخال = قيمة اللون =#34538b />

التأثير الافتراضي في متصفح الأوبرا هو كما يلي:

التحكم الافتراضي في الإدخال لديه خلفية ألوان دائرية مع #34538b. ننقر على المنسدلة ، والنتيجة هي ، مسح وتوسيع لوحة ألوان الويب:

انقر فوق الزر أدناه مع كلمات أخرى ... ونتيجة لذلك ، تم توسيع لوحة اختيار الألوان الرائعة:

إنه لأمر رائع ، إنه سهل الاستخدام للغاية ، يا هههه.

يمكنك النقر هنا Hard: HTML5 Form Form Color Color Control Demo

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

لم أجد أي شيء مميز حول أي شيء آخر ، لذلك ذكرت هذا للتو. يمكنك النقر هنا بجد: عرض التحكم في نوع البحث HTML5

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

لإعطاء مثال بسيط:

رمز HTML التالي:

 القائمة: <type type = text list = myData placeholder = تصنيفات الأفلام الشائعة/> <معرف Datalist = myData> <خيار label = top1 value = دع الرصاص يطير> <خيار التسمية = top2 value = إذا كنت the to to to to to to to to top3 = top3 value = laughing jianghu> <option label = top4 value = orphan of zhao>

والنتيجة هي كما يلي بعد التركيز على مربع الإدخال:

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

3. التحقق من نموذج HTML5 و CSS3

مع HTML5 ، ظهرت بعض الفئات الزائفة الجديدة أيضًا في الجزء المحدد من CSS3 ، مثل:

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

على سبيل المثال ، رموز CSS و HTML التالية:

 الإدخال [type = text]: التركيز: صالح ، إدخال [type = البريد الإلكتروني]: التركيز: صالح ، إدخال [type = number]: Focus: in-Range {Outline: 2px Green Solid ؛ } الإدخال [type = text]: التركيز: غير صالح ، إدخال [type = البريد الإلكتروني]: التركيز: غير صالح ، إدخال [type = number]: Focus: Out-Out-Range {Outline: 2px Red Solid ؛ }

 <p> مربع الإدخال العادي: <نوع الإدخال = text /> </p> <p> مربع إدخال البريد: <type type = email /> </p> <p> مربع الإدخال العددي: <إدخال نوع = رقم min = 0 max = 10 /> (0 ~ 10) </p>

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

مع إدخال الأحرف ، عندما يكون صندوق البريد قانونيًا ، سيتم تنظيف الحدود باللون الأحمر في حدود خضراء آمنة:

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

4. عجل الاستنتاج

تم عرض بعض الميزات الأخرى لأشكال HTML5 ، مثل المطلوب ، التركيز التلقائي ، العنصر النائب ، النمط ، وما إلى ذلك ، وشرحها في الميزات 28 HTML5 والنصائح والتقنيات التي يجب أن تعرفها ، لذلك لن أخوض في التفاصيل هنا.

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

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

ميزات نموذج جديدة في html5: http://dev.opera.com/articles/view/new-form-fortures-in-html5/