Як вставити код на кнопку

Як вставити код на кнопку

Кнопки у веб-сторінках використовуються для організації інтерактивної взаємодії з користувачем. Як правило, якщо відповідь на натискання кнопки не вимагає відправки даних на сервер, то інтерактив реалізується за допомогою JavaScript-сценаріїв. Способи виклику відповідного JavaScript-коду можуть відрізнятися — нижче описані кілька можливих варіантів для кнопок різного типу.

Інструкція

  1. Якщо відображення кнопки у веб-сторінці організовано за допомогою тега button, то JavaScript-код можна помістити в атрибут onclick. Наприклад, так:

    <button onclick=»alert(‘Кнопка нажата!’);»> кнопка </ button>

    Зрозуміло, поміщати безпосередньо в тег кнопки досить великий код не доцільно — краще оформити його як функцію, а в атрибут onclick помістити тільки код виклику цієї функції. Наприклад:

    <script>

     function showAlert () {

      alert (‘Кнопка натиснуто!’)

     }

    </ Script>

    <button onclick=»showAlert()»> кнопка </ button>
  2. Якщо кнопка відображається за допомогою одного з варіантів тега input (submit, reset, button або image), то можна використовувати той же самий атрибут onclick. Наприклад, для кнопки очищення полів форми (reset), код може виглядати так:

    <input type=»reset» onclick=»showAlert()» />

    Якщо необхідно, щоб після натискання кнопки виконувався тільки JavaScript-сценарій, а призначеного їй за замовчуванням дії не відбувалося, то в функцію або безпосередньо в атрибут onclick слід додати команду return false. Наприклад:

    <input type=»reset» onclick=»showAlert();return false» />
  3. Якщо треба організувати відгук на натискання кнопки типу submit, то, крім наведеного вище способу з використанням атрибута onclick, можна використовувати властивості тега форми, до якої належить ця кнопка. Відповідний виклик функції можна помістити в атрибут onsubmit тега form. Наприклад:

    <form action=»" onsubmit=»showAlert(); return false»>

     <input type=»submit» />

    </ Form>
  4. Якщо кнопка не є елементом форми, а всього лише графічним елементом (тег img), то і для нього стандарти допускають використання атрибута onclick. Наприклад:

    <img src=»btn.gif» onclick=»showAlert();» />
  5. Якщо кнопка є гіперпосиланням, то використовувати атрибути самої кнопки не варто, краще скористатися властивостями тега посилання. Можна, як і в попередніх варіантах, задіяти тег onclick. Наприклад:

    <a href=»http://kakprosto.ru» onclick=»showAlert(); return false;»> <img src=»btn.gif» /> </ a>

    А можна замінити викликом функції адреса в атрибуті href. Наприклад, так:

    <a href=»javascript:showAlert();»> <img src=»btn.gif» /> </ a>