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

טבלאות - tables¶

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

מבנה בסיסי של טבלה¶

<table>
    <tr>
        <td>תא 1</td>
        <td>תא 2</td>
        <td>תא 3</td>
    </tr>
    <tr>
        <td>תא 4</td>
        <td>תא 5</td>
        <td>תא 6</td>
    </tr>
</table>

תגית table יוצרת את הטבלה.
תגית tr (table row) יוצרת שורה חדשה.
תגית td (table data) יוצרת תא רגיל בתוך שורה.

תא כותרת - th¶

<table>
    <tr>
        <th>שם</th>
        <th>גיל</th>
        <th>עיר</th>
    </tr>
    <tr>
        <td>דני</td>
        <td>25</td>
        <td>תל אביב</td>
    </tr>
    <tr>
        <td>שרה</td>
        <td>30</td>
        <td>ירושלים</td>
    </tr>
</table>

תגית th (table header) יוצרת תא כותרת. הדפדפן מציג אותו מודגש ומרוכז כברירת מחדל.
שימוש בth חשוב גם לנגישות - קוראי מסך משתמשים בו כדי להבין מה כל עמודה מייצגת.

חלקי הטבלה - thead, tbody, tfoot¶

כדי לארגן את הטבלה בצורה סמנטית ונכונה, חשוב לחלק אותה לחלקים:

<table>
    <thead>
        <tr>
            <th>מוצר</th>
            <th>מחיר</th>
            <th>כמות</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>מחשב נייד</td>
            <td>3,500 שקלים</td>
            <td>2</td>
        </tr>
        <tr>
            <td>עכבר</td>
            <td>100 שקלים</td>
            <td>5</td>
        </tr>
        <tr>
            <td>מקלדת</td>
            <td>200 שקלים</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>סה"כ</td>
            <td>8,600 שקלים</td>
            <td>10</td>
        </tr>
    </tfoot>
</table>

thead - חלק הכותרת של הטבלה. בדרך כלל מכיל שורה אחת עם תאי th.
tbody - גוף הטבלה. מכיל את כל שורות הנתונים.
tfoot - תחתית הטבלה. בדרך כלל מכיל סיכומים או סהכים.
החלוקה הזו לא משנה את המראה, אבל עוזרת לדפדפן, לקוראי מסך ולCSS לטפל בכל חלק בנפרד.

מיזוג תאים - merging cells¶

מיזוג עמודות - colspan¶

<table>
    <tr>
        <th colspan="3">מערכת שעות - יום ראשון</th>
    </tr>
    <tr>
        <th>שעה</th>
        <th>נושא</th>
        <th>מרצה</th>
    </tr>
    <tr>
        <td>08:00</td>
        <td>מתמטיקה</td>
        <td>דר. כהן</td>
    </tr>
</table>

התכונה colspan מגדירה על כמה עמודות התא משתרע.
בדוגמה למעלה, תא הכותרת "מערכת שעות" משתרע על 3 עמודות.

מיזוג שורות - rowspan¶

<table>
    <tr>
        <th>שעה</th>
        <th>יום ראשון</th>
        <th>יום שני</th>
    </tr>
    <tr>
        <td rowspan="2">08:00-10:00</td>
        <td>מתמטיקה</td>
        <td>פיזיקה</td>
    </tr>
    <tr>
        <td>מתמטיקה (המשך)</td>
        <td>פיזיקה (המשך)</td>
    </tr>
</table>

התכונה rowspan מגדירה על כמה שורות התא משתרע.
שימו לב שבשורה השנייה יש רק 2 תאים ולא 3, כי התא הראשון מגיע מrowspan של השורה הקודמת.

כיתוב לטבלה - caption¶

<table>
    <caption>ציוני סטודנטים - סמסטר א 2026</caption>
    <thead>
        <tr>
            <th>שם</th>
            <th>ציון</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>דני</td>
            <td>85</td>
        </tr>
        <tr>
            <td>שרה</td>
            <td>92</td>
        </tr>
    </tbody>
</table>

תגית caption מוסיפה כותרת/כיתוב לטבלה.
היא חייבת להיות מיד אחרי תגית table הפותחת.
חשוב לנגישות - קוראי מסך קוראים את הcaption כדי להבין על מה הטבלה.

