תיעוד HTML עם דוגמאות להרצה: טפסים (form)

Q: איך יוצרים טופס ב-HTML?

עטפו את השדות ב- , תנו לכל שדה name ו- , וסיימו עם . כשהטופס נשלח, הדפדפן שולח כל זוג name=value לכתובת ה-action.

Q: מה ההבדל בין GET ל-POST בטופס?

method="get" (ברירת המחדל) מכניס את השדות לכתובת, כמו /search?q=shoes, מה שמתאים לחיפושים ולמסננים שכדאי שאפשר יהיה לשמור בסימניות. method="post" שולח אותם בגוף הבקשה, וזה מה שרוצים בהתחברות, בהרשמה ובכל דבר שמשנה נתונים.

Q: למה שדה בטופס שלי לא נשלח?

אין לו מאפיין name, או שהוא disabled. רק שדות עם שם ופעילים נשלחים. גם checkbox או כפתור רדיו לא מסומנים לא נכללים בכלל.

Q: בשביל מה משמשים fieldset ו-legend?

מקבץ שדות קשורים ו- הוא הכיתוב של הקבוצה. קוראי מסך מכריזים את ה-legend כשהמיקוד נכנס לקבוצה, וזה מה שהופך קבוצה של כפתורי רדיו למובנת, ו-disabled על fieldset משבית כל שדה שבתוכו.

Q: איך מאמתים טופס ב-HTML בלי JavaScript?

השתמשו במאפיינים: required, type="email", minlength, maxlength, min, max ו-pattern. הדפדפן חוסם את השליחה ומציג הודעה לשדה הלא תקין הראשון. תמיד אמתו גם בשרת, כי הבדיקות האלה רצות בדפדפן של הקורא ואפשר לעקוף אותן.

Q: איך מונעים מטופס לטעון מחדש את העמוד?

האזינו לאירוע submit של הטופס וקראו ל-event.preventDefault(), ואז שלחו את הנתונים בעצמכם עם fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

איך יוצרים טופס ב-HTML

טופס הוא אלמנט <form> שמכיל שדות וכפתור שליחה. כל שדה צריך name: זה המפתח שתחתיו הערך נשלח. מלאו את הטופס ולחצו על Send. התצוגה המקדימה לא שולחת שום דבר לשום מקום; היא מציגה בדיוק מה הדפדפן היה שולח.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

החלקים:

action הוא הכתובת שאליה הנתונים הולכים, ו-method הוא האופן (כאן post).
name על כל שדה. הערך שלו הוא מה שהקורא הקליד.
<label> נותן שם לכל שדה על המסך ועבור קוראי מסך (ראו HTML label).
required ו-type="email" גורמים לדפדפן לבדוק את השדות לפני השליחה. נסו לשלוח עם שם ריק, או עם abc בתור אימייל.
כפתור השליחה שולח את הטופס. גם לחיצה על Enter בשדה טקסט עושה את זה.

action ו-method: לאן ואיך הנתונים הולכים

מאפיין	ערכים	ברירת מחדל
`action`	כל URL	ה-URL של העמוד הנוכחי
`method`	`get`, `post`, `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`	`application/x-www-form-urlencoded`

עם method="get", השדות הופכים למחרוזת השאילתה של הכתובת: טופס חיפוש עם name="q" הולך אל /search?q=blue+shoes. זה נכון לחיפושים ולמסננים, כי אפשר לשמור את התוצאה בסימניות ולשתף אותה. עם method="post", השדות נשלחים בגוף הבקשה ולא מופיעים בשורת הכתובת או בהיסטוריה. השתמשו ב-POST לכל דבר שמתחבר, יוצר, משנה או מוחק משהו, ולסיסמאות.

טופס עם העלאת קובץ (<input type="file">) צריך method="post" ו-enctype="multipart/form-data", אחרת נשלח רק שם הקובץ. method="dialog" מיועד לטופס בתוך <dialog>: השליחה סוגרת את הדיאלוג במקום לשלוח בקשה.

מה נשלח

רק שדות עם name נשלחים, ורק כשהם לא disabled. לחצו על Submit והשוו את השדות למה שהטופס שולח:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

הטופס שולח city, zip, source ו-action. השדה בלי שם, השדה המושבת וה-checkbox הלא מסומן נשארים בחוץ. שדות מוסתרים נשלחים אבל אף פעם לא מוצגים, וכפתור השליחה שולח את ה-name וה-value שלו כי זה הכפתור שבו השתמשו.

קיבוץ שדות עם fieldset ו-legend

<fieldset> מצייר תיבה סביב שדות קשורים, ו-<legend> הוא הכיתוב שלה. קוראי מסך מכריזים את ה-legend כשהמיקוד נכנס לקבוצה, וזה מה שהופך קבוצת כפתורי רדיו כמו אלה שלמטה למובנת: "Delivery, Standard, radio button".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled על fieldset משבית בבת אחת כל שדה שבתוכו, ואף אחד מהם לא נשלח. הסירו אותו ושדות המתנה יהפכו לשמישים.

אימות מובנה: required, pattern והחברים שלהם

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

