תיעוד HTML עם דוגמאות להרצה: כפתור קישור

Q: איך יוצרים ב-HTML כפתור שמקשר לעמוד אחר?

השתמשו בקישור ועצבו אותו ככפתור: Sign up עם CSS לריפוד, רקע, פינות מעוגלות ו-text-decoration: none. הוא נראה ככפתור ומתנהג כקישור, כי זה מה שהוא.

Q: אפשר לשים כפתור בתוך תגית a?

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

Q: יש לכפתור מאפיין href?

לא. ל- אין href. כדי לשלוח את הדפדפן ל-URL, השתמשו ב- , או שימו את הכפתור בתוך עם action (מאפיין formaction על הכפתור גובר עליו).

Q: איך משביתים קישור שנראה ככפתור?

לקישורים אין מאפיין disabled. הסירו את ה-href כדי שיפסיק להיות קישור, הוסיפו aria-disabled="true", ועצבו אותו כמושבת. החזירו את ה-href כשהוא אמור לעבוד שוב.

איך יוצרים כפתור שמקשר לעמוד

כתבו קישור רגיל, <a href>, ועצבו אותו עם CSS כך שייראה ככפתור. הוא מוביל לעמוד כמו כל קישור, ושומר על כל יכולות הקישור: פתיחה בלשונית חדשה, העתקת כתובת הקישור ותצוגת ה-URL במעבר עכבר.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

הכללים שהופכים קישור לכפתור:

display: inline-block מאפשר לריפוד להרחיב את התיבה ושומר אותה בשורת הטקסט.
text-decoration: none מסיר את הקו התחתון.
color ו-background מחליפים את צבע הקישור הכחול.
:focus-visible נותן למשתמשי מקלדת טבעת מיקוד ברורה.

אותה מחלקה עובדת גם על <button>, כך שכפתור שליחה של טופס וקישור לעמוד אחר יכולים להיראות זהים כשכל אחד עושה את העבודה שלו.

כפתור או קישור: באיזה אלמנט להשתמש

השאלה היא מה קורה בלחיצה, לא איך זה נראה.

לחיצה עליו	אלמנט	דוגמאות
עוברת ל-URL אחר	`<a href>`	הרשמה, קראו עוד, צפו במחירים, הורדה
משנה משהו בעמוד הזה	`<button type="button">`	פתיחת תפריט, ניגון, הוספה לסל, הצגת סיסמה
שולחת טופס	`<button type="submit">`	התחברות, חיפוש, שמירה

קישור שמוכרז כ"קישור" וכפתור שמוכרז כ"כפתור" אומרים למשתמשי קוראי מסך מה יקרה. גם ההתנהגות במקלדת שונה: Enter מפעיל את שניהם, אבל Space מפעיל רק כפתורים (בקישור, Space גולל את העמוד). האלמנט button עצמו מוסבר בHTML button.

למה לא לשים כפתור בתוך קישור

זו התבנית שרוב האנשים מנסים קודם:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

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

למה לא onclick עם location.href

הפתרון העוקף הנפוץ השני הוא כפתור שמגדיר את ה-URL ב-JavaScript. הוא נראה בדיוק כמו קישור:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(הדוגמה משתמשת ב-window.open כי התצוגה המקדימה לא יכולה לנווט החוצה; הקוד הרגיל הוא location.href = '...'.) העבירו עכבר ולחצו לחיצה ימנית על שניהם: רק הקישור האמיתי מציג את ה-URL שלו ומציע "פתיחת קישור בלשונית חדשה" ו"העתקת כתובת הקישור". הכפתור גם לא מקבל Ctrl+לחיצה או לחיצה אמצעית, הדפדפן לא מסמן אותו כמבוקר, ומנועי חיפוש לא עוקבים אחריו כקישור. אם היעד הוא URL, כתבו <a href>.

כפתור טופס שפותח URL

