دليل مفصل خطوة بخطوة لبدء استخدام نماذج HTML

نظرة عامة

نماذج HTML مطلوبة عندما تريد جمع بعض البيانات من الشخص الذي يزور موقع الويب الخاص بك. على سبيل المثال، عند تسجيل / دخول لتطبيقات مثل اوبر، نيتفليكس، أو الفيسبوك، يمكنك إدخال معلومات مثل الاسم ، البريد الإلكتروني ، و كلمة السر من خلال HTML الأشكال .

الآن سوف نتعلم جميع العناصر المطلوبة لإنشاء نموذج.

ملاحظة: لقد أضفت بالفعل التصميم باستخدام CSS ولذا ستبدو عناصري مختلفة ، لكنها ستعمل بنفس الطريقة تمامًا.

إذا كنت تريد أن تجعل عناصرك تبدو مثل عناصري ، فيمكنك العثور على ملف CSS الخاص بي في الروابط الواردة أدناه:

CSS مخصص: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

تطبيع CSS:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

عنصر النموذج

هذا هو العنصر الأول الذي سنتعلمه. يلتف هذا العنصر على جميع العناصر الأخرى التي تدخل داخل النموذج. هذا هو عنصر النموذج.

لن يرسل نموذجنا البيانات في أي مكان لأنه غير متصل بخادم. لتوصيل النموذج الخاص بنا بخادم ومعالجة بياناتنا ، يمكننا استخدام أي لغة من جانب الخادم مثل Node أو Python أو Ruby أو PHP. يتضمن جزء معالجة البيانات سمتين مهمتين متصلتين بعنصر النموذج. دعونا نلقي نظرة على تلك الصفات.

السمات:

  1. الإجراء: سمة الإجراء هي عنوان الويب (URL) الخاص بالبرنامج الذي يعالج المعلومات المقدمة بواسطة النموذج الخاص بنا.
  2. الطريقة: هي طريقة HTTP التي يستخدمها المتصفح لإرسال النموذج ، والقيم المحتملة هي POST و GET.
  • POST - يتم إرسال البيانات من نص النموذج إلى الخادم.
  • GET - يتم إرسال البيانات داخل عنوان URL ويتم فصل المعلمات بعلامة استفهام.
ملاحظة: لا يمكن أن يكون لديك نماذج متداخلة داخل نموذج آخر . هذا يعني أنه لا يمكن أن يكون لديك عنصر داخل عنصر آخر.

عنصر الإدخال

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

لنقم بإنشاء حقل نصي حيث يمكن للمستخدم كتابة اسمه.

ملاحظة: عنصر الإدخال عبارة عن علامة إغلاق ذاتي ، لذلك ليست هناك حاجة لكتابة علامة إغلاق لمطابقة علامة الفتح.

لقد أضفت ثلاث سمات في علامة الإدخال أعلاه. دعونا نلقي نظرة على كل واحد بالتفصيل.

نوع

و نوع السمة تشير أي نوع من المدخلات نريد. إذا قدمنا ​​قيمة نصية إلى سمة النوع ، فإن ما نعنيه هنا هو أن القيمة التي ندخلها في حقل الإدخال هي من نوع النص. هناك العديد من القيم الممكنة لهذه السمة المعينة. بعض القيم الممكنة هي البريد الإلكتروني والهاتف وكلمة المرور وما إلى ذلك.

على سبيل المثال: عند الدخول إلى أي من حساباتك (الأمازون / نيتفليكس)، تحتاج إلى إدخال أمرين: البريد الإلكتروني و كلمة المرور . لذلك في هذه الحالة بالذات يتم استخدام عنصر الإدخال . و نوع تعطى السمة مع قيمة البريد الإلكتروني و كلمة المرور على التوالي.

هوية شخصية

سمة المعرف ليست إلزامية ، ولكن من الجيد إضافة واحدة. في بعض الحالات ، يكون هذا مفيدًا لاستهداف العناصر باستخدام CSS / JavaScript. يضاف السمة ID حتى نتمكن من ربط العلامات إلى عناصر تحكم النموذج محددة .

اسم

