Get Adobe Flash player
דף הבית טפסים רשימות

האתר של רפאלי - בניית טופס HTML

יצירת רשימה

רשימה נוצרת באמצעות התג <select>.

רשימה נגללת

התג <select> פותח אזור שבו נמצאת רשימת האפשרויות של הרשימה. כל פריט ברשימה מוכנס בתג נפרד - תג <option>.

בדוגמא שלפניכם תיפתח תיבת גלילה (רשימה נגללת) הכוללת 3 פריטים

 

<label>רשימת פריטים
<select name= "select1">
<option value= "1">
פריט 1 </option>
<option value= "2">
פריט 2 </option>
<option value= "3">
פריט 3 </option>
</select>
</label>

ברירת מחדל

ליצירת פריט ברירת מחדל יש להשתמש במאפיין selected. נניח שעם טעינת הטופס צריך שפריט 2 יופיע בחלון באופן קבוע - השורה שתיכתב היא:

 

<option  value"2" selected="selected">פריט 2 </option>

פריט ריק

לעיתים מכניסים שורה ראשונה בראש הרשימה שאינה משמשת לצורך בחירה אלא רק להסבר, ובעת שהטופס נשלח - השרת לא יקבל מידע על בחירה כלשהי. 

השיטה לעשות זאת היא ע"י השארת המאפיין value ללא ערך. בדוגמא הבאה, הבחירה בפריט "בחר..." לא תישלח לשרת.

<label>רשימת פריטים
<select name= "select1">
<option  value"">בחר...</option>
<option value= "1">פריט 1 </option>
<option value= "2">פריט 2 </option>
<option value= "3">פריט 3 </option>
</select>
</label>

רשימה פתוחה

הרשימה שלמעלה, יכולה להיות מוצגת כרשימה פתוחה. ניתן לשלוט במספר השורות הנגלה, ואף לבחור יותר מאשר פריט אחד.

המאפיין שמאפשר זאת הוא size. כאשר הערך שלו גדול מ-1 הרשימה הופכת לפתוחה, ומספר השרוות הגלויות הוא הערך הניתן ל-size.

כאשר מספר האפשרויות (הפריטים) גדול יותר ממספר השורות (ערכו של size) תופיע בצד גלגלת 

<label>רשימת פריטים
<select name= "select1" size= "3">
<option value= "1">פריט 1 </option>
<option value= "2" selected= "selected">
פריט 2 </option>
<option value= "3">
פריט 3 </option>
<option value= "4">
פריט 4 </option>
<option value= "5">
פריט 5 </option>
</select>
</label>

בחירה מרובה

הוספת המאפיין multiple מאפשר בחירה מרובה. כאשר משתמשים בו, ניתן לבחור בחירה מרובה תוך שימוש במקש CTRL או Shift בשיתוף על הלחיצה על העכבר.

<label>רשימת פריטים
<select name= "select1" size= "3" multiple="multiple" >
<option value= "1">פריט 1 </option>
<option value= "2" selected= "selected">
פריט 2 </option>
<option value= "3">
פריט 3 </option>
<option value= "4">
פריט 4 </option>
<option value= "5">
פריט 5 </option>
</select>
</label>
אל השיעור הקודם אל השיעור הבא