יש מקרה אחד שבו <button> שעובר לעמוד אחר הוא הנכון: כשהוא שולח נתונים יחד איתו. תיבת חיפוש היא הדוגמה הקלאסית. ה-action של הטופס הוא ה-URL ו-method="get" מכניס את השדות למחרוזת השאילתה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

לחצו על Search: בעמוד אמיתי הדפדפן היה עובר אל https://duckduckgo.com/?q=html+button+link. התצוגה המקדימה מציגה את הנתונים במקום לעזוב. formaction שולח את אותו טופס ל-URL אחר מהכפתור השני.

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

לקישורים אין מאפיין disabled; <a disabled> לא עושה כלום. כדי לכבות כפתור קישור, הסירו את ה-href שלו (<a> בלי href אינו קישור ואי אפשר ללחוץ עליו או למקד אותו), וסמנו אותו עם aria-disabled="true" כדי שגם העיצוב וגם קוראי המסך יידעו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

לחצו על Tab בתצוגה המקדימה: המיקוד נוחת רק על הכפתור הראשון. יש אתרים שמשאירים את ה-href ומוסיפים pointer-events: none במקום, אבל זה חוסם רק את העכבר. הקישור נשאר נגיש עם Tab ו-Enter עדיין עוקב אחריו.

כפתורי לשונית חדשה והורדה

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

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

זו עוד סיבה להשתמש ב-<a>: ל-<button> אין download או target. עוד על target בפתיחת קישור בלשונית חדשה.

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

כפתור בתוך קישור, או קישור בתוך כפתור. HTML לא תקין עם התנהגות בלתי צפויה.
<button onclick="location.href=..."> לניווט פשוט. אין לשונית חדשה, אין העתקת קישור, אין סריקה.
role="button" על קישור שמנווט. זה אומר למשתמשי קוראי מסך שיש שם כפתור, ואז העמוד מתחלף. השאירו אותו קישור.
קישורים שמעוצבים ככפתורים לפעולות כמו "Delete" או "Open menu" עם href="#". אם שום דבר לא נטען, השתמשו ב-<button type="button">.
<a disabled>. המאפיין לא קיים בקישורים. הסירו את ה-href.
שכחה של display: inline-block, כך שהריפוד האנכי חופף לשורות שמעל ומתחת.

שאלות נפוצות

איך יוצרים ב-HTML כפתור שמקשר לעמוד אחר?

השתמשו בקישור ועצבו אותו ככפתור: <a href="/signup" class="btn">Sign up</a> עם CSS לריפוד, רקע, פינות מעוגלות ו-text-decoration: none. הוא נראה ככפתור ומתנהג כקישור, כי זה מה שהוא.

אפשר לשים כפתור בתוך תגית a?

לא. תקן HTML לא מתיר תוכן אינטראקטיבי כמו <button> בתוך <a>. דפדפנים מטפלים בזה בצורה שונה, משתמשי מקלדת מקבלים שתי עצירות Tab לפקד אחד, וקוראי מסך מכריזים עליו בצורה מבלבלת. השתמשו באלמנט אחד.

יש לכפתור מאפיין href?

לא. ל-<button> אין href. כדי לשלוח את הדפדפן ל-URL, השתמשו ב-<a href>, או שימו את הכפתור בתוך <form> עם action (מאפיין formaction על הכפתור גובר עליו).

זה רע להשתמש ב-onclick עם location.href על כפתור?

זה עובד, אבל הקורא מאבד את כל מה שקישורים נותנים: לחיצה אמצעית ו-Ctrl+לחיצה ללשונית חדשה, העתקת כתובת הקישור, תצוגת ה-URL במעבר עכבר, ומנועי חיפוש לא עוקבים אחריו כקישור. השתמשו ב-<a> כשהיעד הוא URL.

איך משביתים קישור שנראה ככפתור?

לקישורים אין מאפיין disabled. הסירו את ה-href כדי שיפסיק להיות קישור, הוסיפו aria-disabled="true", ועצבו אותו כמושבת. החזירו את ה-href כשהוא אמור לעבוד שוב.

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