ה ' <אופציה> 'תג משמש כדי להגדיר אפשרות שמשתמש יכול לבחור מתפריט נפתח או מרשימות הבחירה בטפסי אינטרנט. ה ' <אופציה> 'תג מאפשר למפתחים ליצור קבוצה של אפשרויות שמהן המשתמש יכול לבחור כל אפשרות. הוא נמצא בשימוש ביישומים שונים כמו סקרים, אתרי קניות מקוונים, טפסי הרשמה וכו'.
מאמר זה מדגים את תג האופציה ב-HTML יחד עם דוגמאות מעשיות:
מהי תג האופציה וכיצד להשתמש בו ב-HTML?
ניתן להשתמש בתג האופציה עם ' <בחר> ' ו' <רשימת נתונים> ' תגיות. במקרה של ' <רשימת נתונים> ' תג, הוא יוצר רשימה של אפשרויות שניתן להשלים אוטומטית על ידי דפדפן. הבה נעבור על כמה דוגמאות להבנה טובה יותר של הקשר בין ' <אופציה> ' תג עם ' <בחר> ' ו' <רשימת נתונים> 'תגים:
דוגמה 1: יצירת רשימה נפתחת
ה ' <אופציה> תג ' מנוצל עם ' <בחר> ' תג ליצירת רשימה נפתחת בדף האינטרנט. ה ' <אופציה> ' יוצר כל אפשרות/פריט רשימה ברשימה הנפתחת. להבנה טובה יותר, הרשו לנו לעקוב אחר קטע הקוד שלהלן:
< h2 > שפות תכנות h2 >
< תווית ל = 'נשק פרוג' > בחר נשק תכנות: תווית >
< בחר תְעוּדַת זֶהוּת = 'רשימות פרוג' >
< אוֹפְּצִיָה ערך = '' > בחר אפשרות אוֹפְּצִיָה >
< אוֹפְּצִיָה ערך = 'c++' > C++ אוֹפְּצִיָה >
< אוֹפְּצִיָה ערך = '.נֶטוֹ' > נקודה נט אוֹפְּצִיָה >
< אוֹפְּצִיָה ערך = 'nodejs' > Node js אוֹפְּצִיָה >
בחר >
בקטע הקוד שלמעלה:
- קודם ה ' <תווית> תג ' משמש להצגת הנתונים והוא מוקצה עם ' <בחר> ' תג באמצעות ' ל ' תכונה.
- לאחר מכן, ה' <בחר> תג ' משמש ליצירת סביבה עבור הרשימה הנפתחת.
- לאחר מכן, ה' <אופציה> תג ' משמש ליצירת פריטי רשימה שיוצבו כפריטי רשימה נפתחת.
לאחר הגדרת מבנה הרשימה הנפתחת, כעת הבה נחיל עיצוב בסיסי:
תווית {בלוק תצוגה;
margin-bottom: 5px;
}
בחר {
ריפוד: 5 פיקסלים;
border-radius: 5px;
רוחב: 200 פיקסלים;
}
ההסבר על מאפייני CSS מתואר להלן:
- ראשית, בחר את ' תווית ' רכיב ולאחר מכן הגדר את הערכים של 'block' ו- '5px' ל-CSS ' לְהַצִיג ' ו' שוליים-תחתית ' נכסים.
- לאחר מכן, ה' בחר ' רכיב נבחר ומספק את הערכים של '5px', '5px' ו-'200px' ל-CSS ' ריפוד ', ' גבול-רדיוס ' ו' רוֹחַב ” נכסים, בהתאמה. מאפיינים אלה משמשים כדי לשפר את נראות המשתמש.
לאחר ביצוע קטעי הקוד לעיל, דף האינטרנט נראה כך:
הפלט לעיל מראה שהתפריט הנפתח נוצר באמצעות ' <אופציה> ' תג עם ' <בחר> 'תג.
דוגמה 2: יצירת רשימה של השלמה אוטומטית
ה ' <אופציה> תג ' מנוצל עם ' <רשימת נתונים> ' תג ליצירת רשימת השלמה אוטומטית. הוא משמש יחד עם ' <קלט> ' תג שמתמלא על ידי האפשרויות הזמינות ברשימת ההשלמה האוטומטית. הקוד ליצירת רשימת השלמה אוטומטית באמצעות HTML מוצג בקטע הקוד שלהלן:
< תווית ל = 'כלי פרוג' > אוֹ סוּג כלי תכנות: תווית >< קֶלֶט סוּג = 'טֶקסט' תְעוּדַת זֶהוּת = 'כלי פרוג' רשימה = 'כלים' >
< רשימת נתונים תְעוּדַת זֶהוּת = 'כלים' >
< אוֹפְּצִיָה ערך = 'C++' >
< אוֹפְּצִיָה ערך = 'הַרכָּבָה' >
< אוֹפְּצִיָה ערך = '.נֶטוֹ' >
< אוֹפְּצִיָה ערך = 'PHP' >
< אוֹפְּצִיָה ערך = 'אוֹדֶם' >
< אוֹפְּצִיָה ערך = 'מָהִיר' >
< אוֹפְּצִיָה ערך = 'Node js' >
< אוֹפְּצִיָה ערך = 'לְהָגִיב' >
< אוֹפְּצִיָה ערך = 'מונגו' >
< אוֹפְּצִיָה ערך = 'ג'אווה' >
< אוֹפְּצִיָה ערך = 'פִּיתוֹן' >
רשימת נתונים >
בקטע הקוד שלמעלה:
- ראשית, הוסף את ' <תווית> ' תג המציג את הטקסט יחד עם אלמנט ה-HTML.
- לאחר מכן, השתמש ב' <קלט> ' תג שמולא על ידי המשתמש באופן ידני או שניתן למילוי אוטומטי על ידי האפשרויות הזמינות ברשימת ההשלמה האוטומטית.
- לאחר מכן, השתמש ב' <רשימת נתונים> ' תג והגדר את ' תְעוּדַת זֶהוּת ' ערך תכונה שווה לערך של ' רשימה ' תכונה של ' <קלט> 'תג.
- לאחר מכן, השתמש ב' <אופציה> 'תג בתוך התג '
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך:
הפלט מראה שרשימת ההשלמה האוטומטית נוצרת על ידי שימוש ב' <אופציה> ' תג עם השילוב של ' <רשימת נתונים> ' ו' <קלט> ' תגיות.
סיכום
ה ' <אופציה> תג ” מאפשר למפתח ליצור אפשרויות לרשימת האפשרויות, מהן המשתמש יכול לבחור כל אפשרות. ניתן להשתמש בתג '