Header Ads

وسوم النماذج الجديدة form



تم إضافة العناصر التالية الى لغة HTML5

<datalist>

<keygen>

<output>

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


الوسم <datalist>


يحدد الوسم <datalist> قائمة من الخيارات المعرفة مسبقاً للوسم <input> .
يستخدم <datalist> لتقديم ميزة autocomplete للوسم <input> حيث سيشاهد المستخدم قائمة منسدلة للعناصر المعرفة مسبقاً الخاصة بوسم الادخال .
ملاحظة : الوسم <datalist> مدعوم من متصفحات الاوبرا و الفايرفوكس فقط .
مثال


<input list="browsers" />

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>





الوسم <keygen>


الهدف من استخدام الوسم <keygen> لتقديم طريقة آمنة للمستخدمين . حيث يخصص الوسم <keygen> موّلد مفاتيح لحقول خاصة بالنماذج .

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

المتصفحات الداعمة


ان وسم <keygen> مدعوم من جميع المتصفحات الرئيسية ماعدا انترنت اكسبلورر .

مثال


<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>




وسم <output>



يستخدم الوسم <output> لتقديم نتيجة حساب معينة تماماً عند استخدام الاكواد البرمجية لعملية الحساب .

المتصفحات الداعمة


ان وسم <output> مدعوم من جميع المتصفحات الرئيسية ماعدا انترنت اكسبلورر .

مثال


<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>




العناصر الجديدة في HTML5


الوسم الشرح
<datalist> يحدد قائمة من الخيارات المعرفة مسبقاً للوسم <input> .
<keygen> موّلد مفاتيح لحقول خاصة بالنماذج
<output> تقديم نتيجة حساب معينة


يتم التشغيل بواسطة Blogger.