תיעוד HTML עם דוגמאות להרצה: סוגי input

Q: כמה סוגי input יש ב-HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url ו-week. סוג לא מוכר או חסר מתנהג כמו text.

Q: מה סוג ה-input של ברירת המחדל ב-HTML?

text. בלי type, או עם סוג שהדפדפן לא מכיר, הוא שדה טקסט של שורה אחת.

Q: להשתמש ב-type="number" למספרי טלפון או למיקודים?

לא. number מיועד לכמויות: הוא מוסיף כפתורי הגדלה והקטנה, ודוחה את ה-+, הרווחים והמקפים שיש במספרי טלפון. השתמשו ב-type="tel" למספרי טלפון, וב-type="text" עם inputmode="numeric" לקודים כמו מיקודים ומספרי כרטיסים.

Q: באיזה פורמט משתמש input type date?

הערך הוא תמיד YYYY-MM-DD, כמו 2026-09-24, לא משנה באיזה פורמט הקורא רואה אותו על המסך. התצוגה עוקבת אחרי האזור של הקורא; הערך שנשלח ושנקרא בסקריפט לא.

Q: האם לתגית input צריך תגית סגירה?

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

התגית input והסוגים שלה

<input> הוא שדה טופס, והמאפיין type שלו קובע איזה סוג. אותה תגית יוצרת תיבת טקסט, מחוון, בוחר תאריכים או בוחר צבעים. נסו כל שדה למטה ולחצו על Submit כדי לראות מה הטופס שולח:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> הוא אלמנט ריק, ולכן אין לו תגית סגירה. ה-name שלו הוא המפתח שתחתיו הערך נשלח, ו-value הוא ערך ההתחלה. type חסר או עם שגיאת כתיב נותן שדה טקסט רגיל.

כל סוגי ה-input ב-HTML

`type`	מה זה	הערות
`text`	שורה אחת של טקסט	ברירת המחדל
`password`	טקסט שמוצג כנקודות	לא מוצפן בעצמו; שלחו אותו דרך HTTPS
`email`	כתובת אימייל	מאמת את הפורמט; מקש `@` במקלדות טלפון
`url`	כתובת אינטרנט	חייבת להתחיל בסכמה כמו `https://`
`tel`	מספר טלפון	מקלדת טלפון בנייד, בלי בדיקת פורמט
`search`	תיבת חיפוש	לעיתים קרובות מציגה כפתור ניקוי
`number`	מספר	כפתורי הגדלה והקטנה, `min`, `max`, `step`
`range`	מחוון	לא מדויק מעצם הגדרתו; הערך הוא מספר
`date`	תאריך	הערך הוא `YYYY-MM-DD`
`time`	שעה ביום	הערך הוא `HH:MM` (שעון 24 שעות)
`datetime-local`	תאריך ושעה, בלי אזור זמן	הערך הוא `YYYY-MM-DDTHH:MM`
`month`	שנה וחודש	לא נתמך בכל דפדפן
`week`	שנה ומספר שבוע	לא נתמך בכל דפדפן
`color`	בוחר צבעים	הערך הוא `#rrggbb` באותיות קטנות
`checkbox`	תיבת פועל/כבוי	ראו HTML checkbox
`radio`	בחירה אחת מתוך קבוצה	ראו HTML radio button
`file`	בוחר קבצים	`accept`, `multiple`
`hidden`	ערך שנשלח אבל לא מוצג	למזהים ולטוקנים
`submit`	כפתור שליחה	`<button type="submit">` גמיש יותר
`reset`	כפתור איפוס	לעיתים רחוקות רעיון טוב
`button`	כפתור שלא עושה כלום בעצמו	בשביל JavaScript
`image`	כפתור שליחה שמצויר כתמונה	שולח גם את קואורדינטות הלחיצה

סוגי טקסט ומקלדות טלפון

email, url, tel, search ו-text נראים כולם כמו תיבת טקסט במחשב. ההבדל הוא באימות, ובטלפונים, באיזו מקלדת נפתחת. הגבול בדוגמה הזו הופך לירוק או לאדום לפי השיפוט של הדפדפן על הערך:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example הוא אימייל תקין מבחינת הדפדפן: הוא בודק רק שיש טקסט, @ ודומיין, לא שיש בדומיין נקודה. הבדיקה האמיתית קורית בשרת.
example.com אינו url תקין, כי אין לו סכמה. https://example.com כן.
tel מקבל הכל. פורמטים של טלפון שונים מדי בין מדינות, ולכן אין בדיקה מובנית; הוסיפו pattern אם אתם צריכים אחת.
inputmode="numeric" מבקש מטלפונים מקלדת ספרות בלי הבעיות של type="number", ולכן הוא הבחירה הנכונה למיקודים, קודים חד פעמיים ומספרי כרטיסים.

number ו-range

