Home / Інтернет / Веб програмування / Як вставити код на кнопку

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

Як вставити код на кнопку</a>

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

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

Способи виклику відповідного JavaScript-коду можуть відрізнятися - нижче описані кілька можливих варіантів для кнопок різного типу.

Інструкція

    1

Якщо відображення кнопки в веб-сторінціорганізовано за допомогою тега button, то JavaScript-код можна помістити в атрибут onclick. Наприклад, так: & lt-button onclick = "alert ( 'Кнопка натиснута!') -« & gt-кнопка & lt- / button & gt-Зрозуміло, поміщати безпосередньо в тег кнопки досить великий код не доцільно - краще оформити його як функцію, а в атрибут onclick помістити тільки код виклику цієї функції. Наприклад: & lt-script & gt-
function showAlert () {
alert ( 'Кнопка натиснута!')
}
& Lt- / script & gt- & lt-button onclick = "showAlert ()» & gt-кнопка & lt- / button & gt-

    2

Якщо кнопка відображається за допомогою одного зваріантів тега input (submit, reset, button або image), то можна використовувати той же самий атрибут onclick. Наприклад, для кнопки очищення полів форми (reset), код може виглядати так: & lt-input type = "RESET» onclick = "showAlert ()» / & gt-Якщо необхідно, щоб після натискання кнопки виконувався тільки JavaScript-сценарій, а призначеного їй за замовчуванням дії не відбувалося, то в функцію або безпосередньо в атрибут onclick слід додати команду return false. Наприклад: & lt-input type = "RESET» onclick = "showAlert () - RETURN FALSE» / & gt-

    3

Якщо треба організувати відгук на натискання кнопкитипу submit, то, крім наведеного вище способу з використанням атрибута onclick, можна використовувати властивості тега форми, на яке поширюється така кнопка. Відповідний виклик функції можна помістити в атрибут onsubmit тега form. Наприклад: & lt-form action = "" onsubmit = »showAlert () - RETURN FALSE» & gt-
& Lt-input type = "submit" / & gt-
& Lt- / form & gt-

    4

Якщо кнопка не є елементом форми, а всьоголише графічним елементом (тег img), то і для нього стандарти допускають використання атрибута onclick. Наприклад: & lt-img src = "btn.gif» onclick = "showAlert () -" / & gt-

    5

Якщо кнопка є гіперпосиланням, товикористовувати атрибути самої кнопки не варто, краще скористатися властивостями тега посилання. Можна, як і в попередніх варіантах, задіяти тег onclick. Наприклад: & lt-a href = "http://learn-myself.com» onclick = "showAlert () - RETURN FALSE -« & gt- & lt-img src = "btn.gif» / & gt- & lt- / a & gt-А можна замінити викликом функції адреса в атрибуті href. Наприклад, так: & lt-a href = "javascript: showAlert () -« & gt- & lt-img src = "btn.gif» / & gt- & lt- / a & gt-

Як вставити код на кнопку was last modified: Червень 20th 2017 by fyyxoahr
It is main inner container footer text