السلام عليكم، سنشمل في هذا الدرس كل ما يتعلق بالإستمارات في HTML، حيث سنتعرف بالتفصيل على العناصر المساهمة في إنشاءها و هم :
* العنصر 'FORM'
* العنصر 'INPUT'
* العنصر 'TEXTAREA'
* العناصر 'SELECT' و 'OPTION' و 'OPTGROUP'
* العنصر 'OUTPUT'
* العنصر 'DATALIST'
* العنصر 'LABEL'
* العنصران 'FIELDSET' و 'LEGEND'
ما هي الإستمارات في HTML ؟
تتكون الإستمارة من حقول الإدخال و خيارات التفعيل و الأدوات و الأزرار، و تخول استقبال بيانات المستخدمين كاستمارة التسجيل في المواقع و التطبيقات أو استمارات الإتصال بالدعم أو ما شابه... حيث أن المستخدم يملأ الإستمارة بالبيانات، ثم بضغطه على زر الإرسال، تذهب هذه البيانات إلى صفحة بلغة معلوماتية كـ PHP و ASP و Python في المخدم (Server) للمعالجة، بعدها ترسَل إلى صفحة أخرى بنظام تسيير قاعدة البيانات (Database) كـ SQL و MySQL في المخدم أيضاً للحفظ.
دائما يجب الأخذ بعين الإعتبار أنه ليس كل البيانات المستقبَلة صحيحة، لذا يجب تأمين الإستمارات قبل فعل أي إجراء بهذه البيانات، و هذا من أجل تفادي أن تستقبل بيانات غير مرغوب فيها كأكواد برمجية قصد التخريب أو معرفة معلومات حساسة أو سرقة بيانات المستخدمين كما وقع لأشهر مواقع التواصل الإجتماعي أو شيء من هذه الأفعال المشينة.
العنصر FORM
هو عبارة عن عنصر من نوع Block و ثنائي الأوسمة حيث أنه هو العنصر المسؤول عن إنشاء الإستمارة، و يقحَم بين وسميه جميع العناصر المتعلقة بالإستمارة، لديه ثمان سمات (Attributes) خاصة و هم :
• ACTION
• METHOD
• NAME
• TARGET
• NOVALIDATE
• AUTOCOMPLETE
• ENCTYPE
• ACCEPT-CHARSET
السمة ACTION
هي السمة المسؤولة عن تحديد الصفحة في المخدم التي ترسَل إليها بيانات الإستمارة، و تسمى هذه الصفحة بـ Form-handler، و يقحم في قيمتها مسار الصفحة المرسَلة إليها البيانات استناداً بقاعدة المسارات التي رأيناها في درس الصور، و تعتبر أساسية حيث بغيابها في العنصر سترسل البيانات إلى الصفحة ذاتها.
السمة METHOD
هي سمة أساسية أيضاً في عنصر 'FORM'، و تخول تحديد طريقة إرسال البيانات إلى المخدم، لديها قيمتين خاصتين وهما :
- GET : هي القيمة التلقائية للسمة، و تبعت البيانات إلى المخدم عبر البروتوكول 'HTTP' حيث تظهر البيانات المرسَلة في الرابط، لذا يحبَّذ عدم إنشاء استمارات ترسل بيانات سرية ككلمات المرور و معلومات البطاقات المسبقة الدفع بطريقة هذه القيمة، حجم البيانات المرسلة بهذه الطريقة لا يتعدى 2048 character.
- POST : تبعث هذه القيمة البيانات إلى المخدم عن طريق Body، و بالتالي لن تظهر البيانات المرسلة في الرابط، أي ترسل البيانات سرّاً، أما حجم البيانات المرسلة بهذه الطريقة فهو غير محدود.
السمة NAME
تعتبر هذه السمة أساسية في حالة تعدد عناصر 'FORM' في نفس الصفحة، و تستعمل سوى لتمييز العنصر 'FORM' المقحمة داخله عن باقي العناصر 'FORM' الأخرى في المخدم، يقحم في قيمتها كلمة شاذة عن باقي قيم عناصر 'FORM' الأخرى.
السمة TARGET
تحدِّد هذه السمة طريقة فتح الصفحة الهدف بعد النقر على زر الإرسال من طرف المستخدم، و هذا فقط في حالة ما إذا كانت مبرمَجة من أجل توجيه الناقر إلى مكان آخر كالذي تفعله استمارات Sign Up و Log In و غيرها... لديها خمس قيم خاصة و هم :
- SELF_ : هي القيمة التلقائية للسمة حيث تفتح الصفحة الهدف في نفس علامة التبويب لمتصفح الإنترنت.
- BLANK_ : تفتح الصفحة الهدف في علامة التبويب جديدة على نفس متصفح الإنترنت.
- PARENT_ : تفتح الصفحة الهدف في الفريم المحتوي للفريم الذي توجد فيه الإستمارة.
- TOP_ : تفتح الصفحة الهدف في أكبر فريم محتوي للفريم الذي توجد فيه الإستمارة.
- Framename : تفتح الصفحة الهدف في الفريم المقحم إسمه في قيمة السمة 'TARGET'
السمة NOVALIDATE
هي عبارة عن سمة بولينية (Boolean Attribute) أو ما تعرف بسمة ذات قيمة منطقية، و السمة البولينية هي سمة ذات تأثير وحيد حيث عند تواجدها في العنصر يفعَّل تأثيرها، و عند غيابها يعطَّل تأثيرها، و يقحَم سوى اسمها أو يقحَم فراغ بين Cotations قيمتها أو يقحَم اسمها بين Cotations قيمتها؛ تخوِّل السمة 'NOVALIDATE' عدم التحقق من البيانات عند إرسالها.
السمة AUTOCOMPLETE
تأمر هذه السمة متصفح الإنترنت بإظهار اقتراحات أثناء تحرير المستخدم في حقول الإدخال، و تكون هذه الإقتراحات عبارة عن كلمات أو جمل سبق و حررها المستخدم في خانات شبيهة بالخانة التي يحرر داخلها، لذا سُمّيََت بـ Autocomplete أي الإكمال التلقائي، لها قيمتين خاصتين و هما :
- ON : هي القيمة التلقائية للسمة حيث تفعِّل الإكمال التلقائي في الإستمارة.
- OFF : تعطِّل الإكمال التلقائي في الإستمارة.
تحتوي بعض المتصفحات على خيار تفعيل أو تعطيل هذا التأثير في إعداداتها.
السمة ENCTYPE
تحدِّد هذه السمة نوع التشفير في بيانات الإستمارة المرسَلة إلى المخدم، و تستعمل سوى في الإرسال بطريقة Post، لديها ثلاث قيم خاصة و هم :
- APPLICATION/X-WWW-FORM-URLUNCODED : هي القيمة التلقائية للسمة حيث تشفِّر البيانات، و ذلك بتحويل الفراغات إلى علامة الزائد (+) و تحويل Special Characters إلى قيمها بالأساس الست عشري (Hexadecimal).
- MULTIPART/FORM-DATA : هي قيمة لا تشفر البيانات، و غالباً ما تُستعمل في حالة ما إذا كان هناك رفع الملفات إلى الإستمارة ثم إرسالها، مما يجعل عدم تشفير الملفات يحافظ على صيغتها من أجل المعالجة.
- TEXT/PLAIN : تحول الفراغات إلى علامة الزائد.
السمة ACCEPT-CHARSET
تحدِّد هذه السمة نوع الترميز المستعمل في إرسال البيانات من الإستمارة إلى المخدم، قيمتها التلقائية هي 'UNKNOWN' حيث تحدِّد نوع الترميز المستعمَل في العنصر المحتوي للإستمارة، و يقحَم في قيمتها نوع الترميز المراد استعماله في إرسال البيانات، لكن يجب الأخذ بعين الإعتبار دعم نوع الترميز من طرف متصفحات الإنترنت، و أيضاً يجب العلم بأن التشفير يتغير حسب نوع الترميز، و بالتالي فإذا كانت البيانات المراد إدخالها في الإستمارة تحتوي على ASCII Characters أو ما تُعرف تقنياً بـ American Standard Code for Information Interchange (هذا جدول لفهم Characters ASCII) المرجو استعمال أنواع الترميز Unicode، و أقواهم UTF-8، أما إذا كانت تحتوي على أحرف لاثينية Latin، فالمرجو استعمال أنواع الترميز ISO-8859، و أقواهم إما ISO-8859-1 أو ISO-8859-15، و يمكن الإستعانة بهذه الصفحة حيث تقدم مقارنة بين أقوى الترميزات في البرمجة.
العنصر INPUT
هو عبارة عن عنصر يتيم من نوع Inline يقحم داخل عنصر 'FORM'، و يخول إنشاء اثنين و عشرون نوعاً منها حقول إدخال النصوص، أزرار، صناديق الإختيار و أدوات كالرفع و غيرها... و ما يحدِّد النوع هم قيم سمة بإسم 'TYPE' بحيث أن هذه الأخيرة تعتبر أساسية في عنصر 'INPUT'، و أيضاً هناك سمة أساسية بإسم 'NAME' حيث بدونها لن يرسَل البيان إلى المخدم، زيادة على هاتين السمتين، يتوفر عنصر 'INPUT' على سبعة و عشرون سمة منها التي هي مخصصة لنوع واحد من Input، أو لأنواع محددة، أو لجميع الأنواع، و منها أيضاً التي لديها تأثيرات مختلفة حيث سيتم شرح تأثيرها مع نوع Input، و منها التي لديها تأثير وحيد حيث سيتم شرحها محايدة في شطر مخصص لها في هذا الدرس، يقبل أيضاً عنصر 'INPUT' الأحداث البرمجية و المعروفة بالـ Events.
أنواع Input
النوع Text
هذا النوع ممثَّل بقيمة 'TEXT' حيث هذه الأخيرة هي القيمة التلقائية للسمة 'TYPE'، أي أن في حالة عدم تواجد السمة 'TYPE' في عنصر 'INPUT' سيكون نوعه هو النوع Text، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد.
هناك سمة تعمل في جميع أنواع Input لكن تأثيرها يتغير حسب ماهية الحقل، ففي الحقول إدخال النصوص يكون ما كُتِب في قيمتها ظاهراً في الحقل، تسمى هذه السمة بـ 'VALUE'.
النوع Search
هذا النوع ممثَّل بقيمة 'SEARCH'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بكلمات مفتاحية قصد البحث عنها.
النوع Tel
هذا النوع ممثَّل بقيمة 'TEL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء برقم الهاتف، يظهِر هذا النوع لوحة المفاتيح الرقمية في أجهزة الهواتف و الطابليت.
النوع URL
هذا النوع ممثَّل بقيمة 'URL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بعنوان URL لصفحة في الويب، و عند محاولة إرسال صيغة خاطئة لعنوان URL، يظهِر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة إقحام عنوان URL صحيح.
النوع Email
هذا النوع ممثَّل بقيمة 'EMAIL'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بعنوان البريد الإلكتروني، و عند محاولة إرسال عنوان بريد إلكتروني بدون علامة At (@)، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام علامة At في البيان، و عند محاولة إرسال عنوان بريد إلكتروني بدون إسم نطاق، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام إسم نطاق في البيان.
النوع Password
هذا النوع ممثَّل بقيمة 'PASSWORD'، و هو عبارة عن حقل إدخال نصي مكوَّن من سطر واحد، و يُستخدم للإدلاء بكلمة المرور، و يظهر كل حرف مقحم في هذا الحقل عبارة عن نقطة سوداء أو علامة Asterisk (*).
النوع Submit
هذا النوع ممثَّل بقيمة 'SUBMIT'، و هو عبارة عن زر مخصص لإرسال بيانات الإستمارة إلى Form-handler للمعالجة أو إلى مكان سكربت بلغة معلوماتية قصد برمجتها أو شيء من هذا القبيل.
يكتب في قيمة السمة 'VALUE' ما يظهر من نص في الأزرار.
النوع Reset
هذا النوع ممثَّل بقيمة 'RESET'، و هو عبارة عن زر إذا نُقر عليه يُرجع الإستمارة إلى وضعها الإفتراضي، و كأن لو أعيد تدوير الصفحة المتواجدة بها الإستمارة.
النوع Image
هذا النوع ممثَّل بقيمة 'IMAGE'، و هو عبارة عن زر جرافيكي مكوَّن بصورة إذا نقِر عليها سترسل إحداثيتا مكان النقرة في الصورة، حيث أن X هي إحداثية العرض، و تحسَب بالبكسل (px) من يسار الصورة إلى يمينها، أما Y فهي إحداثية الإرتفاع، و تحسَب بالبكسل (px) من أعلى الصورة إلى أسفلها، و لدى هذا النوع أيضاً أربع سمات رأيناها في درس الصور ألا و هن السمتين الإجباريتين 'SRC' و 'ALT'، و السمتين الإختيارين 'WIDTH' و 'HEIGHT'.
النوع Button
هذا النوع ممثَّل بقيمة 'BUTTON'، و هو عبارة عن زر في الوضع الإفتراضي له لا يعمل شيئاً، لذا يجب مرافقته بسكربتات لغات برمجية كـ Javascript لجعله فعال، غالباً ما يقحموا فيه المطورون الأحداث البرمجية.
النوع Number
هذا النوع ممثَّل بقيمة 'NUMBER'، و هو عبارة عن حقل إدخال الأعداد.
يقبل سمة بإسم 'STEP' حيث يقحَم في قيمتها عدد يمثل عدد خطوات الإنتقال عند التعديل على محتوى الحقل، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.
و يقبل سمة بإسم 'MIN' حيث يقحَم في قيمتها عدد يمثل أصغر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.
و يقبل سمة بإسم 'MAX' حيث يقحَم في قيمتها عدد يمثل أكبر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.
النوع Range
هذا النوع ممثَّل بقيمة 'RANGE'، و هو عبارة عن حقل إدخال عدد بواسطة سلم سعته التلقائية 100 و دقته التلقائية 1.
يقبل أيضاً السمة 'STEP' حيث تحدِّد دقة Range، أي بكم ينتقل من خطوة إلى الخطوة الموالية، و يقبل أيضاً السمة 'MIN' حيث تحدِّد أدنى عدد في Range، و يقبل أيضاً السمة 'MAX' حيث تحدِّد أقصى عدد في Range، أي سعته.
النوع Time
هذا النوع ممثَّل بقيمة 'TIME'، و هو عبارة عن حقل إدخال التوقيت، أي الساعة و الدقيقة، و دقته التلقائية هي دقيقة واحدة، بمعنى عند التعديل فيه يتحرك التوقيت بدقيقة واحدة.
يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدِّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.
و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى توقيت متاح بنظام 24 ساعة، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.
و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى توقيت متاح بنظام 24 ساعة أيضاً، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.
النوع Date
هذا النوع ممثَّل بقيمة 'DATE'، و هو عبارة عن حقل إدخال التاريخ اليومي، أي اليوم و الشهر و السنة، و دقته التلقائية هي يوم واحد.
يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد يحدِّد الأيام المتاحة، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : اليوم-الشهر-السنة
النوع Week
هذا النوع ممثَّل بقيمة 'WEEK'، و هو عبارة عن حقل إدخال التاريخ الأسبوعي، أي رقم الأسبوع في السنة كذا مثلاً، و دقته التلقائية هي أسبوع واحد.
يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد يحدِّد دقة الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.
و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.
أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الأسبوعW-السنة
النوع Month
هذا النوع ممثَّل بقيمة 'MONTH'، و هو عبارة عن حقل إدخال التاريخ الشهري، أي إسم الشهر في السنة كذا مثلاً، و دقته التلقائية هي شهر واحد.
يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد يحدِّد دقة الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.
و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.
أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الشهر-السنة
النوع Datetime-local
هذا النوع ممثَّل بقيمة 'DATETIME-LOCAL'، و هو عبارة عن حقل إدخال التاريخ الإجمالي، أي السنة و الشهر و اليوم و الساعة و الدقيقة و الثانية و العشر ثانية و الجزء من المائة للثانية و الجزء من الألف للثانية، علماً أن دقة الحقل التلقائية هي دقيقة واحدة.
يقبل السمة 'STEP' حيث تحدِّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدِّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.
أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي :
dscsms.الثانية:الدقيقة:الساعةTاليوم-الشهر-السنة
النوع Checkbox
هذا النوع ممثَّل بقيمة 'CHECKBOX'، و هو عبارة عن صناديق الإختيار أو ما تعرف بخيارات التفعيل، حيث يمكِّن هذا النوع المستخدم من تفعيل خيار أو أكثر من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكِّن المخدم من التعرف عليها عند الإرسال.
يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار مفعَّلاً تلقائياً بعد إعادة تدوير الصفحة.
النوع Radio
هذا النوع ممثَّل بقيمة 'RADIO'، و هو عبارة عن صناديق الإختيار، حيث يمكِّن هذا النوع المستخدم من تفعيل خيار واحد من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكِّن من التعرف عليها من طرف المخدم عند الإرسال.
يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار مفعَّلاً تلقائياً بعد إعادة تدوير الصفحة.
النوع File
هذا النوع ممثَّل بقيمة 'FILE'، و هو عبارة عن آداة رفع الملفات يتم النقر عليها من طرف المستخدم لتنبثق نافذة الرفع تمكنه من تحديد الملف المراد رفعه، ثم بالنقر على "Ouvrir / Open" يتم رفع الملف إلى المتصفح من أجل الإرسال للمعالجة في المخدم.
يقبل هذا النوع سمة خاصة بإسم 'ACCEPT'، و هي سمة تحدّد أنواع ملفات الميديا المرخص لها أن ترفَع في الآداة، و في قيمتها إمتدادات ملفات الميديا و أنواع MIME لملفات الميديا (هذه صفحة في ويكيبيديا تشرح أنواع MIME لملفات الميديا) و في حالة التعدد، تُفرَق القيم بعلامة Comma (,).
للتذكير يجب إقحام السمة 'ENCTYPE' و في قيمتها القيمة 'MULTIPART/FORM-DATA' بهدف عدم تشفير الملفات عند إرسالها للمعالجة، و طبعاً طريقة الإرسال 'POST'.
النوع Color
هذا النوع ممثَّل بقيمة 'COLOR'، و هو عبارة عن آداة Color Picker يتم النقر عليها من طرف المستخدم لتنبثق نافذة الألوان تمكِّنه من تحديد اللون المراد إرساله، ثم بالنقر على "OK" يتم اختيار اللون من أجل الإرسال للمعالجة في المخدم، علما أن اللون يتم إرساله بصيغة Hexadecimal.
سمة 'VALUE' في هذا النوع تحدد اللون التلقائي الذي يظهر في الآداة، و يقحم في قيمتها إسم اللون بصيغة Hexadecimal.
النوع Hidden
هذا النوع ممثَّل بقيمة 'HIDDEN'، و هو عبارة عن آداة مختفية في الإستمارة، مخصصة لإرسال بيانات برمجية إلى المخدم مخصصة من طرف المطور، فمثلاً إذا كانت مقحمة في قيمة 'NAME' لديها قيمة '_CHARSET_' سيبعث نوع الترميز المستعمل في إرسال بيانات الإستمارة إلى المخدم، بحيث يمكن التعديل على نوع الترميز المستعمل عبر السمة 'ACCEPT-CHARSET'.
الفيديو التوضيحي للدرس
سمات العنصر INPUT
يتوفر عنصر 'INPUT' على ثلاثون سمة منها الأساسية كـ 'TYPE' و 'NAME' و 'VALUE'، و منها الثانوية حيث تنقسم إلى قسمين، قسم السمات المتعددة التأثير التي رأيناها أعلاه، و قسم السمات الأحادية التأثير التي سنراها الآن.
السمة AUTOFOCUS
هي سمة بولينية تجعل متصفح الإنترنت يركز على حقل الإدخال مباشرة بعد إعادة تدوير الصفحة، و تعمل هذه السمة في جميع أنواع Input.
السمة DISABLED
هي سمة بولينية تعطل حقل الإدخال و تمنع إرساله إلى المخدم، و تعمل هذه السمة في جميع أنواع Input.
السمة READONLY
هي سمة بولينية تجعل حقل الإدخال غير قابل للتعديل، بمعنى قابل سوى للقراءة و التحديد و النسخ، و هذا لا يمنع إرساله إلى المخدم، و تعمل هذه السمة في جميع أنواع Input.
السمة REQUIRED
هي سمة بولينية تجعل ملء حقل الإدخال إجباري، ففي حالة الإرسال مع عدم ملء الحقل، يُظهر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة ملء حقل الإدخال، و تعمل هذه السمة في جميع أنواع Input.
السمة MULTIPLE
هي سمة بولينية تجعل الحقل متعدد الإدخال، و تعمل سوى في Input من النوع Email و Input من النوع File، حيث أن في Input من النوع Email تسمح السمة بإدخال العديد من عناوين البريد الإلكنروني مع ضرورة فصلها بعلامة Comma، و في Input من النوع File تسمح السمة برفع أكثر من ملف.
السمة FORM
هي سمة تجعل Input خارج عنصر 'FORM' معين ينتمي إليه، و ذلك بإقحام قيمة السمة 'ID' لعنصر 'FORM' في قيمة السمة 'FORM' في Input، و تعمل هذه السمة في جميع أنواع Input.
السمة DIRNAME
هي سمة تحدِّد إتجاه لغة البيان في Input، يقحَم في قيمتها قيمة السمة 'NAME' تم كلمة 'dir' مفروفتين إما بنقطة (.) أو علامة Dash (-)، و تعمل هذه السمة في Input من نوع Text و في Input من نوع Search.
السمة PATTERN
تجعل هذه السمة ضرورة ملء حقل الإدخال بصيغة معينة تقحم في قيمتها برموز Regular Expressions و المعروفة بـ RegEx، و إذا لم يتم ملء حقل الإدخال بالصيغة المخصصة بقيمة السمة 'PATTERN'، يظهِر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة ملء حقل الإدخال بالصيغة المخصصة، و تعمل هذه السمة في جميع حقول إدخال النصوص (Password , Email , URL , Tel , Search , Text) و ترافق هذه السمة السمة 'TITLE' حيث تمكِّن هذه الأخيرة من إضافة محتوى نصي إلى رسالة التحقق، و ذلك عبر إقحامه في قيمة السمة 'TITLE'، و للإشارة فتواجد السمة 'NOVALIDATE' في عنصر 'FORM' يعطل تأثير هذه السمة.
Regular Expressions
تعتبر RegEx مفتاح معرفة لغات معلوماتية قوية في التطوير و البرمجة، فهذا الموقع يشمل كل ما يتعلق بها من ناحية المعلومة، أما التدريب فالحيز الزمني [من 01:25:16 إلى 02:41:06] للفيديو التوضيحي للدرس يشرح شرحاً صائباً استناداً بآداة regex.101، لكن هذا لا يمنع الشرح الكتابي من سرد أساسياتها، أولاً يجب فهم بعض المصطلحات كـ Matching، و تعني استهداف، أي أن RegEx تستهدف ASCII Characters بترتيب معين و بكم معين، و كـ String، و هي مجموعة من RegEx تستهدف كم و ترتيب معينين، و كـ Quantifiers، و هي محددات كمية Characters المراد عمل لها Matching، يوضح الجدول أسفله تأثير RegEx الأكثر تداولاً من طرف المطورين :
| RegEx | تأثير Matching |
|---|---|
| [abc] | أي Character داخل قوسي Brackets المثال : a و b و c صغار |
| [abc^] | جميع Characters ماعدا التي داخل قوسي Brackets المثال : جميع Chracters ماعدا a و b و c صغار |
| [a-z] | مجال استهداف [إلى-من] حسب ASCII Table المثال : من a إلى z |
| [*-!^] | مجال عدم استهداف [إلى-من] حسب ASCII Table المثال : جميع Chracters ماعدا من ! إلى * |
| [A-Za-c] | تعدد مجالات الإستهداف المثال : من a إلى z و من A إلى Z |
| . | جميع Characters |
| s\ | جميع أنواع الفراغات : - الفراغ من نوع Space - الفراغ من نوع Tab - الرجوع إلى السطر |
| S\ | جميع Characters ماعدا أنواع الفراغات |
| d\ | جميع الأعداد |
| D\ | جميع Characters ماعدا جميع الأعداد |
| w\ | - جميع الأعداد - جميع الحروف الصغيرة - جميع الحروف الكبيرة - علامة Underscore (_) |
| W\ | جميع Characters ماعدا : - جميع الأعداد - جميع الحروف الصغيرة - جميع الحروف الكبيرة - علامة Underscore (_) |
| (..) | ليس بـ Matching لكن القوسين يحددان مجموعة من RegEx |
| (a|b) | (إما و إما) المثال : إما a و إما b |
| ?a | Quantifier ? تعني 1 أو 0 المثال : يجب على a أن تكون مرة واحدة أو منعدمة |
| *a | Quantifier * تعني 0 أو أكثر المثال : يجب على a أن تكون منعدمة أو مرة أو أكثر من مرة |
| +a | Quantifier + تعني 1 أو أكثر المثال : يجب على a أن تكون مرة واحدة أو أكثر من مرة |
| {3}a | Quantifier {} و داخلها عدد تحدد عدد المرات على التوالي المثال : يجب على a أن تكون ثلاث مرات على التوالي |
| {,3}a | Quantifier {} و داخلها عدد ثم Comma تحدد عدد المرات على التوالي أو أكثر المثال : يجب على a أن تكون ثلاث مرات على التوالي أو أكثر |
| {3,7}a | Quantifier {} و داخلها عددين مفصولين بـ Comma تحدد مجال المرات على التوالي المثال : يجب على a أن تكون من ثلاث مرات على التوالي إلى سبع مرات على التوالي |
| ^ | تكون في بداية String |
| $ | تكون في نهاية String |
| b\ | أي Character موجود في بداية الكلمات |
| B\ | أي Character موجود في نهاية الكلمات |
| (x=?) | الإجبار المثال : إلزام ضرورة تواجد x |
السمة PLACEHOLDER
تخول هذه السمة إظهار نص في حقل إدخال النصوص بلون رمادي يختفي عند بداية التحرير في الحقل، و يجب على هذا النص أن يقحم في قيمتها، تعمل هذه السمة في جميع حقول إدخال النصوص.
السمة SIZE
تحدد هذه السمة عرض حقل الإدخال، و ذلك بإقحام في قيمتها عدد يحدد كم من Character سيظهر في الحقل، تعمل هذه السمة في جميع حقول إدخال النصوص.
السمة MINLENGTH
يقحم في قيمتها عدد يحدد عدد Characters الأدنى المرجو إقحامها في حقل الإدخال، و عند محاولة إرسال عدد أحرف أقل من الذي هو مسموح به في الحقل، يُظهر متصفح الإنترنت رسالة التحقق تحث المستخدم بإدخال الحد الأدنى المسموح به من عدد Characters، تعمل هذه السمة في جميع حقول إدخال النصوص.
السمة MAXLENGTH
يقحم في قيمتها عدد يحدد عدد Characters الأقصى المرجو إقحامها في حقل الإدخال، و عند إدخال عدد أحرف يساوي الذي هو مسموح به في الحقل، يتوقف متصفح الإنترنت في إظهار الكتابة الجديدة، تعمل هذه السمة في جميع حقول إدخال النصوص.
السمة FORMACTION
تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'ACTION' في عنصر 'FORM'، أي تحدد وجهة البيانات المرسلة هل إلى Form-handler أو إلى مكان سكربت بلغة معلوماتية أو شيء من هذا القبيل، و يقحم في قيمتها مسار الصفحة المرسَلة إليها البيانات استناداً بقاعدة المسارات، و هذا ما يجعل هذه السمة تخول إنشاء عدة أزرار من نفس النوع في نفس الإستمارة حيث كل زر يوجه البيانات إلى مكان ما.
السمة FORMMETHOD
تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'METHOD' في عنصر 'FORM'، أي تحدد طريقة الإرسال الذي ترسَل به البيانات هل Get أم Post، و لديها نفس قيمتا السمة 'METHOD' مما يجعلها تخول إنشاء زرين من نفس النوع في نفس الإستمارة حيث كل زر يرسل البيانات بطريقة معينة.
السمة FORMENCTYPE
تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'ENCTYPE' في عنصر 'FORM'، أي تحدد نوع تشفير البيانات المرسلة إلى المخدم، و لديها أيضاً القيم الثلاث لسمة 'ENCTYPE' مما يجعلها تخول إنشاء ثلاث أزرار من نفس النوع في نفس الإستمارة حيث كل زر يرسل البيانات بتشفير معين.
السمة FORMTARGET
تعمل هذه السمة في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'TARGET' في عنصر 'FORM'، أي تحدد طريقة فتح الصفحة الهدف بعد النقر، و لديها نفس القيم الخمس لسمة 'TARGET' مما يجعلها تخول إنشاء العديد من الأزرار من نفس النوع في نفس الإستمارة حيث كل زر يفتح الصفحة الهدف بطريقة معينة.
السمة FORMNOVALIDATE
هي سمة بولينية تعمل في Input من نوع Submit و في Input من نوع Image، و لديها نفس تأثير السمة 'NOVALIDATE' في عنصر 'FORM'، أي تخول إرسال البيانات بدون التحقق من الشروط اللازمة لإرسالها.
العنصر TEXTAREA
هو عبارة عن عنصر ثنائي الأوسمة من نوع Inline و يقحم داخل عنصر 'FORM'، و ينشئ حقل إدخال نصي مكون من أكثر من سطر واحد، لديه سمة 'NAME' المسؤولة عن إرسال البيان الخاص به إلى المخدم حيث تعتبر هذه السمة ضرورية.
و لديه سمة أخرى بإسم 'COLS' حيث تحدِّد عرض الحقل، و يقحم في قيمتها عدد يمثل عدد الأحرف المراد إدخالها في سطر واحد مع احتساب Scrollbar العمودية.
و لديه سمة أخرى بإسم 'ROWS' حيث تحدِّد ارتفاع الحقل، و يقحم في قيمتها عدد يمثل عدد الأسطر التي تكون ظاهرة في الحقل، و لديه سمة أخرى بإسم 'WRAP' حيث تحدِّد هل يتم قسم الكلمات التي هي أطول من عرض الحقل أثناء الإرسال أم لا، لدى هذه السمة قيمتين خاصتين و هما 'SOFT' و 'HARD'، الأولى لا تقسم الكلمة أثناء الإرسال حيث أنها القيمة التلقائية للسمة، أما الثانية فتقسم الكلمة أثناء الإرسال.
لدى عنصر 'TEXTAREA' من السمات السابقة الذكر 'READONLY' ، 'PLACEHOLDER' ، 'MAXLENGTH' ، 'MINLENGTH' ، 'FORM' ، 'DISABLED' ، 'DIRNAME' ، 'AUTOFOCUS' و 'REQUIRED'.
العناصر SELECT و OPTION و OPTGROUP
يمكِّن العنصر'SELECT' من إنشاء قائمة منسدلة مكونة من خيارات، و هو عنصر من نوع Inline و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و لديه السمة 'NAME' حيث بدونها لن ترسل بيانات القائمة، و لديه أيضاً السمة 'SIZE' حيث تحدد ارتفاع القائمة، و ذلك بإقحام في قيمتها عدد يحدد عدد الأسطر التي تظهر في القائمة، و لديه كذلك السمة البولينية 'MULTIPLE' حيث تخول تحديد أكثر من خيار، و هو فقط ينشئ القائمة، أما خيارات هذه الأخيرة، فتنشأ عن طريق عنصر 'OPTION'، و هو عنصر ثنائي الأوسمة، و لديه سمتين أساسيتين ألا و هما 'VALUE' و 'LABEL' حيث يقحم في قيمة الأولى ما يذهب من بيان إلى المخدم، و يقحم في قيمة الثانية ما يظهر من خيار منسدل في القائمة، و لديه أيضاً سمة بولينية بإسم 'SELECTED' حيث تجعل الخيار مفعلاً تلقائياً بعد إعادة تدوير الصفحة، أما العنصر 'OPTGROUP' فهو عنصر تنائي الأوسمة، يصلح فقط لجمع مجموعة خيارات في تصنيف واحد حيث تقحم عناصر الخيارات المراد جمعها بين وسميه، و يقبل سمة 'LABEL' حيث يقحم في قيمتها ما يظهر كعنوان التصنيف في القائمة، و هو غير قابل للتحديد، يقبل العناصران 'OPTION' و 'OPTGROUP' السمة 'DISABLED'، فيما يقبل العنصر 'SELECT' السمات 'DISABLED' و 'AUTOFOCUS' و 'REQUIRED' و 'FORM'.
العنصر OUTPUT
هو عبارة عن عنصر من نوع Inline و ثنائي الأوسمة، و يخوِّل إنشاء عمليات حسابية أو مستويات بناء على سكربتات برمجية تقحم عن طريق الأحداث البرمجية في عنصر 'FORM' المنتمي إليه اعتماداً على عناصر متعلقة بالإستمارة كأنواع Input.
العنصر DATALIST
هو عبارة عن عنصر ثنائي الأوسمة، و ينشئ قائمة منسدلة من حقل الإدخال المربوط به و المكوَّن بعنصر 'INPUT'، و أيضاً يعطي اقتراحات الإكمال التلقائي من مكوناته للمستخدمين أثناء تحريرهم في حقل الإدخال المربوط به، و يقحَم خارج عنصر 'FORM' المحتوي لحقل الإدخال المربوط به، أما مكوناته فتقحم بين وسميه عبر العنصر 'OPTION' الذي رأيناه سابقاً، لكن في عنصر 'DATALIST' يقحم سوى وسم فتح العنصر 'OPTION'، و هذا من أجل دعم المتصفحات القديمة لإقتراحات الإكمال التلقائي، يمكن إقحام ما يظهر من مكون في قيمة سمة 'VALUE' لعنصر 'OPTION'، كما يمكن إقحامه سوى بعد وسم فتح العنصر 'OPTION' مع الإستغناء على سمة 'VALUE'، أما من أجل ربط عنصر 'DATALIST' بحقل الإدخال، تقحم السمة 'ID' في عنصر 'DATALIST' بقيمة معينة، ثم تقحم سمة بإسم 'LIST' في العنصر 'INPUT' المسؤول عن إقحام حقل الإدخال المراد ربطه، و في قيمتها قيمة السمة 'ID' المقحمة في عنصر 'DATALIST'، يعمل هذا الأخير في أنواع Text Input و Search و Tel و URL و Email و Number و Range و Time و Date و Week و Month و Datetime-local و Color.
العنصر LABEL
هو عنصر من نوع Inline و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و يمكِّن من إنشاء نص بجانب عناصر الإستمارة، و من أجل ربط عنصر 'LABEL' بعنصر الإستمارة، تقحم في هذا الأخير السمة 'ID' بقيمة معينة، تم يقحم في عنصر 'LABEL' سمة بإسم 'FOR' و في قيمتها قيمة السمة 'ID' المقحمة في عنصر الإستمارة، ثم يُكتب النص المراد وضعه بجانب عنصر الإستمارة داخل وسمي عنصر 'LABEL'.
هناك طريقة أخرى لربط عنصر 'LABEL' بعنصر الإستمارة ألا و هي إقحام النص ثم عنصر الإستمارة بين وسمي عنصر 'LABEL'.
العنصران FIELDSET و LEGEND
يكوِّن عنصر 'FIELDSET' إطار حول عناصر الإستمارة المقحمة بين وسميه، حيث أنه عنصر من نوع Block و ثنائي الأوسمة و يقحم داخل عنصر 'FORM'، و يقبل من السمات السابقة الذكر السمة 'DISABLED' و السمة 'FORM' و السمة 'NAME'، أما عنصر 'LEGEND' فهو مخصص لإنشاء عنوان للإطار، و هو عنصر ثنائي الأوسمة حيث يقحم بين وسميه ما يظهر من نص كعنوان للإطار المكوَّن من طرف العنصر 'FIELDSET'، و هو أول ما يقحَم بين وسمي عنصر 'FIELDSET'.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس