كيفية إنشاء نموذج بتنسيق HTML

كيفية إنشاء نموذج بتنسيق HTML

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





ومع ذلك ، هناك شيء واحد تشترك فيه كل هذه الأشكال البسيطة إلى المعقدة وهو HTML وبشكل أكثر تحديدًا HTML بطاقة شعار.



استخدام علامة النموذج

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





ال العلامة سمة مهمة تساهم في وظائفها. تسمى هذه السمة الإجراء وتستخدم لتحديد الملف الذي سيتم تمرير البيانات المدخلة في النموذج إليه.

استخدام مثال العلامة





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



باستخدام العلامة

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

متعلق ب: أفضل برامج تحرير HTML المجانية على الإنترنت لاختبار التعليمات البرمجية الخاصة بك



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

استخدام مثال العلامة


First Name:

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



باستخدام العلامة

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

متعلق ب: كيفية إنشاء نموذج مكدس في CSS

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

  • نص
  • عدد
  • بريد الالكتروني
  • صورة
  • تاريخ
  • خانة اختيار
  • مذياع
  • كلمه السر

استخدام مثال العلامة


First Name:

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

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

ال هوية شخصية و اسم عادةً ما يتم تعيين السمات بنفس القيمة التي يوفرها أحدهما للوصول إلى عنصر من جانب العميل والآخر من جانب الخادم.

باستخدام عنصر مربع الاختيار

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

باستخدام مثال عنصر مربع الاختيار


Programming Languages:
Java
JavaScript
Python

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

استخدام العلامة وعناصر الراديو

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

يكون عنصر الراديو أقرب إلى عنصر مربع الاختيار في المظهر ، ولكن مع عنصر الراديو لديك دوائر بدلاً من المربعات.

ال تنتج العلامة ما هو في الأساس مربع منسدل ، والذي يسمح للمستخدم بتحديد قيمة واحدة.

استخدام مثال العلامة والراديو


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

باستخدام عنصر التاريخ

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

باستخدام مثال عنصر التاريخ


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

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

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

استخدام مثال عنصر البريد الإلكتروني


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

يحول عنصر كلمة المرور الأحرف إلى علامات نجمية أثناء إدخالها في مربع النص. لذلك ، إذا كانت شاشة جهاز الكمبيوتر الخاص بك مرئية للآخرين ، فلن يروا كلمة المرور التي تدخلها.

استخدام مثال عنصر كلمة المرور


باستخدام زر العلامة

في النموذج ، يوجد عادةً نوعان مختلفان من الأزرار. الأول هو زر الإرسال ، الذي يرسل البيانات التي تم إدخالها في النموذج إلى القيمة المعينة لسمة الإجراء (الموجودة في < شكل> بطاقة شعار).

مثال زر الإرسال

Submit

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

مثال زر إعادة التعيين

Reset

إنشاء نموذج

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

إنشاء نموذج نموذج






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




سوف ينتج الكود أعلاه النموذج التالي:

عملية حرجة windows.com/stopcode ماتت

يمكنك الآن إنشاء نموذج بسيط بتنسيق HTML

توفر لك هذه المقالة جميع الأدوات اللازمة لإنشاء نموذج HTML وظيفي. يحدد علامات HTML المختلفة المستخدمة في إنشاء النموذج ويستكشف السمات المختلفة التي يمكن استخدامها مع هذه العلامات.

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

يشارك يشارك سقسقة بريد الالكتروني ورقة الغش الخاصة بخصائص CSS3 الأساسية

إتقان بناء جملة CSS الأساسي من خلال ورقة الغش الخاصة بخصائص CSS3.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • لغة البرمجة
  • تطوير الشبكة
  • دروس الترميز
نبذة عن الكاتب قاديشا كين(21 مقالة منشورة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مواد يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك