0.6 טבלאות וטפסים פתרון
פתרון תרגול 1 - מערכת שעות¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>מערכת שעות</title>
</head>
<body>
<h1>מערכת שעות</h1>
<table border="1">
<caption>מערכת שעות - סמסטר א 2026</caption>
<thead>
<tr>
<th>שעה</th>
<th>ראשון</th>
<th>שני</th>
<th>שלישי</th>
<th>רביעי</th>
<th>חמישי</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00-10:00</td>
<td>מתמטיקה</td>
<td>פיזיקה</td>
<td>מתמטיקה</td>
<td>פיזיקה</td>
<td>אנגלית</td>
</tr>
<tr>
<td>10:00-12:00</td>
<td colspan="2">מעבדת מחשבים</td>
<td>תכנות</td>
<td>תכנות</td>
<td>מתמטיקה</td>
</tr>
<tr>
<td>12:00-14:00</td>
<td>הפסקה</td>
<td>הפסקה</td>
<td>הפסקה</td>
<td>הפסקה</td>
<td>הפסקה</td>
</tr>
<tr>
<td>14:00-16:00</td>
<td>אנגלית</td>
<td>תכנות</td>
<td colspan="2">פרויקט מסכם</td>
<td>-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">סה"כ: 16 שעות לימוד בשבוע</td>
</tr>
</tfoot>
</table>
</body>
</html>
פתרון תרגול 2 - טבלת השוואת מוצרים¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>השוואת מחשבים ניידים</title>
</head>
<body>
<h1>השוואת מחשבים ניידים</h1>
<table border="1">
<caption>השוואת 3 מחשבים ניידים מובילים - 2026</caption>
<thead>
<tr>
<th>תכונה</th>
<th>MacBook Air</th>
<th>Dell XPS 15</th>
<th>Lenovo ThinkPad</th>
</tr>
</thead>
<tbody>
<tr>
<th>מותג</th>
<td>Apple</td>
<td>Dell</td>
<td>Lenovo</td>
</tr>
<tr>
<th>מעבד</th>
<td>Apple M3</td>
<td>Intel i7-13700H</td>
<td>Intel i5-1340P</td>
</tr>
<tr>
<th>זיכרון</th>
<td>16GB</td>
<td>16GB</td>
<td>16GB</td>
</tr>
<tr>
<th>אחסון</th>
<td>512GB SSD</td>
<td>512GB SSD</td>
<td>256GB SSD</td>
</tr>
<tr>
<th>מסך</th>
<td>13.6 אינץ Retina</td>
<td>15.6 אינץ OLED</td>
<td>14 אינץ IPS</td>
</tr>
<tr>
<th>סוללה</th>
<td>18 שעות</td>
<td>13 שעות</td>
<td>15 שעות</td>
</tr>
<tr>
<th>מחיר</th>
<td>5,200 שקלים</td>
<td>6,800 שקלים</td>
<td>4,100 שקלים</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>המלצה</th>
<td colspan="3">למי שמחפש את היחס הטוב ביותר בין מחיר לביצועים - Lenovo ThinkPad. למי שרוצה את האיכות הטובה ביותר - MacBook Air.</td>
</tr>
</tfoot>
</table>
</body>
</html>
פתרון תרגול 3 - טופס הרשמה¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>טופס הרשמה</title>
</head>
<body>
<h1>הרשמה לאתר</h1>
<form action="/register" method="POST">
<fieldset>
<legend>פרטים אישיים</legend>
<label for="fname">שם פרטי:</label>
<input type="text" id="fname" name="first_name" required>
<br><br>
<label for="lname">שם משפחה:</label>
<input type="text" id="lname" name="last_name" required>
<br><br>
<label for="age">גיל:</label>
<input type="number" id="age" name="age" min="16" max="120">
<br><br>
<p>מגדר:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">זכר</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">נקבה</label>
<input type="radio" id="other-gender" name="gender" value="other">
<label for="other-gender">אחר</label>
</fieldset>
<br>
<fieldset>
<legend>פרטי חשבון</legend>
<label for="reg-email">אימייל:</label>
<input type="email" id="reg-email" name="email" required>
<br><br>
<label for="reg-pass">סיסמה:</label>
<input type="password" id="reg-pass" name="password" required
pattern=".{8,}" title="הסיסמה חייבת להכיל לפחות 8 תווים">
<br><br>
<label for="reg-pass2">אימות סיסמה:</label>
<input type="password" id="reg-pass2" name="password_confirm" required>
</fieldset>
<br>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">אני מסכים לתנאי השימוש</label>
<br><br>
<button type="submit">הרשמה</button>
</form>
</body>
</html>
פתרון תרגול 4 - טופס משוב¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>טופס משוב</title>
</head>
<body>
<h1>טופס משוב</h1>
<form action="/feedback" method="POST">
<label for="fb-name">שם:</label>
<input type="text" id="fb-name" name="name">
<br><br>
<label for="fb-email">אימייל:</label>
<input type="email" id="fb-email" name="email">
<br><br>
<label for="rating">דירוג כללי:</label>
<select id="rating" name="rating">
<option value="">בחרו דירוג</option>
<option value="5">מצוין</option>
<option value="4">טוב מאוד</option>
<option value="3">טוב</option>
<option value="2">בינוני</option>
<option value="1">גרוע</option>
</select>
<br><br>
<p>איך שמעתם עלינו?</p>
<input type="checkbox" id="src-friends" name="source" value="friends">
<label for="src-friends">חברים</label>
<input type="checkbox" id="src-google" name="source" value="google">
<label for="src-google">גוגל</label>
<input type="checkbox" id="src-social" name="source" value="social">
<label for="src-social">רשתות חברתיות</label>
<input type="checkbox" id="src-other" name="source" value="other">
<label for="src-other">אחר</label>
<br><br>
<label for="fb-msg">הודעה:</label><br>
<textarea id="fb-msg" name="message" rows="5" cols="50"
placeholder="שתפו אותנו בחוויה שלכם..."></textarea>
<br><br>
<label for="visit-date">תאריך ביקור:</label>
<input type="date" id="visit-date" name="visit_date">
<br><br>
<label for="satisfaction">שביעות רצון (1-10):</label>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="10">
<br><br>
<button type="submit">שלח משוב</button>
<button type="reset">נקה טופס</button>
</form>
</body>
</html>
פתרון תרגול 5 - טופס חיפוש עם הצעות¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>חיפוש</title>
</head>
<body>
<h1>חיפוש באתר</h1>
<form action="/search" method="GET">
<label for="search-input">חיפוש:</label>
<input type="text" id="search-input" name="q" list="suggestions"
placeholder="הקלידו מילת חיפוש..." autofocus>
<datalist id="suggestions">
<option value="Python">
<option value="JavaScript">
<option value="HTML">
<option value="CSS">
<option value="React">
<option value="Node.js">
<option value="Git">
<option value="Linux">
</datalist>
<label for="category">קטגוריה:</label>
<select id="category" name="category">
<option value="all">הכל</option>
<option value="articles">מאמרים</option>
<option value="videos">סרטונים</option>
<option value="images">תמונות</option>
</select>
<button type="submit">חפש</button>
</form>
</body>
</html>
פתרון תרגול 6 - טופס הזמנת מוצר¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>הזמנת מוצר</title>
</head>
<body>
<h1>הזמנת מוצר</h1>
<form action="/order" method="POST">
<fieldset>
<legend>פרטי המזמין</legend>
<label for="order-name">שם מלא:</label>
<input type="text" id="order-name" name="full_name" required>
<br><br>
<label for="order-email">אימייל:</label>
<input type="email" id="order-email" name="email" required>
<br><br>
<label for="order-phone">טלפון:</label>
<input type="tel" id="order-phone" name="phone">
<br><br>
<label for="order-address">כתובת למשלוח:</label><br>
<textarea id="order-address" name="address" rows="3" cols="40"></textarea>
</fieldset>
<br>
<fieldset>
<legend>פרטי ההזמנה</legend>
<label for="product">מוצר:</label>
<select id="product" name="product">
<option value="">בחרו מוצר</option>
<optgroup label="מחשבים">
<option value="laptop">מחשב נייד</option>
<option value="desktop">מחשב שולחני</option>
<option value="tablet">טאבלט</option>
</optgroup>
<optgroup label="אביזרים">
<option value="mouse">עכבר</option>
<option value="keyboard">מקלדת</option>
<option value="headphones">אוזניות</option>
</optgroup>
<optgroup label="מסכים">
<option value="monitor-24">מסך 24 אינץ</option>
<option value="monitor-27">מסך 27 אינץ</option>
</optgroup>
</select>
<br><br>
<label for="quantity">כמות:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<br><br>
<label for="product-color">צבע:</label>
<input type="color" id="product-color" name="color" value="#000000">
<br><br>
<p>העדפת משלוח:</p>
<input type="radio" id="shipping-regular" name="shipping" value="regular" checked>
<label for="shipping-regular">משלוח רגיל (5-7 ימי עסקים)</label>
<br>
<input type="radio" id="shipping-express" name="shipping" value="express">
<label for="shipping-express">משלוח מהיר (1-2 ימי עסקים)</label>
<br>
<input type="radio" id="shipping-pickup" name="shipping" value="pickup">
<label for="shipping-pickup">איסוף עצמי</label>
</fieldset>
<br>
<fieldset>
<legend>הערות</legend>
<label for="order-notes">הערות נוספות:</label><br>
<textarea id="order-notes" name="notes" rows="3" cols="40"
placeholder="הערות מיוחדות להזמנה..."></textarea>
<br><br>
<input type="checkbox" id="gift-wrap" name="gift_wrap">
<label for="gift-wrap">עטפו כמתנה</label>
<br><br>
<input type="checkbox" id="return-policy" name="return_policy" required>
<label for="return-policy">אני מסכים לתנאי ההחזרה</label>
</fieldset>
<br>
<button type="submit">בצעו הזמנה</button>
</form>
</body>
</html>
פתרון תרגול 7 - שאלות תיאורטיות¶
1. מה ההבדל בין GET לPOST?
- GET שולח נתונים בURL ומתאים לחיפוש ופעולות שלא משנות מידע בשרת.
- POST שולח נתונים בגוף הבקשה ומתאים לשליחת מידע רגיש כמו סיסמאות ולפעולות שמשנות מידע.
2. למה חשוב label?
- נגישות: קוראי מסך משתמשים בlabel כדי להגיד למשתמש מה השדה מצפה.
- שימושיות: לחיצה על הlabel מעבירה את הפוקוס לשדה, מה שעוזר במיוחד בcheckbox ו-radio.
3. מה ההבדל בין disabled לreadonly?
- disabled: השדה אפור ולא ניתן לערוך אותו. הערך שלו לא נשלח עם הטופס.
- readonly: השדה נראה רגיל אבל לא ניתן לערוך אותו. הערך שלו כן נשלח עם הטופס.
4. מתי להשתמש בטבלאות?
- כן: להצגת נתונים מאורגנים (מערכת שעות, מחירים, השוואות).
- לא: לעיצוב ופריסה של דף. לזה יש CSS עם flexbox ו-grid.
5. מה ההבדל בין select לdatalist?
- select: רשימה סגורה - המשתמש חייב לבחור מתוך האפשרויות המוגדרות.
- datalist: רשימת הצעות - המשתמש יכול לבחור מהרשימה או להקליד ערך חופשי.
6. מה ההבדל בין checkbox לradio?
- checkbox: מאפשר בחירה של כמה אפשרויות במקביל.
- radio: מאפשר בחירה של אפשרות אחת בלבד מתוך קבוצה (כל הradio-ים באותו name).