بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
نتابع بإذن الله مع الفورمز، ومزيد من الخصائص والعلامات التي تستخدم معها ، ومن العلامات التي تستخدم لتنظيم الحقول وتقسيمها إلى مجموعات علامة fieldset الزوجية وتستخدم معها علامة زوجية أخرى هي legend وضمنها عنوان المجموعة ، وهذا مثال عليها:
ومن العلامات التي تستخدم مع الفورمز علامة label الزوجية ويكتب ضمنها عنوان الحقل أو المطلوب كتابته في الحقل ، وتستخدم معها خاصية for وتأخذ قيمة المعرف id التابع للحقل وسيأتي شرحه . أهمية label تكمن في ارتباطها بالحقل بحيث ينتقل المؤشر إلى الحقل بمجرد الضغط على label .
خاصية id وخاصية class :
خاصيتان لتسمية العنصر لتمييزه في صفحة html ، يمكن وضعها لأي عنصر كما يمكن تسميته بأي شكل مثلا: test أو abc فقط ينبغي معرفة قاعدة مهمة وهي أن id لا ينبغي أن يتكرر في الصفحة بينما class يمكن أن يتكرر ، فإذا أنشأت عنصرا وأعطيته id سميته abc مثلا فلا ينبغي أن تسمي id آخر لعنصر آخر بهذا الإسم . والخاصيتان تستخدمان في الغالب من أجل التنسيق لاحقا بلغة css والتفاعل مع لغة JavaScript .
وهذا مثال على label :
خصائص مهمة
سأتكلم عنها باختصار وستجد تطبيقها في الأمثلة العملية القادمة.
خاصية name :
تستخدم مع الحقول لإعطاء إسم لكل حقل من أجل استخدامه لاحقا عند برمجة الفورم لإرسال البيانات وتخزينها ، ويمكننا أن نسميها كما نشاء لكن يفضل أن يكون الإسم قريبا من نوعية البيانات التي يرسلها الحقل مثل username و userpass ، وتستخدم هذه الخاصية أيضا مع الروابط وسنرى كيفية ذلك في درس قادم.
خاصية value :
تستخدم لإعطاء قيمة افتراضية للحقل ، وهذه القيمة هي التي تظهر في الحقل عند تحميل الصفحة ، مثلا في حقل إسم المستخدم إذا وضعت value وأعطيتها قيمة 'أكتب إسمك هنا' هذه هي العبارة التي ستظهر في الحقل وتضطر لمسحها ثم كتابة إسمك ، وتستخدم أيضا لتحديد القيمة التي سترسل من الحقل إلى قاعدة البيانات في حالة ما كان الحقل من النوع checkbox أو radio وعند استخدام option التابعة select ، وكذلك لتحديد ما يظهر في زر input من نوع submit .
خاصية placeholder :
مثل value تقريبا مع الفارق ، أولا هي لا تأخذ القيمة الإفتراضية للحقل مثل value ، ولكن توضع لها قيمة نصية تبين للمستخدم ما ينبغي كتابته في الحقل ، وهذا النص يختفي من الحقل بمجرد بدء المستخدم في كتابة النص الخاص به.
خاصية checked :
توضع لها القيمة checked هكذا : checked = checked ، وتستخدم مع input من النوع radio أو checkbox للتأشير إفتراضيا على واحدة منهن.
خاصية readonly :
إذا استخدمت مع حقل ووضعت لها القيمة readonly فهذا الحقل هو للقراءة فقط ولا يمكن الكتابة فيه.
خاصية disabled :
تستخدم لتعطيل حقل بحيث لا يمكن الكتابة فيه ولا قراءة محتواه ، وتوضع لها القيمة disabled .
خاصية maxlength :
تأخذ قيمة رقمية فإذا كانت 6 مثلا فهذا الحقل لن يتسع لأكثر من 6 حروف.
خاصية tabindex :
تستخدم لترتيب الحقول ترتيبا تصاعديا بحيث يسهل التنقل بينها فقط باستخدام زر tab في الكيبورد ، وتأخذ قيم رقمية بالترتيب ، مثلا : 1 - 2 - 3 ....إلخ.
أمثلة عملية
ملف enregister.html :
نظرا لطوله يمكنك تحميله مع باقي الملفات في آخر الدرس ، لقد قمت باستخدام العلامة fieldset لتقسيم الحقول إلى ثلاث مجموعات ، والعلامة table لتنظيم الحقول ، بالإضافة إلى label التي تعلمناها في بداية الدرس فكانت النتيجة كالتالي :
ملف login.html :
ملف search.html :
ملف upload.html :
وفي انتظار الدرس القادم دمتم في رعاية الله وحفظه.