الحقول Forms فى HTML5

كما ذكرنا ف HTML5 قدمت عناصر جديد فى الحقول Forms و كذلك خصائص جديدة للحقول , مما يجعل التعامل مع الحقول اسهل من الاصدرات السابق وسنناقش فى هذا الدرس هذه الخواص والعناصر الجديدة فى Forms ولكن قبل ذلك دعونا نستعرض ما كانت HTML4 تقدمه.

عناصر الادخال HTML4

• text : لحقل يحتوي على نص 
• password : لحقل يتحوي على قم سرى بحيث يتم اخفاء كلمة السر عند الكتابة
• checkbox : اختيار او اكثر من قائمة معدة
• radio : اختيار واحد من بعض العناصر
• submit : لارسال الفورم
• file : لرفع ملف
• hidden : عنصر مخفى عن المستخدم ولكن يحتوي قيمة يمكن الاستفادة منها وارسالها عن طريق طلب من النوع GET او POST
• select : لاختيار من قائمة ولكن مع شكل مختلف عن radio
• textarea : مكان لكتابة نص طويل مثل مكان كتابة التعليقات او المقالة
• button : زر يمكن الاستفادة منه فى عمل اي event له علاقة بالازرار

انظر المثال

See the Pen MVvXMP by amrelarabi (@amrelarabi) on CodePen.

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

• datetime : لتحديد الوقت والتاريخ بالصيغة (year, month, day, hour, minute, second, fractions of a second)
• date : لادخال التاريخ بالصيغة (year, month, day)
• month : لادخال التاريخ المكون من الشهر والسنة
• week : لادخال التاريخ المكون من السنة والاسبوع بالارقام
• time : لادخال الوقت بالصيغة (hour, minute, seconds, fractional seconds)
• number : لادخال رقم ولا يقبل هذا الحقل النصوص فقط الارقام
• range : لتحديد مدى معين 
• email : لادخال بريد الكترونى ولا يقبل هذا الحقل إلا صيغة البريد الالكترونى المتعارف عليها
• url : لادخال رابط URL ولا يقبل هذا الحقل إلا صيغة الروابط المتعارف عليها

مثال 

See the Pen jzLpWp by amrelarabi (@amrelarabi) on CodePen.