برمجةكورسات

تعلُّم لغة HTML – الدرس السابع– النماذج في HTML

دروس بسيطة في لغة الويب HTML

النماذج في HTML
دروس أوغاريتي في تعليم HTML 0 – النماذج في HTML

النماذج في HTML

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

ملاحظة: يمكنك العودة إلى دروسنا السابقة من خلال الروابط المُدرجة نهاية المقال.

  • ماهي النماذج في HTML ؟؟

إنَّ النماذج هي تلك التي تظهر في بداية دخولنا الى أي موقع، وتتضمّن خانات يتوجّب علينا ملؤها وتقديم المعلومات للموقع.
كل مايتعلق بـ النماذج في HTML يكون ضمن <from> </from>

  • جهة إرسال النماذج في HTML  وشيفرته:

علينا تحدید عنوان يُرسِل النّموذج إليه المعلومات، لذا سنُدرج الإيميل الخاصّ بنا في خاصية ضمن تاغ الفتح بالشكل التالي:
<“from acion=”someone@domain.com>
وكذلك علينا تحديد طريقة الترميز التي تريد ان يصلنا النموذج بها، غالباً ما تستخدم التّرميز النصي الذي يكون شكله مع تاغ فتح النماذج:
<from acion=”someone@domain.com” method=”get”>
وفي حالات خاصّة قد يكون من الأفضل استخدام الترميز التالي:
<from acion=”someone@domain.com” method=”post>

  • تصنيف العناوين الرئيسية للنموذج

في مثالنا لدينا العناوين : البينات الشخصية، أود الانضمام الى الفريق، الفئة العمرية.

<Fieldset>
<b><legend>  البينات الشخصية </legend> </b>
</Fieldset>

<Fieldset>
<b><legend> اود الانضمام الى الفريق </legend></b>
</Fieldest>

<Fieldest>
<b><legend> الفئة  </legend> </b>
</Fieldest>

:ثم نبدأ بِصُنع النماذج ووسومها وهي

  1. <input type=”text”> لترك حقل قابل للتعبئة.
  2. <inqut type=”password”> لترك حقل يحول النص الى نجوم.
  3. <inqut type=”radio”>  لترك خيارات للزائر يستطيع اختيار أحدها فقط.
  4. <inqut type=”checkbox”> لترك خيارات للزائر يستطيع اختيار عدة خيارت منها.
  5. <inqut type=”hidden”> نموذج مخفي عن الزوار لتدوِّن فيه ملاحظاتك فترسل إليك مع النوذج.
  6. <inqut type=”submit> لإنشاء زر يرسل بيانات النموذج الى إيميلك.
  7.  <select> وتستخدم لصنع القوائم، وندرج فيها التاغ <option> مع كل خيار في القائمة

 

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

يمكنك العودة إلى الدروس السابقة عبر النقر على الروابط: الدرس الأول ، الدرس الثاني ، الدرس الثالث ، الدرس الرّابع، الدرس الخامس، الدرس السادس.

 

 

 

 

 

هل أعجبك المقال؟

شاركونا آراءكم واقتراحاتكم

 

 

 

 

 

 


 

اقرأ أيضاً:

 

 

 

الوسوم

رامة

طالبة في كلية الآداب، مهتمة بالتكنولوجيا ونشرها، كالبرمجة والذكاء الصنعي.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

زر الذهاب إلى الأعلى
إغلاق