0.6 - טבלאות וטפסים - פתרון
פתרון תרגול 1 - מערכת שעות¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Schedule</title>
</head>
<body>
<h1>Class Schedule</h1>
<table border="1">
<caption>Class Schedule - Semester A 2026</caption>
<thead>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00-10:00</td>
<td>Math</td>
<td>Physics</td>
<td>Math</td>
<td>Physics</td>
<td>English</td>
</tr>
<tr>
<td>10:00-12:00</td>
<td colspan="2">Computer Lab</td>
<td>Programming</td>
<td>Programming</td>
<td>Math</td>
</tr>
<tr>
<td>12:00-14:00</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
<td>Break</td>
</tr>
<tr>
<td>14:00-16:00</td>
<td>English</td>
<td>Programming</td>
<td colspan="2">Final Project</td>
<td>-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">Total: 16 study hours per week</td>
</tr>
</tfoot>
</table>
</body>
</html>
פתרון תרגול 2 - טבלת השוואת מוצרים¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laptop Comparison</title>
</head>
<body>
<h1>Laptop Comparison</h1>
<table border="1">
<caption>Comparison of 3 leading laptops - 2026</caption>
<thead>
<tr>
<th>Feature</th>
<th>MacBook Air</th>
<th>Dell XPS 15</th>
<th>Lenovo ThinkPad</th>
</tr>
</thead>
<tbody>
<tr>
<th>Brand</th>
<td>Apple</td>
<td>Dell</td>
<td>Lenovo</td>
</tr>
<tr>
<th>Processor</th>
<td>Apple M3</td>
<td>Intel i7-13700H</td>
<td>Intel i5-1340P</td>
</tr>
<tr>
<th>Memory</th>
<td>16GB</td>
<td>16GB</td>
<td>16GB</td>
</tr>
<tr>
<th>Storage</th>
<td>512GB SSD</td>
<td>512GB SSD</td>
<td>256GB SSD</td>
</tr>
<tr>
<th>Screen</th>
<td>13.6 inch Retina</td>
<td>15.6 inch OLED</td>
<td>14 inch IPS</td>
</tr>
<tr>
<th>Battery</th>
<td>18 hours</td>
<td>13 hours</td>
<td>15 hours</td>
</tr>
<tr>
<th>Price</th>
<td>5,200 shekels</td>
<td>6,800 shekels</td>
<td>4,100 shekels</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Recommendation</th>
<td colspan="3">For those looking for the best price-to-performance ratio - Lenovo ThinkPad. For those who want the best quality - MacBook Air.</td>
</tr>
</tfoot>
</table>
</body>
</html>
פתרון תרגול 3 - טופס הרשמה¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
</head>
<body>
<h1>Site Registration</h1>
<form action="/register" method="POST">
<fieldset>
<legend>Personal Details</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="first_name" required>
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="last_name" required>
<br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="16" max="120">
<br><br>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other-gender" name="gender" value="other">
<label for="other-gender">Other</label>
</fieldset>
<br>
<fieldset>
<legend>Account Details</legend>
<label for="reg-email">Email:</label>
<input type="email" id="reg-email" name="email" required>
<br><br>
<label for="reg-pass">Password:</label>
<input type="password" id="reg-pass" name="password" required
pattern=".{8,}" title="Password must contain at least 8 characters">
<br><br>
<label for="reg-pass2">Confirm password:</label>
<input type="password" id="reg-pass2" name="password_confirm" required>
</fieldset>
<br>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms of use</label>
<br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
פתרון תרגול 4 - טופס משוב¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feedback Form</title>
</head>
<body>
<h1>Feedback Form</h1>
<form action="/feedback" method="POST">
<label for="fb-name">Name:</label>
<input type="text" id="fb-name" name="name">
<br><br>
<label for="fb-email">Email:</label>
<input type="email" id="fb-email" name="email">
<br><br>
<label for="rating">Overall rating:</label>
<select id="rating" name="rating">
<option value="">Choose a rating</option>
<option value="5">Excellent</option>
<option value="4">Very good</option>
<option value="3">Good</option>
<option value="2">Average</option>
<option value="1">Poor</option>
</select>
<br><br>
<p>How did you hear about us?</p>
<input type="checkbox" id="src-friends" name="source" value="friends">
<label for="src-friends">Friends</label>
<input type="checkbox" id="src-google" name="source" value="google">
<label for="src-google">Google</label>
<input type="checkbox" id="src-social" name="source" value="social">
<label for="src-social">Social media</label>
<input type="checkbox" id="src-other" name="source" value="other">
<label for="src-other">Other</label>
<br><br>
<label for="fb-msg">Message:</label><br>
<textarea id="fb-msg" name="message" rows="5" cols="50"
placeholder="Share your experience with us..."></textarea>
<br><br>
<label for="visit-date">Visit date:</label>
<input type="date" id="visit-date" name="visit_date">
<br><br>
<label for="satisfaction">Satisfaction (1-10):</label>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="10">
<br><br>
<button type="submit">Submit feedback</button>
<button type="reset">Clear form</button>
</form>
</body>
</html>
פתרון תרגול 5 - טופס חיפוש עם הצעות¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search</title>
</head>
<body>
<h1>Site Search</h1>
<form action="/search" method="GET">
<label for="search-input">Search:</label>
<input type="text" id="search-input" name="q" list="suggestions"
placeholder="Type a search term..." 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">Category:</label>
<select id="category" name="category">
<option value="all">All</option>
<option value="articles">Articles</option>
<option value="videos">Videos</option>
<option value="images">Images</option>
</select>
<button type="submit">Search</button>
</form>
</body>
</html>
פתרון תרגול 6 - טופס הזמנת מוצר¶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Order</title>
</head>
<body>
<h1>Product Order</h1>
<form action="/order" method="POST">
<fieldset>
<legend>Orderer Details</legend>
<label for="order-name">Full name:</label>
<input type="text" id="order-name" name="full_name" required>
<br><br>
<label for="order-email">Email:</label>
<input type="email" id="order-email" name="email" required>
<br><br>
<label for="order-phone">Phone:</label>
<input type="tel" id="order-phone" name="phone">
<br><br>
<label for="order-address">Shipping address:</label><br>
<textarea id="order-address" name="address" rows="3" cols="40"></textarea>
</fieldset>
<br>
<fieldset>
<legend>Order Details</legend>
<label for="product">Product:</label>
<select id="product" name="product">
<option value="">Choose a product</option>
<optgroup label="Computers">
<option value="laptop">Laptop</option>
<option value="desktop">Desktop</option>
<option value="tablet">Tablet</option>
</optgroup>
<optgroup label="Accessories">
<option value="mouse">Mouse</option>
<option value="keyboard">Keyboard</option>
<option value="headphones">Headphones</option>
</optgroup>
<optgroup label="Monitors">
<option value="monitor-24">24 inch monitor</option>
<option value="monitor-27">27 inch monitor</option>
</optgroup>
</select>
<br><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
<br><br>
<label for="product-color">Color:</label>
<input type="color" id="product-color" name="color" value="#000000">
<br><br>
<p>Shipping preference:</p>
<input type="radio" id="shipping-regular" name="shipping" value="regular" checked>
<label for="shipping-regular">Regular shipping (5-7 business days)</label>
<br>
<input type="radio" id="shipping-express" name="shipping" value="express">
<label for="shipping-express">Express shipping (1-2 business days)</label>
<br>
<input type="radio" id="shipping-pickup" name="shipping" value="pickup">
<label for="shipping-pickup">Self pickup</label>
</fieldset>
<br>
<fieldset>
<legend>Notes</legend>
<label for="order-notes">Additional notes:</label><br>
<textarea id="order-notes" name="notes" rows="3" cols="40"
placeholder="Special notes for the order..."></textarea>
<br><br>
<input type="checkbox" id="gift-wrap" name="gift_wrap">
<label for="gift-wrap">Gift wrap</label>
<br><br>
<input type="checkbox" id="return-policy" name="return_policy" required>
<label for="return-policy">I agree to the return policy</label>
</fieldset>
<br>
<button type="submit">Place order</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).