سمة الاسم ضرورية. عند إرسال نموذج إلى رمز جانب الخادم ، يمكن للخادم فهم بيانات النموذج ومعالجة القيم بشكل مناسب.

نائب

إنه تلميح قصير يتم عرضه في حقل الإدخال قبل قيام المستخدم بإدخال قيمة. عندما يبدأ المستخدم في الكتابة في حقل الإدخال ، يختفي العنصر النائب.

دعونا نرى كيف تبدو بعض عناصر الإدخال الأساسية الأخرى.

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

عناصر إدخال متعددة (نص ، بريد إلكتروني ، كلمة مرور)

عنصر إدخال متعدد (نص ، بريد إلكتروني ، كلمة مرور)

عنصر Textarea

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

ال ea> ليست علامة ذاتية الإغلاق ، لذلك نحتاج إلى كتابة علامة الفتح والإغلاق معًا. ()

السمات:

  • المعرّف: كما هو مذكور أعلاه في العنصر.
  • الاسم: كما هو مذكور أعلاه في العنصر.
  • cols: يحدد العرض المرئي لمنطقة النص.
  • الصفوف: يحدد عدد الأسطر المرئي في منطقة النص.

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

ملاحظة: في معظم المتصفحات ، يمكن تغيير حجم عنصر textarea .

عنصر الزر

يعد عنصر الزر أحد أهم عناصر النموذج. بدون زر لا يمكنك إرسال أي نموذج إلى الخادم للمعالجة.

يقبل عنصر الزر السمة التي تسمى النوع. هذه السمة تقبل القيم الثلاث تقدم ، إعادة تعيين و زر .

السمات:

  • type = ”reset”: سيؤدي ذلك إلى مسح كافة بيانات النموذج عند النقر فوقه.
  • type = ”button”: لا يحتوي على أي سلوك افتراضي ويتم استخدامه غالبًا مع JavaScript لبرمجته من أجل سلوك مخصص .
  • type = ”submit“: السلوك الافتراضي لنوع الإرسال هو ، كما يوحي الاسم ، إرسال النموذج وإرسال جميع البيانات إلى الخادم.

عنصر التسمية

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

يمكننا تسمية كل عنصر من عناصر التحكم في النماذج باستخدام عنصر التسمية.

السمة الأكثر استخدامًا مع التصنيف هي لـ.

السمات:

  • ل: إن ل سمة يربط التسمية مع عنصر نموذج معين. الطريقة التي تتطابق بها هي بواسطة المعرف . كما ترى في المثال أعلاه ، فإن قيمة سمة المعرف المعطاة لعنصر الإدخال هي البريد الإلكتروني. قيمة ل سمة معينة لعنصر التسمية هو أيضا البريد الإلكتروني، بحيث ترتبط كل منهما مع بعضها البعض.
ملاحظة: عندما نضغط على الملصق ، فإننا نركز تلقائيًا على حقل الإدخال المرتبط بالتسمية. هذا هو السلوك الافتراضي.

الآن شكلنا يبدو جيدا جدا؟

حدد القوائم

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

في أي وقت يكون لديك قائمة من الخيارات أطول من ، على سبيل المثال ، أربعة أو خمسة أشياء ، فمن الأفضل استخدام قائمة التحديد لأنها توفر مساحة.

لنفترض أن نموذجنا يستهدف الطلاب الذين يسعون للقبول في إحدى الجامعات. نريد السماح للطلاب بالاختيار من قائمة محددة مسبقًا لبرامج الجامعة.

يتم تحديد عنصر القائمة باستخدام الفتح والإغلاق ct> علامة.