מתי להשתמש בטבלאות ומתי לא¶

כן - השתמשו בטבלאות להצגת נתונים:
- מערכת שעות
- טבלת מחירים
- השוואת מוצרים
- תוצאות ספורט
- ציונים

לא - אל תשתמשו בטבלאות לעיצוב ופריסה (layout) של דף:
- בעבר היה נהוג לבנות את כל מבנה הדף עם טבלאות. היום זה נחשב פרקטיקה גרועה.
- להצבת אלמנטים על הדף, תשתמשו בCSS (flexbox, grid) ולא בטבלאות.
- שימוש בטבלאות לפריסה פוגע בנגישות ובSEO.

טפסים - forms¶

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

תגית form¶

<form action="/submit" method="POST">
    <!-- form fields go here -->
</form>

התכונה action מגדירה לאן המידע נשלח (הURL של השרת שיקבל את הנתונים).
התכונה method מגדירה את שיטת השליחה.

שיטות שליחה - GET מול POST¶

שיטת GET: שולחת את הנתונים בURL עצמו. מתאימה לחיפוש ופעולות שלא משנות מידע.
https://www.google.com/search?q=hello
הפרמטר q=hello נשלח בURL.
שיטת POST: שולחת את הנתונים בגוף הבקשה, לא בURL. מתאימה לשליחת סיסמאות, יצירת חשבון, ומידע רגיש.

כלל אצבע: GET לקריאת מידע, POST לשליחת/שינוי מידע.

סוגי שדות קלט - input types¶

תגית input היא התגית הנפוצה ביותר בטפסים. סוג השדה מוגדר בתכונה type:

טקסט, סיסמה, אימייל¶

<form>
    <label for="username">שם משתמש:</label>
    <input type="text" id="username" name="username">

    <label for="email">אימייל:</label>
    <input type="email" id="email" name="email">

    <label for="password">סיסמה:</label>
    <input type="password" id="password" name="password">
</form>

text - שדה טקסט רגיל.
email - שדה מיוחד לאימייל. הדפדפן בודק אוטומטית שהפורמט תקין (יש @).
password - שדה סיסמה. הדפדפן מציג נקודות במקום התווים.

מספרים, טלפון, כתובת אתר¶

<label for="age">גיל:</label>
<input type="number" id="age" name="age" min="0" max="120">

<label for="phone">טלפון:</label>
<input type="tel" id="phone" name="phone">

<label for="website">אתר:</label>
<input type="url" id="website" name="website">

number - שדה מספרי עם חצים להגדלה/הקטנה.
tel - שדה טלפון. במובייל הוא פותח מקלדת מספרים.
url - שדה לכתובת אתר. הדפדפן בודק שהפורמט תקין.

תאריך, שעה, צבע¶

<label for="birthday">תאריך לידה:</label>
<input type="date" id="birthday" name="birthday">

<label for="meeting">שעת פגישה:</label>
<input type="time" id="meeting" name="meeting">

<label for="color">צבע אהוב:</label>
<input type="color" id="color" name="color">

date - פותח בורר תאריכים בדפדפן.
time - פותח בורר שעות.
color - פותח בורר צבעים.

טווח, קובץ, מוסתר¶

<label for="volume">עוצמת קול:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

<label for="avatar">העלו תמונת פרופיל:</label>
<input type="file" id="avatar" name="avatar">

<input type="hidden" name="user_id" value="12345">

range - סליידר לבחירת ערך מטווח.
file - כפתור לבחירת קובץ מהמחשב.
hidden - שדה מוסתר שלא נראה למשתמש. שימושי להעברת מידע נוסף לשרת.

תיבות סימון ולחצני רדיו - checkbox, radio¶

תיבות סימון - checkbox¶

<p>בחרו את השפות שאתם מכירים:</p>

<input type="checkbox" id="python" name="languages" value="python">
<label for="python">פייתון - Python</label>

<input type="checkbox" id="javascript" name="languages" value="javascript">
<label for="javascript">ג'אווהסקריפט - JavaScript</label>

<input type="checkbox" id="html" name="languages" value="html" checked>
<label for="html">HTML</label>

checkbox מאפשר בחירה של כמה אפשרויות במקביל.
התכונה checked מסמנת את התיבה כברירת מחדל.

לחצני רדיו - radio¶

<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" name="gender" value="other">
<label for="other">אחר</label>

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

תווית - label¶

<label for="email">אימייל:</label>
<input type="email" id="email" name="email">

תגית label מקשרת תווית לשדה קלט באמצעות התכונה for.
הערך של for חייב להיות זהה לid של השדה.
כשלוחצים על הlabel, הפוקוס עובר לשדה. זה חשוב במיוחד עבור checkbox ו-radio.

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

רשימה נפתחת - select¶

<label for="city">עיר:</label>
<select id="city" name="city">
    <option value="">בחרו עיר</option>
    <option value="tel-aviv">תל אביב</option>
    <option value="jerusalem">ירושלים</option>
    <option value="haifa">חיפה</option>
    <option value="beer-sheva">באר שבע</option>
</select>

select יוצר רשימה נפתחת (dropdown).
כל option היא אפשרות ברשימה.
הערך הראשון בדרך כלל הוא placeholder ריק.

קבוצות באפשרויות - optgroup¶

<label for="car">רכב:</label>
<select id="car" name="car">
    <optgroup label="יפניים">
        <option value="toyota">טויוטה</option>
        <option value="honda">הונדה</option>
    </optgroup>
    <optgroup label="גרמניים">
        <option value="bmw">BMW</option>
        <option value="mercedes">מרצדס</option>
    </optgroup>
</select>

optgroup מקבץ אפשרויות תחת כותרת. הכותרת מוצגת אבל לא ניתנת לבחירה.

שדה טקסט גדול - textarea¶

<label for="message">הודעה:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

textarea יוצר שדה טקסט רב-שורתי. מתאים להודעות, הערות, תיאורים.
rows מגדיר את מספר השורות הנראות.
cols מגדיר את רוחב השדה בתווים.

כפתורים - buttons¶

<button type="submit">שלח טופס</button>
<button type="reset">נקה הכל</button>
<button type="button">כפתור רגיל</button>

submit - שולח את הטופס לכתובת שמוגדרת בaction.
reset - מנקה את כל השדות בטופס ומחזיר אותם לערכי ברירת המחדל.
button - כפתור רגיל שלא עושה כלום בפני עצמו. שימושי כשרוצים להוסיף פעולה עם JavaScript.

קיבוץ שדות - fieldset, legend¶

<form>
    <fieldset>
        <legend>פרטים אישיים</legend>
        <label for="fname">שם פרטי:</label>
        <input type="text" id="fname" name="fname">
        <br><br>
        <label for="lname">שם משפחה:</label>
        <input type="text" id="lname" name="lname">
    </fieldset>

    <fieldset>
        <legend>פרטי התקשרות</legend>
        <label for="email2">אימייל:</label>
        <input type="email" id="email2" name="email">
        <br><br>
        <label for="phone2">טלפון:</label>
        <input type="tel" id="phone2" name="phone">
    </fieldset>
</form>

fieldset מקבץ שדות קשורים ומצייר מסגרת סביבם.
legend מגדיר כותרת לfieldset.
שימוש בfieldset ו-legend עוזר לארגן טפסים ארוכים ומשפר נגישות.

תכונות חשובות של שדות קלט¶

מציין מקום - placeholder¶

<input type="text" name="search" placeholder="הקלידו מילת חיפוש...">

placeholder מציג טקסט רפאים בתוך השדה שנעלם כשמתחילים להקליד.
שימו לב: placeholder הוא לא תחליף לlabel. תמיד תוסיפו גם label.

שדה חובה - required¶

<input type="email" name="email" required>

הדפדפן לא יאפשר שליחת הטופס אם שדה חובה ריק.

תבנית - pattern¶

<input type="text" name="zipcode" pattern="[0-9]{7}" title="הזינו מיקוד בן 7 ספרות">

pattern מאפשר להגדיר תבנית (regex) שהקלט חייב לעמוד בה.
הtitle מוצג כהודעת שגיאה אם הקלט לא תואם.

מינימום ומקסימום - min, max¶

