التعرف على العنصر Fieldset و العنصر legend في لغة HTML الدرس |21| - Programmer Tech

Programmer Tech

تعلم البرمجة - علوم الكمبيوتر - أمن المعلومات - القرصنة الأخلاقية

إعلان اعلى المقالة

الأربعاء، 21 أكتوبر 2020

التعرف على العنصر Fieldset و العنصر legend في لغة HTML الدرس |21|


العنصرين fieldset و legend

العنصر fieldset يتم إستخدامه لتجميع العناصر ذات الصلة و ايضاً يقوم برسم مربع حول العناصر ذات الصلة, بالنسبة للعنصر legend يتم إستخدامه ضمن العنصر fieldset, من خلاله يمكن كتابة تسمية توضيحية للعنصر fieldset, معنى كلمة fieldset في اللغة العربية هي "مجموعه ميدانية" و معنى legend عنوان تفصيلي باللغة العربية.


كيفية إنشاء العناصر fieldset و legend

نقوم بفتح المحرر الذي نعمل به و نقوم بكتابة العنصر <fieldset> و وسم نهايته </fieldset> و ضمن هذا العنصر نقوم بكتابة العنصر legend, لكن لست مجبر على اضافة legend.

<body>
    <fieldset>

    </fieldset>
</body>


صورة للكود من محرر الأكواد

 

صورة التنفيذ للكود في المتصفح

 

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

مثال لإضافة العنصر legend

<body>
    <fieldset>
        <legend>contact us </legend>
    </fieldset>
</body>

صورة من المحرر


لنلقي نظرة على النتيجة من المتصفح


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

مثال1

<body>
    <fieldset>
        <legend>contact us </legend>
        <h3>telegram : https://t.me/Programmer_Tech</h3>
        <h3>website : https://www.programmer-tech.com</h3>
        <h3>facebook : https://www.facebook.com/ProgrammerTech.net</h3>
        <h3>youtube 1 :https://www.youtube.com/ahmadkaissar</h3>
        <h3>youtube 2 :https://www.youtube.com/MuhammadAlush0997</h3>
        <h3>twitter : https://twitter.com/MhamadAlush0997</h3>
    </fieldset>
</body>

 

و في المحرر يكون


و عندما نستعرض النتيجة في المتصفح


نفهم من النتيجة السابقة ان فائدة العنصر fieldset هي إضافة مربع حول نص نريد التركيز عليه و توضيحه و النعصر legend يعتبر كـ وصف او عنوان لهذا المربع, و من ثم نكتب ما نريد من وسوم اسفل الوسم legened.


مثال 2

<body>
    <fieldset>
        <legend>contact us </legend>
        <img src="muhammadalush.jpg" alt="muhammadalush" height="360" width="600">
    </fieldset>
</body>


الشكل في المحرر


وفي المتصفح

ليست هناك تعليقات:

إرسال تعليق

facebook

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *