תגית
<select> משמשת ליצירת תפריט נפתח המאפשר למשתמש לבחור ערך מתוך רשימה של אפשרויות. התפריט מציע מספר אפשרויות לבחירה, ורק אחת מהן יכולה להיות נבחרת בכל פעם.
תכונות עיקריות של תגית
<select>:
-
id: מזהה ייחודי לתגית, שימושי כאשר יש צורך בקישור בין תגית
<select> לתגית
<label> לצורך נגישות.
-
name: שם המשתמש לשליחת הנתונים לשרת. הערך שנבחר בתפריט נשלח לשרת עם שם זה.
-
size: קובע את מספר האפשרויות שיוצגו בתפריט בו זמנית (ברירת מחדל היא תפריט נפתח שמציג אפשרות אחת).
תוך כדי השימוש בתגית
<select>, יש להוסיף לתוכה תגיות
<option> המייצגות את האפשרויות השונות בתפריט. כל תגית
<option> כוללת את התכונות הבאות:
-
value: הערך שנשלח לשרת כאשר המשתמש בוחר באופציה זו.
-
selected: תכונה אופציונלית המאפשרת להגדיר ערך ברירת מחדל שיבחר אוטומטית כאשר הדף נטען.
דוגמה לשימוש בתגית
<select>:
<html>
<head>
<title>דוגמה</title>
</head>
<body>
<form>
<label for="fruit">בחר פרי:</label>
<select id="fruit" name="fruit">
<option value="apple">תפוח</option>
<option value="banana" selected>בננה</option>
<option value="cherry">דובדבן</option>
</select>
</form>
</body>
</html>
בדוגמה זו, התפריט הנפתח כולל שלוש אפשרויות לבחירה. הערך "בננה" מוגדר כברירת מחדל. כאשר המשתמש בוחר באחת מהאפשרויות, הערך שנבחר יישלח לשרת כאשר הטופס יישלח.
שימוש נכון בתגית
<select> מאפשר לך להציע למשתמשים מגוון אפשרויות לבחירה בצורה נוחה ומסודרת. ניתן לשלב תגיות
<optgroup> כדי לארגן את האפשרויות בקבוצות אם יש צורך ברשימות ארוכות יותר.
