HTML

טפסים

מבנה בסיסי

טופס ב-HTML נוצר עם תגית <form>:

<form action="/submit" method="POST">
    <!-- שדות הטופס כאן -->
</form>

תכונות חשובות:

שדות קלט (<input>)

סוגי קלט נפוצים

<!-- טקסט -->
<input type="text" name="username">

<!-- סיסמה -->
<input type="password" name="password">

<!-- אימייל -->
<input type="email" name="email">

<!-- מספר -->
<input type="number" name="age" min="0" max="120">

<!-- טלפון -->
<input type="tel" name="phone">

<!-- URL -->
<input type="url" name="website">

<!-- תאריך -->
<input type="date" name="birthday">

<!-- שעה -->
<input type="time" name="appointment">

<!-- תאריך ושעה -->
<input type="datetime-local" name="meeting">

<!-- צבע -->
<input type="color" name="favorite_color">

<!-- טווח (slider) -->
<input type="range" name="volume" min="0" max="100">

<!-- חיפוש -->
<input type="search" name="query">

<!-- העלאת קובץ -->
<input type="file" name="document">

<!-- קובץ מרובה -->
<input type="file" name="photos" multiple>

<!-- מוסתר -->
<input type="hidden" name="user_id" value="123">

checkbox ו-radio

<!-- Checkbox - בחירה מרובה -->
<label>
    <input type="checkbox" name="hobby" value="reading"> קריאה
</label>
<label>
    <input type="checkbox" name="hobby" value="sports"> ספורט
</label>
<label>
    <input type="checkbox" name="hobby" value="music" checked> מוזיקה
</label>

<!-- Radio - בחירה אחת -->
<label>
    <input type="radio" name="gender" value="male"> זכר
</label>
<label>
    <input type="radio" name="gender" value="female"> נקבה
</label>
<label>
    <input type="radio" name="gender" value="other"> אחר
</label>

תוויות (<label>)

שתי דרכים לקישור

<!-- דרך 1: עטיפה -->
<label>
    שם מלא:
    <input type="text" name="fullname">
</label>

<!-- דרך 2: עם for -->
<label for="email">כתובת אימייל:</label>
<input type="email" id="email" name="email">

💡 חשוב: <label> משפר נגישות ושימושיות!

תכונות נפוצות של <input>

<input 
    type="text" 
    name="username"
    id="username"
    placeholder="שם משתמש"
    required
    minlength="3"
    maxlength="20"
    pattern="[a-zA-Z0-9_]+"
    autofocus
>

שדות נוספים

<textarea> - טקסט ארוך

<label for="message">הודעה:</label>
<textarea 
    id="message" 
    name="message" 
    rows="5" 
    cols="40"
    placeholder="כתוב כאן את ההודעה..."
    required
></textarea>

<select> - רשימה נפתחת

<label for="city">עיר:</label>
<select id="city" name="city" required>
    <option value="">בחר עיר</option>
    <option value="tlv">תל אביב</option>
    <option value="jlm">ירושלים</option>
    <option value="hfa" selected>חיפה</option>
</select>

קבוצות אפשרויות

<select name="car">
    <optgroup label="יפניות">
        <option value="toyota">טויוטה</option>
        <option value="honda">הונדה</option>
    </optgroup>
    <optgroup label="גרמניות">
        <option value="bmw">BMW</option>
        <option value="audi">אודי</option>
    </optgroup>
</select>

בחירה מרובה

<select name="skills" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="react">React</option>
</select>

<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">
</datalist>

כפתורים

<!-- כפתור שליחה -->
<button type="submit">שלח</button>

<!-- כפתור איפוס -->
<button type="reset">נקה טופס</button>

<!-- כפתור רגיל (ל-JavaScript) -->
<button type="button" onclick="alert('נלחץ!')">לחץ עליי</button>

<!-- גם אפשר עם input -->
<input type="submit" value="שלח">
<input type="reset" value="נקה">
<input type="button" value="לחץ">

קבוצת שדות (<fieldset>)

<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="email">אימייל:</label>
        <input type="email" id="email" name="email"><br><br>

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

    <button type="submit">שלח</button>
</form>

Validation (אימות)

אימות מובנה

<!-- שדה חובה -->
<input type="text" required>

<!-- תבנית (pattern) -->
<input type="text" pattern="[0-9]{9}" title="9 ספרות">

<!-- אימייל -->
<input type="email">

<!-- מספר עם טווח -->
<input type="number" min="1" max="100">

<!-- אורך טקסט -->
<input type="text" minlength="3" maxlength="20">

הודעות שגיאה מותאמות

<input 
    type="email" 
    required
    oninvalid="this.setCustomValidity('אנא הכנס אימייל תקין')"
    oninput="this.setCustomValidity('')"
>

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

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>טופס הרשמה</title>
    <style>
        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        fieldset {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        legend {
            font-weight: bold;
            padding: 0 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="/register" method="POST">
        <h2>הרשמה לאתר</h2>

        <fieldset>
            <legend>פרטים אישיים</legend>

            <label for="fullname">שם מלא:</label>
            <input type="text" id="fullname" name="fullname" required>

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

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

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

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

            <label for="city">עיר:</label>
            <select id="city" name="city">
                <option value="">בחר עיר</option>
                <option value="tlv">תל אביב</option>
                <option value="jlm">ירושלים</option>
                <option value="hfa">חיפה</option>
            </select>

            <label>תחומי עניין:</label>
            <label><input type="checkbox" name="interests" value="tech"> טכנולוגיה</label>
            <label><input type="checkbox" name="interests" value="sports"> ספורט</label>
            <label><input type="checkbox" name="interests" value="music"> מוזיקה</label>
        </fieldset>

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

            <label for="message">ספר לנו על עצמך:</label>
            <textarea id="message" name="message" rows="4" 
                      placeholder="כתוב כאן..."></textarea>
        </fieldset>

        <label>
            <input type="checkbox" required>
            אני מסכים/ה לתנאי השימוש
        </label>

        <button type="submit">הרשמה</button>
    </form>
</body>
</html>

סיכום

← חזרה: טבלאות | → המשך: אלמנטים סמנטיים