من بين العناصر المحسّنة HTML5 ، أبرز العناصر هو عنصر النموذج. في HTML5 ، تم قطع النماذج إلى حد كبير ، ويمكن الآن تنفيذ ترميز JavaScript المطلوبة سابقًا دون الترميز. قبل بدء المناقشة ، شيء واحد يجب ملاحظة:
في HTML5 ، يمكن أن يكون التحكم في النموذج خارج نموذج أو أكثر ينتمي إليه. لذلك ، فإن عناصر التحكم في النماذج مثل Fieldset و Label and Inport قد تمت إضافة جميع سمات النماذج لتحديد النموذج الذي ينتمي إليه عنصر التحكم في النموذج. في HTML5 :1. عنصر النموذج نفسه يضيف سمتين جديدتين: الإكمال التلقائي و Novalidate. يتم استخدام خاصية الإكمال التلقائي لتمكين ميزة قائمة الاقتراحات المنسدلة ، ويتم استخدام خاصية Novalidate لإيقاف ميزة التحقق من صحة النموذج ، والتي تكون مفيدة عند الاختبار.
2. يضيف عنصر Fieldset ثلاث سمات جديدة: تعطيل ، الاسم والنموذج. يتم استخدام خاصية تعطيل لتعطيل Fieldset ، يتم استخدام خاصية الاسم لتعيين اسم الحقول ، وقيمة خاصية النموذج هي معرف واحد أو أكثر من النموذج الذي تنتمي إليه الحقول. كما ذكرنا سابقًا ، عندما يتم وضع Fieldset خارج النموذج ، يجب عليك تعيين خاصية النموذج لعلامة Fieldset ، بحيث يمكن ربط الحقول بشكل صحيح بنموذج واحد أو أكثر.
3. بالإضافة إلى السمة لـ FOR ، يضيف عنصر التسمية سمة النموذج فقط. تجدر الإشارة هنا إلى أن السمة التي لم أكن قد اهتمت بها من قبل. يتم استخدام السمة for لتحديد عنصر تحكم النموذج المرفق بالتسمية. وبهذه الطريقة ، عند النقر فوق هذه التسمية ، سوف يكتسب التحكم في النموذج المرفق التركيز ، مثل:
<form action = "demo_form.asp" id = "form1">
<label for = "name"> انقر فوق لي </label> <input id = "name" type = "text"> </pected>
<type type = "إرسال" value = "إرسال" />
</form>
انقر فوقني ، وسيحصل مربع الإدخال التالي على التركيز.
4. يقدم عنصر الإدخال بعض الأنواع الجديدة والسمات لتعزيز قابلية استخدام النموذج. هذه أنواع الإدخال الجديدة مفيدة للغاية لتنظيم وتصنيف البيانات. لسوء الحظ ، لا يمكن لأي متصفح أن يدعم كل هذه الأنواع بشكل جيد.
بالإضافة إلى الزر الأصلي ، النص ، إرسال ، مربع الاختيار ، الراديو ، تحديد ، كلمة المرور ، يضيف HTML5 أنواع الإدخال الجديدة التالية:
اللون: اللونتواريخ مختلفة: التاريخ ، DateTime ، DateTime-Local ، شهر ، أسبوع ، الوقت
البريد الإلكتروني: البريد الإلكتروني
الرقم: الرقم
يتراوح
البحث: البحث
الهاتف: هاتف
نوع عنوان URL: URL
يمكنك تشغيل المثال التالي لعرض حالة دعم المتصفحات المختلفة:
<form action = "demo_form.asp">
حدد لونك المفضل: <input type = "color" name = "favcolor" />
عيد ميلاد: <إدخال type = "date" name = "bday" />
عيد ميلاد (التاريخ والوقت): <إدخال type = "dateTime" name = "bdaytime" />
عيد ميلاد (التاريخ والوقت): <إدخال نوع = "DateTime-Local" name = "bdaytime" />
عيد ميلاد (شهر وسنة): <إدخال نوع = "شهر" name = "bdaymonth" />
حدد وقتًا: <إدخال type = "time" name = "usr_time" />
حدد أسبوعًا: <input type = "week" name = "week_year" />
الكمية (بين 1 و 5): <إدخال type = "number" name = "Quantity" min = "1" max = "5" />
الكمية (بين 1 و 10): <إدخال نوع = "المدى" name = "نقاط" min = "1" max = "10" />
بحث Google: <input type = "search" name = "googlesearch" />
الهاتف: <إدخال type = "tel" name = "usrtel" />
أضف صفحتك الرئيسية: <input type = "url" name = "HomePage" />
البريد الإلكتروني: <إدخال type = "البريد الإلكتروني" name = "usremail" />
<input src = "submitbutton.png" type = "submit" />
</form>
فيما يلي خصائص الإدخال المضافة حديثًا:
الإكمال التلقائي : عرض المعلومات التي تم إدخالها مسبقًا تلقائيًا ، مع تشغيل القيمة أو إيقافها. ينطبق على النص والبحث وعنوان URL و TEL والبريد الإلكتروني وكلمة المرور وموظفي DatePickers والنطاق وأنواع الألوان. التركيز التلقائي : الحصول على التركيز تلقائيًا بعد تحميل الصفحة. النموذج : يحدد النموذج الذي ينتمي إليه المدخلات ، والتي يمكن أن تكون متعددة. التنسيق : يحدد الصفحة (url) أو الملف الذي يعالج هذا الإدخال بعد إرسال النموذج. formenctype : يحدد كيفية ترميز البيانات بعد تقديم النموذج. FormMethod : يحدد طريقة HTTP لإرسال بيانات النموذج ، والتي ستجاوز طريقة HTTP للنموذج المقابل. FormNovalidate : لا يتم فحص صحة البيانات قبل التقديم. FormTarget : يحدد مكان عرض محتوى النموذج بعد التقديم. الارتفاع والعرض : طول مربع الإدخال وعرضه ، ينطبق فقط على أنواع الصور. الحد الأقصى ، الدقيقة : الحد الأقصى والحد الأدنى لقيم الإدخال. ينطبق على رقم ذي معنى ونطاق وأنواع التاريخ. متعددة : ما إذا كنت للسماح بإدخال قيم متعددة ، ومناسبة لأنواع البريد الإلكتروني والملفات. النمط : يحدد التعبير العادي للتحقق من قيمة الإدخال ، القابلة للتطبيق على النص ، البحث ، عنوان URL ، هاتف ، البريد الإلكتروني ، كلمة المرور. العنصر النائب : المعلومات المطالبة قبل الإدخال ، قابلة للتطبيق على النص ، البحث ، عنوان URL ، هاتف ، بريد إلكتروني ، كلمة مرور. مطلوب : سواء كان ذلك مطلوبًا ، إذا لم يكن مطلوبًا ، فلا يمكن تقديم النموذج. ينطبق على النص ، البحث ، عنوان URL ، هاتف ، البريد الإلكتروني ، كلمة المرور ، ملتزمات التاريخ ، الرقم ، مربع الاختيار ، أنواع الراديو ، وأنواع الملفات. الخطوة : أدخل قيمة الخطوة عند النمو تلقائيًا ، مناسبة للرقم ، النطاق ، التاريخ ، وقت البيانات ، أنواع البيانات المحلية ، الشهر ، الوقت والأسبوع. القائمة : يجب استخدام قائمة المرشحين لعناصر الإدخال بالاقتران مع عنصر أخصائي البيانات. يمكن استخدام سمة القائمة في هذه الأنواع: النص ، البحث ، عنوان URL ، الهاتف ، البريد الإلكتروني ، التاريخ ، الرقم ، النطاق ، واللون. ويقدر أنها صالحة على Firefox. انظر مثال صغير:<fieldset>
<legend> المفضلات </legend>
<p>
<blabel>
<type type = "text" name = "المفضلة" قائمة = "الخيارات">
<Datalist ID = "Options">
<خيار القيمة = "A">
<value Option = "B">
<value Option = "C">
</datalist>
</label>
</p>
</fieldset>
يحاول المثال التالي استخدام خصائص مختلفة ، والتي يمكن تشغيلها في متصفحات مختلفة لعرض التأثير الفعلي:
<form action = "demo_form.asp">
البريد الإلكتروني: <إدخال type = "البريد الإلكتروني" name = "البريد الإلكتروني"
الصورة: <إدخال type = "image" src = "img_submit.gif"/>
أدخل تاريخًا قبل 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">
أدخل تاريخًا بعد 2000-01-01: <type type = "date" name = "bday" min = "2000-01-02">
الكمية (بين 1 و 5): <إدخال type = "number" name = "Quantity" min = "1" max = "5" />
حدد "الصور
رمز البلد: <إدخال type = "text" name = "country_code" pattern = "[A-ZA-Z] {3}" />
الاسم الأول: <إدخال type = "text" name = "fname" placeholder = "first name" />
اسم المستخدم: <إدخال type = "text" name = "usrname" مطلوب = "مطلوب" />
الرقم: <إدخال type = "number" name = "points" step = "3" />
<نوع الإدخال = "إرسال" />
<type type = "إرسال" format = "demo_admin.asp" value = "إرسال كمسؤول" />
<type type = "submit" formulactype = "multipart/form-data" value = "submit as multipart/form-data"/>
<type type = "submit" formula = "post" format = "demo_post.asp" value = "إرسال باستخدام post" />
<type type = "إرسال" formnovalidate = "formNovalidate" value = "إرسال بدون صحة" />
<type type = "submit" formtarget = "_ blank" value = "إرسال إلى نافذة جديدة" />
</form>
<form action = "demo_form.asp" id = "form1">
الاسم الأول: <إدخال type = "text" name = "fname" />
<type type = "إرسال" value = "إرسال" />
</form>
الاسم الأخير: <إدخال type = "text" name = "lname" form = "form1" />
اقتراح: على الرغم من أن جميع المتصفحات لا تدعم جميع الأنواع ، إلا أنك لا تزال مشجعة على استخدام هذه الأنواع الجديدة ، لأنه حتى لو لم يدعمها المتصفح ، فإنه سيتحول إلى مربع إدخال نص بسيط. المرجع العملي: W3C البرنامج التعليمي: http://www.w3schools.com/html5/default.aspإرشادات HTML5 الرسمية: http://dev.w3.org/html5/html-author/
موقع دليل جيد جدًا: http://html5doctor.com/
html5 التعليمي الصيني: http://www.html5china.com/
مدونة واجهة أمامية جيدة: http://www.pjhome.net/default.asp؟cateid=1
المعرفة ذات الصلة حول نماذج تشغيل JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html