שניהם מקבלים min, max ו-step. number מיועד לערכים מדויקים; range הוא מחוון לערכים שבהם המספר המדויק פחות חשוב. מחוון range לא מציג מספר, אז שלבו אותו עם <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

ברירת המחדל של step היא 1 ב-number, ולכן שדה מחיר בלי step="0.01" דוחה את 4.99 כשהטופס נשלח. ב-JavaScript, input.value הוא תמיד מחרוזת; השתמשו ב-input.valueAsNumber כדי לקבל מספר.

תאריכים ושעות

סוגי התאריך והשעה פותחים את הבוחר של הדפדפן עצמו. מה שהקורא רואה עוקב אחרי האזור שלו (09/24/2026, 24.09.2026), אבל הערך הוא תמיד באותו פורמט קבוע:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

הפורמט הקבוע הזה הוא מה שהשרת מקבל ומה ש-JavaScript קורא, כך שאף פעם לא צריך לפענח "24.09.2026". min ו-max מקבלים את אותו פורמט. ל-datetime-local אין אזור זמן: אם זה חשוב, המירו בשרת לפי האזור של הקורא.

color ו-file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" מגביל את בוחר הקבצים לתמונות (ומציע את המצלמה בטלפונים); הוא מקבל גם סיומות, כמו accept=".pdf,.docx". זו רק המלצה לבוחר, אז בדקו את סוג הקובץ בשרת. multiple מאפשר כמה קבצים. העלאה אמיתית צריכה גם method="post" ו-enctype="multipart/form-data" על הטופס.

הצעות עם datalist

<datalist> נותן לשדה טקסט רשימת הצעות ועדיין מאפשר כל ערך. חברו אותם עם המאפיין list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

הקלידו "ja" בשדה כדי לראות את ההצעות התואמות. בניגוד ל-select, הקורא יכול להקליד ערך שלא נמצא ברשימה.

מאפיינים שעובדים על input

מאפיין	מה הוא עושה
`name`	המפתח שתחתיו הערך נשלח
`value`	ערך ההתחלה
`placeholder`	רמז שמוצג כל עוד השדה ריק (לא תווית)
`required`	חובה למלא לפני השליחה
`disabled`	אי אפשר להשתמש בו, והוא לא נשלח
`readonly`	אי אפשר לערוך אותו, אבל הוא נשלח
`autocomplete`	מה למלא אוטומטית: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	גבולות למספרים, מחוונים, תאריכים ושעות
`minlength`, `maxlength`	גבולות אורך לסוגי טקסט
`pattern`	ביטוי רגולרי שהערך כולו חייב להתאים לו
`inputmode`	איזו מקלדת טלפון להציג: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	ה-`id` של `<datalist>`
`multiple`	כמה ערכים, ל-`email` ול-`file`
`accept`	סוגי קבצים ל-`file`

טעויות נפוצות

type="number" למספרי טלפון, מיקודים או מספרי כרטיסים. הם לא כמויות. השתמשו ב-tel או ב-text עם inputmode="numeric".
שדה מחיר בלי step="0.01". ערכים עשרוניים נכשלים באימות.
שימוש ב-placeholder בתור התווית. הוא נעלם ברגע שהקורא מקליד.
הסתמכות על accept או type="email" לאבטחה. הם נועדו לנוחות; השרת בודק שוב.
type="month" או type="week" בלי חלופה. חלק מהדפדפנים מציגים שדה טקסט רגיל.
תגית סגירה </input>. <input> הוא אלמנט ריק.

שאלות נפוצות

כמה סוגי input יש ב-HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url ו-week. סוג לא מוכר או חסר מתנהג כמו text.

מה סוג ה-input של ברירת המחדל ב-HTML?

text. <input> בלי type, או עם סוג שהדפדפן לא מכיר, הוא שדה טקסט של שורה אחת.

להשתמש ב-type="number" למספרי טלפון או למיקודים?

לא. number מיועד לכמויות: הוא מוסיף כפתורי הגדלה והקטנה, ודוחה את ה-+, הרווחים והמקפים שיש במספרי טלפון. השתמשו ב-type="tel" למספרי טלפון, וב-type="text" עם inputmode="numeric" לקודים כמו מיקודים ומספרי כרטיסים.

באיזה פורמט משתמש input type date?

הערך הוא תמיד YYYY-MM-DD, כמו 2026-09-24, לא משנה באיזה פורמט הקורא רואה אותו על המסך. התצוגה עוקבת אחרי האזור של הקורא; הערך שנשלח ושנקרא בסקריפט לא.

האם לתגית input צריך תגית סגירה?

לא. <input> הוא אלמנט ריק: כתבו <input type="text" name="city">. תגית סגירה </input> אינה תקינה, והלוכסן של סגירה עצמית ב-<input /> מותר אבל לא עושה כלום.

מושגים קשורים