ط م> - وتمزق عنصر حدد المتطلبات البيئية وانخفاض داو ن القائمة التي تحتوي على خيارات اختيار . و سوف عنصر حدد لا تفعل أي شيء، في حد ذاته. يحتاج عنصر النموذج هذا في الواقع إلى عناصر إضافية بداخله ، تمامًا مثل e

    ايلى منة الاحتياجات الصورة
  • عناصر. العناصر وضعنا داخل حدد البريد lement تسمى عناصر الخيار.

    السمات:

    • الاسم: كما هو مذكور أعلاه في العنصر.

    في> - يمثل عنصر الخيار أحد الخيارات التي يمكن للمستخدم اختيارها في قائمة التحديد . وول ر؛ الخيار> إيليم والأنف والحنجرة يستخدم لعطري بوتيه ج alled القيمة.

    السمات:

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

    الآن لدينا تسمية "تحديد الدورات" مع قائمة التحديد التي أنشأناها للتو. الآن ، يمكننا أيضًا تنظيم قائمتنا في مجموعات منطقية باستخدام فوق> عنصر.

    السمات:

    • التسمية: اسم مجموعة الخيارات. في المثال الموضح أدناه ، تم تقسيم قائمة الخيارات الخاصة بنا إلى مجموعتين مع تسمية الهندسة والإدارة.

    في المثال الوارد أدناه

    أزرار الراديو

    تحديد القوائم أمر رائع إذا كان لديك الكثير من الخيارات. إذا كان لديك شيء مثل 5 خيارات أو أقل ، فمن الأفضل استخدام أزرار الاختيار.

    الفرق بين Select Menu و Radio Button هو أن أزرار الاختيار تعرض لك جميع الخيارات في وقت واحد. مثل قائمة التحديد ، لا يمكن للمستخدم الاختيار إلا من واحدة منها.

    السمات:

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

    مربعات الاختيار

    في بعض الأحيان قد يكون لديك مجموعة من الخيارات المحددة مسبقًا. تريد أن يكون المستخدم قادرًا على تحديد خيارات متعددة وليس خيارًا واحدًا فقط. هذا هو المكان الذي تكون فيه مربعات الاختيار مفيدة.

    السمات:

    • الاسم: كما هو مذكور أعلاه في العنصر.
    • القيمة: نظرًا لأننا نقوم بإنشاء هذه الخيارات المحددة مسبقًا ، نحتاج إلى تحديد الشكل الذي يجب أن تبدو عليه القيمة عند إرسالها. لذلك ، نستخدم سمة القيمة لتحديد القيم للخيارات المحددة مسبقًا.
    • محدد: بشكل افتراضي ، يتم إلغاء تحديد إدخال مربع الاختيار. يمكنك تعيين الحالة الافتراضية للفحص باستخدام السمة يسمى فحص . تذكر أن هذه سمة منطقية.

    في المثال الموضح أدناه ، لقد استخدمت التسمية لكل خيار فردي. لقد توصيل مربع و التسمية باستخدام ل سمة من تسمية و معرف سمة من مربع .

    ملاحظة: قد يكون من الصعب النقر فوق مربع اختيار صغير. يوصى بلف عنصر حول مربع الاختيار. إذا نقرنا على التسمية ، فسيتم أيضًا تحديد مربع الاختيار الخاص بنا أو إلغاء تحديده. لم أفعل ذلك أدناه ، ولكن يمكنك القيام بذلك لجعل UX b etter.

    الفرق بين مربع الاختيار وزر الاختيار

    1. يمكن أن يوجد مربع الاختيار من تلقاء نفسه ، بينما يمكن أن تظهر أزرار الاختيار فقط كمجموعة (يجب أن يكون هناك زري اختيار على الأقل)
    2. يعد تحديد مربع الاختيار أمرًا اختياريًا ولكن اختيار أحد أزرار الاختيار أمر إلزامي .

    النموذج الكامل

    لقد تعلمنا الكثير من عناصر نموذج HTML وقمنا بتغطية الأساسيات.

    لا تقلق بشأن حفظ كل شيء. لا يمكن لمطور ويب محترف تقريبًا تسمية كل سمة أو عنصر. ما هو أكثر أهمية من الحفظ هو تعلم كيفية البحث عن الأشياء في الوثائق عندما تحتاجها.

    يمكنك محاولة إضافة CSS الخاصة بك لجعل هذا النموذج يبدو بالشكل الذي تريده.

    يمكنك معرفة المزيد عن النماذج في الرابط أدناه

    نماذج HTML

    توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا لـ… developer.mozilla.org

    آمل أن تكون قد وجدت هذا المنشور مفيدًا ومفيدًا. أنا أحب أن أسمع رأيك!

    شكرا لقرائتك!