תיעוד HTML עם דוגמאות להרצה: כפתור (button)

Q: איך יוצרים כפתור ב-HTML?

כתבו Click me . הטקסט בין התגיות הוא התווית. הוסיפו listener של click ב-JavaScript כדי שיעשה משהו, או שימו אותו בתוך עם type="submit" כדי לשלוח את הטופס.

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

submit. בלי מאפיין type בתוך טופס שולח את הטופס בלחיצה, ולכן כפתור רגיל בטופס יכול לטעון מחדש את העמוד. כתבו type="button" לכל כפתור שמריץ JavaScript במקום.

Q: מה ההבדל בין button ל-input type=submit?

שניהם שולחים טופס. יכול להכיל HTML (אייקון, טקסט מודגש) בין התגיות, ואילו לוקח את התווית שלו מהמאפיין value ויכול להכיל רק טקסט פשוט. רוב הקוד המודרני משתמש ב- .

Q: איך משביתים כפתור ב-HTML?

הוסיפו את המאפיין disabled: Save . אי אפשר ללחוץ על כפתור מושבת או למקד אותו, והשם והערך שלו לא נשלחים עם הטופס. הסירו את המאפיין (btn.disabled = false ב-JavaScript) כדי להפעיל אותו שוב.

Q: איך גורמים לכפתור HTML לעבור לעמוד אחר?

השתמשו בקישור שמעוצב ככפתור: See pricing . נועד לפעולות בעמוד הנוכחי. עטיפת כפתור ב- היא HTML לא תקין.

Q: למה הכפתור שלי טוען מחדש את העמוד?

הוא נמצא בתוך ואין לו type, אז הוא כפתור שליחה והדפדפן שולח את הטופס וטוען את התגובה. הוסיפו לו type="button", או קראו ל-event.preventDefault() בתוך listener של submit אם אתם מטפלים בטופס עם JavaScript.

איך יוצרים כפתור ב-HTML

כפתור הוא האלמנט <button>. התוכן בין התגיות הוא מה שהמשתמש רואה, ו-type="button" אומר שהוא מריץ את הסקריפט שלכם ולא שולח טופס. לחצו עליו בתצוגה המקדימה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

זה כל מה שכפתור עובד צריך: תווית, type ומשהו שמאזין ל-click. הדפדפן הופך אותו לבר מיקוד במקלדת ומפעיל אותו עם Enter או Space, כך שמשתמשי מקלדת מקבלים את זה בחינם. <div> עם handler של לחיצה לא מקבל שום דבר מזה.

אולי תראו גם onclick="..." כתוב ישירות בתגית. זה עובד, אבל addEventListener מוציא את הסקריפט מהקוד של העמוד ומאפשר לכמה listeners לחלוק כפתור אחד.

שלושת סוגי הכפתורים

המאפיין type קובע מה כפתור עושה כשלוחצים עליו.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset משחזר את הערך שכתוב ב-HTML (Ada), לא שדה ריק. ואם תמחקו את type="button" מ-Uppercase, הוא יהפוך לכפתור שליחה: הוא ימיר את השם לאותיות גדולות ואז ישלח את הטופס.

כפתור submit ב-HTML: שליחת name ו-value

כפתור שליחה יכול לשאת name ו-value משלו. הם נשלחים עם הטופס רק כשהכפתור הזה הוא זה ששלח אותו, כך ששני כפתורים יכולים לחלוק טופס אחד ולומר לשרת איזו פעולה נבחרה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

לחצו על Publish והטופס שולח title=My first post ו-action=publish. מחקו את הכותרת ולחצו על אחד הכפתורים: required עוצר את השליחה והדפדפן מציג הודעה משלו. לחיצה על Enter בתוך שדה הטקסט גם שולחת, והדפדפן מתייחס לזה כלחיצה על כפתור השליחה הראשון, ולכן הוא שולח action=draft.

כפתורי שליחה מקבלים גם מאפיינים שגוברים על הטופס עבור הכפתור הזה בלבד: formaction (URL אחר), formmethod, formtarget ו-formnovalidate, שמדלג על האימות. formnovalidate הוא הבחירה הרגילה לכפתור "Save draft" שצריך לעבוד כששדות החובה עדיין ריקים.

כפתור שנמצא מחוץ לטופס שלו עדיין יכול לשלוח אותו עם המאפיין form, שמקבל את ה-id של הטופס: <button type="submit" form="signup">Sign up</button>.

כפתורים מושבתים

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

ב-JavaScript, button.disabled הוא מאפיין בוליאני: הגדירו אותו ל-true או false. ב-HTML, מה שקובע הוא עצם הנוכחות של המאפיין, ולכן disabled="false" עדיין משבית את הכפתור.

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

עיצוב כפתור עם CSS

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

בשביל מה כל כלל:

font: inherit גורם לכפתור להשתמש בגופן של העמוד. בלעדיו כפתורים משתמשים בגופן הטפסים הקטן יותר של הדפדפן (13.33px ב-Chrome וב-Firefox).
cursor: pointer מציג את סמן היד. כברירת מחדל כפתורים מציגים את החץ הרגיל.
:hover, :active ו-:focus-visible מעצבים את מצבי העכבר, הלחיצה והמקלדת. :focus-visible מציג את הטבעת במיקוד מקלדת אבל לא אחרי לחיצת עכבר, כך שאין צורך להסיר את outline כדי להימנע ממנה.
:disabled מכוון לכפתורים עם המאפיין disabled.

לחצו על Tab בתצוגה המקדימה כדי לראות את טבעת המיקוד בצבע ענבר עוברת בין שני הכפתורים הראשונים. המושבת מדולג. (ב-Mac, Safari ו-Firefox עוברים עם Tab לכפתורים רק כשניווט המקלדת מופעל בהגדרות המערכת; ב-Safari, Option+Tab עובד גם בלי זה.) לרשימה המלאה של המצבים, ראו CSS hover.

כפתורים עם אייקונים

מכיוון ש-<button> יכול להכיל HTML, אייקון נכנס לתוכו ליד הטקסט. לכפתור עם אייקון בלבד אין טקסט שקוראי מסך יכולים להכריז, אז תנו לו aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" על ה-SVG מוציא אותו מעץ הנגישות, כך שהכפתור הראשון מוכרז כ"Add item, button" והשני כ"Delete, button".

button מול input type="submit"

<input type="submit"> הוא הדרך הישנה יותר לכתוב כפתור שליחה. שניהם שולחים את הטופס באותה צורה; ההבדל הוא במה שהם יכולים להכיל.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
תווית	התוכן בין התגיות	המאפיין `value`
יכול להכיל אייקונים או תגיות	כן	לא
תגית סגירה	חובה	אין (אלמנט ריק)
סוג ברירת מחדל	`submit`	תמיד submit

השתמשו ב-<button>. הסיבה היחידה להשאיר <input type="submit"> היא CSS או JavaScript קיימים שבוחרים אותו. יש גם <input type="button"> ו-<input type="reset">, אותו רעיון לשני הסוגים האחרים.

כפתור או קישור?

כפתור עושה משהו בעמוד הנוכחי: שולח, פותח, מחליף מצב, מוחק. קישור עובר ל-URL אחר. אם לחיצה עליו משנה את שורת הכתובת, הוא צריך להיות <a href>, מעוצב ככפתור אם העיצוב דורש. התבנית הזו, ולמה כפתור בתוך קישור אינו תקין, מוסברות בHTML button link.

נגישות

השתמשו ב-<button> אמיתי. הוא בר מיקוד, עובד עם Enter ו-Space, ומוכרז ככפתור. בנייה מחדש של כל זה על <div> דורשת role, tabindex ו-handlers של מקשים, ובדרך כלל עדיין לא שלמה.
כל כפתור צריך שם: הטקסט שלו, או aria-label כשיש לו רק אייקון.
השאירו סגנון מיקוד גלוי. outline: none בלי תחליף משאיר את משתמשי המקלדת אבודים.
הפכו את היעד לגדול מספיק כדי לפגוע בו. WCAG 2.2 דורש לפחות 24 על 24 פיקסלים של CSS; ריפוד כמו בדוגמה המעוצבת למעלה נותן גובה של כ-40 פיקסלים.
במתג, הוסיפו aria-pressed="true" או "false" ועדכנו אותו כשהמצב משתנה.

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

כפתור בטופס בלי type. הוא שולח את הטופס. כתבו type="button" על כל כפתור שלא אמור לשלוח.
עטיפת כפתור בקישור, <a href="/x"><button>Go</button></a>. זה HTML לא תקין שמתנהג אחרת בכל דפדפן. השתמשו באלמנט אחד: קישור שמעוצב ככפתור.
שימוש ב-<div onclick> ככפתור. אי אפשר להגיע אליו עם המקלדת.
הסרת קו המיקוד בלי להוסיף סגנון :focus-visible.
כתיבת disabled="false" וציפייה לכפתור פעיל. הסירו את המאפיין במקום.
שכחה של font: inherit ותהייה למה הכפתורים משתמשים בגופן שונה משאר העמוד.

שאלות נפוצות

איך יוצרים כפתור ב-HTML?

כתבו <button type="button">Click me</button>. הטקסט בין התגיות הוא התווית. הוסיפו listener של click ב-JavaScript כדי שיעשה משהו, או שימו אותו בתוך <form> עם type="submit" כדי לשלוח את הטופס.

מה סוג ברירת המחדל של כפתור HTML?

submit. <button> בלי מאפיין type בתוך טופס שולח את הטופס בלחיצה, ולכן כפתור רגיל בטופס יכול לטעון מחדש את העמוד. כתבו type="button" לכל כפתור שמריץ JavaScript במקום.

מה ההבדל בין button ל-input type=submit?

שניהם שולחים טופס. <button> יכול להכיל HTML (אייקון, טקסט מודגש) בין התגיות, ואילו <input type="submit"> לוקח את התווית שלו מהמאפיין value ויכול להכיל רק טקסט פשוט. רוב הקוד המודרני משתמש ב-<button>.

איך משביתים כפתור ב-HTML?

הוסיפו את המאפיין disabled: <button disabled>Save</button>. אי אפשר ללחוץ על כפתור מושבת או למקד אותו, והשם והערך שלו לא נשלחים עם הטופס. הסירו את המאפיין (btn.disabled = false ב-JavaScript) כדי להפעיל אותו שוב.

איך גורמים לכפתור HTML לעבור לעמוד אחר?

השתמשו בקישור שמעוצב ככפתור: <a href="/pricing" class="btn">See pricing</a>. <button> נועד לפעולות בעמוד הנוכחי. עטיפת כפתור ב-<a> היא HTML לא תקין.

למה הכפתור שלי טוען מחדש את העמוד?

הוא נמצא בתוך <form> ואין לו type, אז הוא כפתור שליחה והדפדפן שולח את הטופס וטוען את התגובה. הוסיפו לו type="button", או קראו ל-event.preventDefault() בתוך listener של submit אם אתם מטפלים בטופס עם JavaScript.

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