<input type="number" name="age" min="0" max="120">
<input type="date" name="start" min="2026-01-01" max="2026-12-31">

מושבת, קריאה בלבד, מיקוד אוטומטי¶

<!-- disabled: field is grayed out and not sent -->
<input type="text" name="old_email" value="old@example.com" disabled>

<!-- readonly: field shows value but user cannot change it, value IS sent -->
<input type="text" name="user_id" value="12345" readonly>

<!-- autofocus: cursor automatically focuses on this field when page loads -->
<input type="text" name="search" autofocus>

disabled - השדה מושבת ולא ניתן לערוך אותו. הערך שלו לא נשלח עם הטופס.
readonly - השדה לקריאה בלבד, לא ניתן לערוך אותו, אבל הערך כן נשלח.
autofocus - הסמן קופץ אוטומטית לשדה הזה כשהדף נטען.

השלמה אוטומטית - autocomplete¶

<input type="email" name="email" autocomplete="email">
<input type="text" name="fname" autocomplete="given-name">

autocomplete מאפשר לדפדפן למלא את השדה אוטומטית מנתונים שנשמרו.

רשימת הצעות - datalist¶

<label for="browser">דפדפן מועדף:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

datalist מספק רשימת הצעות לשדה input.
בניגוד לselect, המשתמש יכול גם להקליד ערך חופשי שלא ברשימה.
הid של הdatalist חייב להיות זהה לערך list של הinput.

דוגמה לטופס הרשמה מלא¶

<!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="fname" required placeholder="הזינו שם פרטי">
            <br><br>

            <label for="lname">שם משפחה:</label>
            <input type="text" id="lname" name="lname" required>
            <br><br>

            <label for="bday">תאריך לידה:</label>
            <input type="date" id="bday" name="birthday">
            <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" name="gender" value="other">
            <label for="other">אחר</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>

        <fieldset>
            <legend>העדפות</legend>

            <label for="lang">שפה מועדפת:</label>
            <select id="lang" name="language">
                <option value="he">עברית</option>
                <option value="en">אנגלית</option>
                <option value="ar">ערבית</option>
            </select>
            <br><br>

            <label for="bio">ספרו על עצמכם:</label><br>
            <textarea id="bio" name="bio" rows="4" cols="50" placeholder="כתבו כמה מילים..."></textarea>
        </fieldset>

        <br>

        <input type="checkbox" id="terms" name="terms" required>
        <label for="terms">קראתי ואני מסכים לתנאי השימוש</label>
        <br><br>

        <button type="submit">הרשמה</button>
        <button type="reset">נקה טופס</button>
    </form>
</body>
</html>

הטופס הזה מדגים את רוב מה שלמדנו:
- fieldset ו-legend לקיבוץ שדות.
- סוגי input שונים: text, email, password, date, radio, checkbox.
- select לרשימה נפתחת.
- textarea לטקסט ארוך.
- תכונות: required, placeholder, pattern.
- labels לכל שדה.
- כפתורי submit ו-reset.

דוגמה לטופס חיפוש¶

<form action="/search" method="GET">
    <label for="q">חיפוש:</label>
    <input type="text" id="q" name="q" placeholder="חפשו באתר..." autofocus>
    <button type="submit">חפש</button>
</form>

טפסי חיפוש בדרך כלל משתמשים בmethod GET כי החיפוש לא משנה מידע בשרת.
הפרמטר נשלח בURL: /search?q=hello

דוגמה לטופס יצירת קשר¶

<form action="/contact" method="POST">
    <label for="contact-name">שם:</label>
    <input type="text" id="contact-name" name="name" required>
    <br><br>

    <label for="contact-email">אימייל:</label>
    <input type="email" id="contact-email" name="email" required>
    <br><br>

    <label for="subject">נושא:</label>
    <select id="subject" name="subject">
        <option value="">בחרו נושא</option>
        <option value="general">שאלה כללית</option>
        <option value="bug">דיווח על באג</option>
        <option value="feedback">משוב</option>
    </select>
    <br><br>

    <label for="msg">הודעה:</label><br>
    <textarea id="msg" name="message" rows="6" cols="50" required></textarea>
    <br><br>

    <button type="submit">שלח הודעה</button>
</form>