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

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

وسوم النماذج الجديدة 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>	تقديم نتيجة حساب معينة

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه