HTML-тег <button>

HTML-тег <button> используется для создания кликабельных кнопок на веб-странице. Он может использоваться для отправки форм, вызова функций JavaScript или обеспечения взаимодействия с пользователем. Кнопки можно легко настраивать с помощью текста, значков и стилей.

Базовый пример HTML-тега <button>

Вот простой пример кнопки: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Basic Button Example</h2>
        <button>Click Me</button>
    </body>
</html>
Базовый пример HTML-кнопки Тег

По умолчанию эта кнопка не выполняет никаких действий, но ее можно настроить для выполнения определенных задач.

Атрибуты HTML-тега <button>

  • Тип: определяет тип кнопки. Возможные значения: <ul class="wp-block-list">
  • button : Простая кнопка без поведения по умолчанию.
  • submit : отправляет форму, в которой она содержится.
  • reset : Сбрасывает все поля формы к их начальным значениям.
  • отключено: отключает кнопку, делая ее неактивной.
  • Имя: Указывает имя кнопки, используемой при отправке данных формы.
  • значение: указывает значение, связанное с кнопкой, отправленное вместе с данными формы.

    • Пример с отправкой формы

    Атрибут type="submit" позволяет кнопке отправлять форму: 

    <!DOCTYPE html>
<html>
    <body>
        <h2>Form Submission Example</h2>
        <form action="/submit" method="post">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">


            <button type="submit">Submit</button>
        </form>
    </body>
</html>
    Пример кнопки с отправкой формы

    Использование JavaScript с HTML-тегом <button>

    Атрибут onclick позволяет запускать функции JavaScript при нажатии кнопки: 

    <!DOCTYPE html>
<html>
    <head>
        <script>
            function showAlert() {
                alert('Button clicked!');
            }
        </script>
    </head>
    <body>
        <h2>Button with JavaScript</h2>
        <button onclick="showAlert()">Click Me</button>
    </body>
</html>

    Стилизация тега <button> с помощью CSS

    Тег <button> можно стилизовать с помощью CSS, чтобы настроить его внешний вид: 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            button {
                background-color: #4CAF50;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
            }

            button:hover {
                background-color: #45a049;
            }
        </style>
    </head>
    <body>
        <h2>Styled Button Example</h2>
        <button>Styled Button</button>
    </body>
</html>
    Оформление кнопки Тег с помощью CSS

    Особые случаи для HTML-тега <button>

    Отключенная кнопка

    Отключенную кнопку невозможно нажать или с ней невозможно взаимодействовать: 

    <!DOCTYPE html>
<html>
    <body>
        <h2>Disabled Button</h2>
        <button disabled>Disabled</button>
    </body>
</html>

    Кнопка со значком

    Кнопки могут включать значки для улучшения дизайна и функциональности: 

    <!DOCTYPE html>
<html>
    <body>
        <h2>Button with Icon</h2>
        <button>
            <img src="icon.png" alt="Icon" style="width:16px; height:16px; vertical-align:middle;"> Submit
        </button>
    </body>
</html>
    Кнопка со значком