Как вставить код на кнопку

Кнопки в веб-страницах используются для организации интерактивного взаимодействия с пользователем. Как правило, если ответ на нажатие кнопки не требует отправки данных на сервер, то интерактив реализуется с помощью 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="https://www.kakprosto.ru/" onclick="showAlert(); RETURN FALSE;"><img src="btn.gif" /></a>А можно заменить вызовом функции адрес в атрибуте href. Например, так:<a href="javascript:showAlert();"><img src="btn.gif" /></a>