ال ' <خيار> 'لتحديد خيار يمكن للمستخدم اختياره من قائمة منسدلة أو من قوائم الاختيار في نماذج الويب. ال ' <خيار> 'تسمح العلامة للمطورين بإنشاء مجموعة من الخيارات يمكن للمستخدم من خلالها اختيار أي خيار. يتم استخدامه في العديد من التطبيقات مثل الاستطلاعات ومواقع التسوق عبر الإنترنت ونماذج التسجيل وما إلى ذلك.
توضح هذه المقالة علامة الخيار في HTML مع أمثلة عملية:
ما هي علامة الخيار وكيفية استخدامها في HTML؟
يمكن استخدام علامة الخيار مع ' <اختر> ' و ' '. في حالة ' '، فإنها تنشئ قائمة بالخيارات التي يمكن إكمالها تلقائيًا بواسطة المتصفح. دعونا نستعرض بعض الأمثلة لفهم أفضل للعلاقة بين ' <خيار> 'بعلامة' <اختر> ' و ' 'العلامات:
مثال 1: إنشاء قائمة منسدلة
ال ' <خيار> 'العلامة مع' <اختر> 'لإنشاء قائمة منسدلة على صفحة الويب. ال ' <خيار> 'ينشئ كل خيار / عنصر قائمة في القائمة المنسدلة. لفهم أفضل ، دعنا نتبع مقتطف الشفرة أدناه:
< h2 > لغات البرمجة h2 >
< ملصق ل = 'سلاح بروغ' > اختر سلاح البرمجة: ملصق >
< يختار بطاقة تعريف = 'قوائم البرامج' >
< خيار قيمة = '' > حدد اختيارا خيار >
< خيار قيمة = 'سي ++' > C ++ خيار >
< خيار قيمة = '.شبكة' > دوت نت خيار >
< خيار قيمة = 'nodejs' > عقدة شبيبة خيار >
يختار >
في مقتطف الشفرة أعلاه:
- لأول مرة ' <التسمية> 'لعرض البيانات ويتم تعيينها بـ' <اختر> 'باستخدام' ل ' يصف.
- بعد ذلك ، ' <اختر> 'العلامة لإنشاء بيئة للقائمة المنسدلة.
- بعد ذلك ، ' <خيار> 'العلامة لإنشاء عناصر قائمة يتم وضعها كعناصر قائمة منسدلة.
بعد إعداد هيكل القائمة المنسدلة ، دعنا الآن نطبق بعض التصميم الأساسي:
ملصق {العرض محجوب؛
الهامش السفلي: 5 بكسل ؛
}
يختار {
الحشو: 5 بكسل ؛
نصف قطر الحدود: 5 بكسل ؛
العرض: 200 بكسل ؛
}
شرح خصائص CSS موضح أدناه:
- أولاً ، حدد ' ملصق 'ثم قم بتعيين قيم' block 'و' 5px 'على CSS' عرض ' و ' الهامش السفلي ' ملكيات.
- بعد ذلك ، ' يختار عنصر 'محددًا ويوفر قيم' 5 بكسل 'و' 5 بكسل 'و' 200 بكسل 'إلى CSS' حشوة '،' نصف قطر الحد ' و ' عرض '، على التوالي. يتم استخدام هذه الخصائص لتحسين رؤية المستخدم.
بعد تنفيذ مقتطفات التعليمات البرمجية أعلاه ، تبدو صفحة الويب كما يلي:
يوضح الناتج أعلاه أنه تم إنشاء القائمة المنسدلة باستخدام ' <خيار> 'بعلامة' <اختر> ' بطاقة شعار.
مثال 2: إنشاء قائمة الإكمال التلقائي
ال ' <خيار> 'العلامة مع' 'لإنشاء قائمة الإكمال التلقائي. يتم استخدامه مع ' <إدخال> 'التي يتم ملؤها بالخيارات المتاحة داخل قائمة الإكمال التلقائي. يظهر رمز إنشاء قائمة الإكمال التلقائي باستخدام HTML في مقتطف الشفرة أدناه:
< ملصق ل = 'أدوات البرنامج' > أو يكتب أداة برمجة: ملصق >< مدخل يكتب = 'نص' بطاقة تعريف = 'أدوات البرنامج' قائمة = 'أدوات' >
< قائمة البيانات بطاقة تعريف = 'أدوات' >
< خيار قيمة = 'C ++' >
< خيار قيمة = 'حَشد' >
< خيار قيمة = '.شبكة' >
< خيار قيمة = 'بي أتش بي' >
< خيار قيمة = 'روبي' >
< خيار قيمة = 'سويفت' >
< خيار قيمة = 'Node js' >
< خيار قيمة = 'تتفاعل' >
< خيار قيمة = 'مونغو' >
< خيار قيمة = 'جافا' >
< خيار قيمة = 'بايثون' >
قائمة البيانات >
في مقتطف الشفرة أعلاه:
- أولاً ، أضف ' <التسمية> 'التي تعرض النص مع عنصر HTML.
- بعد ذلك ، استخدم ' <إدخال> 'التي يملأها المستخدم يدويًا أو يمكن ملؤها تلقائيًا بالخيارات المتاحة داخل قائمة الإكمال التلقائي.
- بعد ذلك ، استخدم ' 'وتعيين' بطاقة تعريف 'قيمة السمة تساوي قيمة' قائمة 'السمة' <إدخال> ' بطاقة شعار.
- بعد ذلك ، استخدم ' <خيار> 'داخل علامة'
بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب على النحو التالي:
يوضح الإخراج أن قائمة الإكمال التلقائي يتم إنشاؤها باستخدام ' <خيار> 'مع مجموعة من' ' و ' <إدخال> '.
خاتمة
ال ' <خيار> 'تسمح علامة' للمطور بإنشاء خيارات لقائمة الخيارات ، والتي يمكن للمستخدم من خلالها اختيار أي خيار. يمكن استخدام علامة '