English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
تتضمن HTML5 عدة عناصر وخصائص تتعلق بالنموذج.
تحتوي HTML5 على العناصر الجديدة التالية للنموذج:
<datalist>
<keygen>
<output>
ملاحظة:ليس جميع المتصفحات يدعمون العناصر الجديدة في النموذج في HTML5، ولكن يمكنك استخدامهم، حتى لو لم يدعم المتصفح خصائص النموذج، يمكن أن تظهر العناصر كعناصر نموذج تقليدية.
يحدد عنصر <datalist> قائمة الخيارات للمجال الإدخالي.
يحدد خاصية <datalist> وظيفة التكامل التلقائي للنموذج أو مجال الإدخال. عند بدء المستخدم في إدخال النص في مجال الإدخال التلقائي، يجب على المتصفح عرض الخيارات المملوءة في المجال:
استخدام خاصية القائمة في عنصر <input> مرتبطة بجسم العنصر <datalist>.
<input> العنصر يستخدم القيم المسبقة المحددة من <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="languages" name="language"> <datalist id="languages"> <option value="C++"> <option value="PHP"> <option value="Golang"> <option value="Python"> <option value="Ruby"> </datalist> <input type="submit"> </form> <p><strong>ملاحظة:</strong> Internet Explorer 9 (أو إصدارات IE الأقدم)، Safari لا يدعم علامة <datalist>.</p> </body> </html>اختبار لرؤية <›/›
دور علامة <keygen> هو تقديم طريقة موثوقة للتحقق من هوية المستخدم.
علامة <keygen> تعين حقل مولد المفاتيح للنموذج.
عند تقديم النموذج، يتم إنشاء اثنين من المفاتيح، واحدة للمفتاح الخاص والأخرى للمفتاح العام.
المفتاح الخاص (private key) يتم تخزينه على الجهاز المستخدم، بينما يتم إرسال المفتاح العام (public key) إلى الخادم. يمكن استخدام المفتاح العام لتحقق من الشهادات العملاء (client certificate) لاحقاً.
نموذج يحتوي على حقل <keygen>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</title> </head> <body> <form action="demo_form.php" method="get"> اسم المستخدم: <input type="text" name="username"> التشفير: <keygen name="security_keygen"> <input type="submit"> </form> <p><strong>ملاحظة:</strong> Internet Explorer لا يدعم علامة <keygen>.</p> </body> </html>اختبار لرؤية <›/›
<output> علامة تستخدم لتصريف أنواع مختلفة من البيانات، مثل النتائج الحسابية أو النصوص البرمجية:
النتائج الحسابية يتم عرضها في علامة <output>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</title> </head> <body> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <p><strong>ملاحظة:</strong> Internet Explorer لا يدعم علامة output.</p> </body> </html>اختبار لرؤية <›/›
<!doctype html> <html> <head> <meta charset="utf-8"> <title>نماذج الذكاء في Html5 oldtoolbag.com</title> </head> <body> <form action="demo-form.php"> <fieldset> <legend>نماذج الذكاء في Html5</legend> <label for="email"> بريد إلكتروني：<input type="email" name="email" id="email"/> </label> <label for="tel"> هاتف:<input type="tel" name="tel" id="tel"/> </label> <label for="url"> رابط:<input type="url" name="" id="url"/> </label> <label for="number"> رقم:<input type="number" name="" id="number" step="3"/> </label> <label for="search"> بحث:<input type="search" name="" id="search"/> </label> <label for="range"> نطاق:<input type="range" name="" id="range" value="60" min="0" max="100"/> </label> <label for="color"> لون:<input type="color" name="" id="color"/> </label> <label for="time"> وقت:<input type="time" name="" id="time"/> </label> <label for="date"> تاريخ:<input type="date" name="" id="date"/> </label> <label for="month"> month:<input type="month" name="" id="month"/> </label> <label for="week"> week:<input type="week" name="" id="week"/> </label> <input type="submit" value="إرسال"/> </fieldset> </form> </body> </html>اختبار لرؤية <›/›
| العلامة | الوصف |
| <datalist> | تعريف العلامة <input> لقائمة الخيارات. استخدم العنصر هذا مع العنصر input لتعريف القيم المحتملة للإدخال. |
| <keygen> | يحدد العلامة <keygen> حقل مولد الأزواج المفتاحية المخصص للنموذج. |
| <output> | يحدد العلامة <output> أنواع مختلفة من الإخراج، مثل إخراج السكربت. |