0.6 טבלאות וטפסים תרגול

תרגול 1 - מערכת שעות

צרו טבלת מערכת שעות שבועית. הטבלה צריכה לכלול:

1. שימוש בthead, tbody ו-tfoot.
2. שורת כותרת (th) עם הימים: ראשון עד חמישי.
3. עמודה ראשונה עם שעות (08:00, 10:00, 12:00, 14:00).
4. לפחות שימוש אחד בcolspan - שיעור שנמשך שני ימים.
5. שימוש בcaption עם שם הסמסטר.
6. בtfoot - שורת סיכום "סה"כ שעות לימוד" עם colspan.

---

תרגול 2 - טבלת השוואת מוצרים

צרו טבלת השוואה בין 3 מחשבים ניידים (או כל מוצר אחר). הטבלה צריכה לכלול:

1. עמודה ראשונה עם שמות התכונות: מותג, מעבד, זיכרון, אחסון, מסך, סוללה, מחיר.
2. עמודה לכל מוצר (3 עמודות).
3. שימוש בthead עם שמות המוצרים כth.
4. שימוש בtbody לנתונים.
5. שורה אחרונה עם rowspan או colspan לסיכום/המלצה.
6. caption מתאים.

---

תרגול 3 - טופס הרשמה

צרו טופס הרשמה מלא שמכיל:

1. שדה שם פרטי (text, required).
2. שדה שם משפחה (text, required).
3. שדה אימייל (email, required).
4. שדה סיסמה (password, required, pattern של לפחות 8 תווים).
5. שדה אימות סיסמה (password, required).
6. שדה גיל (number, min=16, max=120).
7. בחירת מגדר עם radio buttons (זכר, נקבה, אחר).
8. תיבת סימון "אני מסכים לתנאי השימוש" (checkbox, required).
9. כפתור שליחה.
10. כל שדה חייב שיהיה לו label עם for.
11. השתמשו בfieldset ו-legend לחלק את הטופס ל-2 קבוצות: "פרטים אישיים" ו-"פרטי חשבון".

---

תרגול 4 - טופס משוב

צרו טופס משוב למוצר או שירות שמכיל:

1. שדה שם (text).
2. שדה אימייל (email).
3. דירוג ברשימה נפתחת (select) עם 5 אפשרויות: מצוין, טוב מאוד, טוב, בינוני, גרוע.
4. שאלה "איך שמעתם עלינו?" עם checkbox-ים: חברים, גוגל, רשתות חברתיות, אחר.
5. שדה הודעה (textarea) עם placeholder.
6. שדה תאריך ביקור (date).
7. דירוג שביעות רצון (range, min=1, max=10).
8. כפתור שליחה וכפתור ניקוי.
9. labels לכל שדה.

---

תרגול 5 - טופס חיפוש עם הצעות

צרו טופס חיפוש שמכיל:

1. שדה חיפוש עם datalist שמכיל לפחות 8 הצעות (למשל: שמות ערים, שפות תכנות, או כל נושא אחר).
2. רשימה נפתחת (select) לבחירת קטגוריית חיפוש (הכל, מאמרים, סרטונים, תמונות).
3. כפתור חיפוש.
4. השדה צריך לקבל autofocus.

---

תרגול 6 - טופס הזמנת מוצר

צרו טופס הזמנת מוצר מאתר אינטרנט שמכיל:

1. קבוצה "פרטי המזמין" (fieldset):
2. שם מלא (text, required)
3. אימייל (email, required)
4. טלפון (tel)

5. כתובת למשלוח (textarea, rows=3)

6. קבוצה "פרטי ההזמנה" (fieldset):

7. בחירת מוצר (select עם optgroup - חלקו לקטגוריות)
8. כמות (number, min=1, max=10)
9. צבע (color)

10. העדפות משלוח (radio: רגיל, מהיר, איסוף עצמי)

11. קבוצה "הערות" (fieldset):

12. הערות נוספות (textarea)
13. תיבת סימון "עטפו כמתנה"

14. תיבת סימון "אני מסכים לתנאי ההחזרה" (required)

15. כפתור "בצעו הזמנה" (submit).

---

תרגול 7 - שאלות תיאורטיות

1. מה ההבדל בין GET לPOST? מתי משתמשים בכל אחד?

2. למה חשוב להוסיף label לכל שדה בטופס?

3. מה ההבדל בין disabled לבין readonly?

4. מתי נשתמש בטבלאות ומתי לא?

5. מה ההבדל בין select לבין datalist?

6. מה ההבדל בין checkbox לבין radio?