מאפיין	בודק
`required`	השדה לא ריק (checkbox מסומן)
`type="email"`, `type="url"`	הערך נראה כמו כתובת אימייל או URL
`minlength`, `maxlength`	אורך הטקסט
`min`, `max`, `step`	טווח מספרים ותאריכים
`pattern`	הערך כולו תואם לביטוי רגולרי

:invalid ו-:valid מעצבים שדות לפי המצב שלהם. :user-invalid בדרך כלל עדיף: הוא חל רק אחרי שהקורא שינה את השדה ועבר הלאה, או ניסה לשלוח, כך שטופס ריק לא נפתח כשהוא מכוסה באדום.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

שלושה דברים ב-pattern מכשילים אנשים. הוא חייב להתאים לערך כולו (אין צורך ב-^ או $). הוא רץ רק כשהשדה לא ריק, אז שלבו אותו עם required. והודעת השגיאה של הדפדפן כללית, אז תארו את הפורמט בטקסט גלוי ליד השדה. Chrome ו-Firefox מוסיפים את טקסט ה-title להודעה שלהם, אבל קל לפספס אותו.

כדי לכבות את הבדיקות, למשל כשאתם בודקים את האימות של השרת, הוסיפו novalidate ל-<form>. כפתור שליחה יחיד יכול לדלג עליהן עם formnovalidate.

אימות בדפדפן נועד לנוחות הקורא. כל אחד יכול לערוך את העמוד או לשלוח בקשה בלעדיו, אז השרת חייב לבדוק כל ערך שוב.

הודעות מותאמות עם setCustomValidity

כשאי אפשר לכתוב כלל כמאפיין, כמו "שתי הסיסמאות חייבות להיות זהות", הגדירו את ההודעה מ-JavaScript. שדה עם הודעה מותאמת לא ריקה הוא לא תקין; מחרוזת ריקה הופכת אותו לתקין שוב:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

לשדה החזרה אין name, כך שרק עותק אחד של הסיסמה נשלח.

טיפול בשליחה ב-JavaScript

כדי לשלוח את הטופס בלי לעזוב את העמוד, האזינו ל-submit, קראו ל-preventDefault(), וקראו את השדות עם FormData. האזנה ל-submit ולא ל-click של כפתור תופסת כל דרך שליחה, כולל Enter, ורצה רק אחרי שהאימות המובנה עבר:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) הופך את השדות לאובייקט פשוט. לשדות שיכולים להיות להם כמה ערכים (checkboxes שחולקים שם, select מרובה) השתמשו ב-formData.getAll('name') במקום, כי האובייקט שומר רק את הערך האחרון.

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

שדות בלי name. הם נשארים בשקט מחוץ לנתונים שנשלחים.
placeholders במקום תוויות. הרמז נעלם ברגע שהקורא מקליד. השתמשו ב-<label>.
<button> בלי type שמשמש למשהו אחר חוץ משליחה. בתוך טופס הוא כפתור שליחה.
טופס בתוך טופס. קינון טפסים אינו תקין; הדפדפן מתעלם מתגית ה-<form> הפנימית.
האזנה ל-click על כפתור השליחה במקום ל-submit על הטופס. שליחות עם מקש Enter מתפספסות.
הסתמכות על אימות הדפדפן בצד השרת. אמתו שוב שם.
GET לסיסמאות. הן מגיעות לכתובת, להיסטוריה וללוגים של השרת.

שאלות נפוצות

איך יוצרים טופס ב-HTML?

עטפו את השדות ב-<form action="/signup" method="post">, תנו לכל שדה name ו-<label>, וסיימו עם <button type="submit">. כשהטופס נשלח, הדפדפן שולח כל זוג name=value לכתובת ה-action.

מה ההבדל בין GET ל-POST בטופס?

method="get" (ברירת המחדל) מכניס את השדות לכתובת, כמו /search?q=shoes, מה שמתאים לחיפושים ולמסננים שכדאי שאפשר יהיה לשמור בסימניות. method="post" שולח אותם בגוף הבקשה, וזה מה שרוצים בהתחברות, בהרשמה ובכל דבר שמשנה נתונים.

למה שדה בטופס שלי לא נשלח?

אין לו מאפיין name, או שהוא disabled. רק שדות עם שם ופעילים נשלחים. גם checkbox או כפתור רדיו לא מסומנים לא נכללים בכלל.

בשביל מה משמשים fieldset ו-legend?

<fieldset> מקבץ שדות קשורים ו-<legend> הוא הכיתוב של הקבוצה. קוראי מסך מכריזים את ה-legend כשהמיקוד נכנס לקבוצה, וזה מה שהופך קבוצה של כפתורי רדיו למובנת, ו-disabled על fieldset משבית כל שדה שבתוכו.

איך מאמתים טופס ב-HTML בלי JavaScript?

השתמשו במאפיינים: required, type="email", minlength, maxlength, min, max ו-pattern. הדפדפן חוסם את השליחה ומציג הודעה לשדה הלא תקין הראשון. תמיד אמתו גם בשרת, כי הבדיקות האלה רצות בדפדפן של הקורא ואפשר לעקוף אותן.

איך מונעים מטופס לטעון מחדש את העמוד?

האזינו לאירוע submit של הטופס וקראו ל-event.preventDefault(), ואז שלחו את הנתונים בעצמכם עם fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

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