Кнопка ввода HTML

Элемент HTML <input> с type="button" используется для создания нажимаемой кнопки, которая может выполнять пользовательские действия, определенные с помощью JavaScript.

В отличие от других типов ввода, таких как submit или reset , которые имеют предопределенное поведение, <input type="button"> отличается высокой универсальностью и полностью зависит от JavaScript в своей функциональности.

В этом руководстве мы рассмотрим все, что вам нужно знать о <input type="button"> , включая синтаксис, стили и практические варианты использования.

1 Синтаксис для кнопки ввода HTML

Базовый синтаксис кнопки ввода прост: 

<input type="button" value="Button Text" onclick="javascriptFunction()">

Здесь:

  • type="button" : Указывает, что элемент ввода — кнопка.
  • value : Задает текст, который отображается на кнопке.
  • onclick : Указывает функцию JavaScript, которая будет выполнена при нажатии кнопки.

Скриншот

Пример кнопки ввода HTML

2 Создание простой кнопки

Чтобы создать кнопку, при нажатии на которую отображается сообщение, используйте следующий пример: 

<input type="button" value="Click Me" onclick="showAlert()">

<script>
  function showAlert() {
    alert('Button clicked!');
  }
</script>

При нажатии кнопки выполняется функция `showAlert()`, которая выводит на экран окно оповещения с сообщением «Кнопка нажата!».

Видео

3. Добавление кнопок в формы

Элемент <input type="button"> часто используется в формах для выполнения пользовательских действий, таких как проверка или программная отправка данных формы.

3.1 Использование JavaScript для отправки формы 

<form id="myForm" action="/next-page" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="button" value="Submit" onclick="submitForm()">
</form>

<script>
  function submitForm() {
    alert('submitting form..');
    document.getElementById('myForm').submit();
  }
</script>

Здесь нажатие кнопки «Отправить» запускает функцию `submitForm()`, которая программно отправляет форму с помощью метода `submit()`.

4. Стилизация кнопок с помощью CSS

Кнопки ввода HTML можно стилизовать с помощью CSS, чтобы улучшить их внешний вид. Вот пример: 

<style>
  .custom-button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
  }

  .custom-button:hover {
    background-color: #45a049; /* Darker green on hover */
  }
</style>

<input type="button" value="Styled Button" class="custom-button" onclick="doSomething()">

<script>
  function doSomething() {
    alert('Styled button clicked!');
  }
</script>

В этом примере создается кнопка с зеленым фоном, белым текстом и скругленными углами. Цвет фона меняется при наведении курсора на кнопку.

5 различий между <input type="button"> и <button>

Хотя элементы <input type="button"> и <button> создают интерактивные кнопки, у них есть некоторые ключевые различия:

Содержимое: элемент input может отображать только текст, тогда как элемент button может включать любой HTML-контент, такой как текст, изображения или значки.

Гибкость: элемент <button> более гибкий и предпочтителен для сложных кнопок.

Поведение по умолчанию: внутри форм <button> по умолчанию отправляет форму, если не указано иное, тогда как <input type="button"> не имеет поведения по умолчанию.

6. Вопросы доступности кнопки ввода

Чтобы обеспечить доступность кнопок, примите во внимание следующее:

  • Используйте понятный и описательный текст для подписи кнопки(через атрибут `value`).
  • Обеспечьте доступность клавиатуры, обеспечив возможность фокусировки кнопок и управления ими с помощью клавиатуры.
  • При необходимости используйте атрибуты ARIA, такие как `aria-label` или `aria-labelledby`, для получения дополнительного контекста.

7 лучших практик использования кнопки ввода

  • Используйте <input type="button"> для простых кнопок, функциональность которых основана на JavaScript.
  • Используйте <button> для более сложных кнопок, которые включают HTML-контент или требуют расширенного стиля.
  • Всегда добавляйте описательную подпись, чтобы пользователи понимали назначение кнопки.
  • Убедитесь, что кнопки на всем сайте имеют одинаковый стиль, обеспечивая единый внешний вид.

8 реальных вариантов использования кнопки ввода

Вот несколько практических примеров использования <input type="button"> :

  • Интерактивные формы: выполняйте проверки, сбрасывайте поля или отправляйте формы программным способом.
  • Динамическое содержимое: активируйте функции JavaScript для динамического обновления содержимого страницы.
  • Пользовательские действия: используйте кнопки для выполнения таких задач, как загрузка файлов, переключение элементов пользовательского интерфейса или открытие модальных окон.

9 Заключение

Элемент <input type="button"> — это простой, но универсальный инструмент для создания кликабельных кнопок в HTML. В сочетании с JavaScript и CSS он становится мощным компонентом для интерактивных веб-приложений. Понимая его свойства, отличия от других типов кнопок и применяя передовой опыт, вы сможете эффективно использовать его для создания функциональных и удобных интерфейсов.