Для чего используется элемент Button?

Для чего используется элемент Button

Button — это HTML элемент для создания кнопок пользовательского интерфейса. Это фундаментальный элемент веб-разработки.

Основное назначение

Button используется для позволения пользователю выполнять действия — отправлять формы, открывать меню, запускать код и т.д.

<button>Click me</button>

<button type="submit">Submit Form</button>

<button type="reset">Clear Form</button>

<button type="button" onclick="alert('Hi')">Show Alert</button>

Типы button элемента

type="submit" — отправить форму

<form action="/api/login" method="POST">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Login</button>
</form>

При клике отправляет форму на сервер.

type="reset" — очистить форму

<form>
  <input name="name" value="John" />
  <button type="reset">Clear</button>
</form>

При клике очищает все поля формы.

type="button" — обычная кнопка

<button type="button" onclick="handleClick()">Action</button>

Никакого стандартного поведения, используется с JavaScript.

Атрибуты

<!-- Отключена кнопка -->
<button disabled>Disabled</button>

<!-- С классом для стилизации -->
<button class="btn btn-primary">Primary</button>

<!-- С aria для доступности -->
<button aria-label="Close menu">×</button>

<!-- С data атрибутом -->
<button data-action="delete">Delete</button>

<!-- С именем для формы -->
<form>
  <button name="action" value="save">Save</button>
  <button name="action" value="draft">Save Draft</button>
</form>

JavaScript обработка

const button = document.querySelector('button');

// Слушатель клика
button.addEventListener('click', () => {
  console.log('Button clicked');
});

// React
function MyComponent() {
  const handleClick = () => {
    console.log('Clicked');
  };
  
  return <button onClick={handleClick}>Click</button>;
}

// Vue
<template>
  <button @click="handleClick">Click</button>
</template>

Доступность (Accessibility)

<!-- Хорошо — описано назначение -->
<button>Save Document</button>

<!-- Плохо — непонятно что делает -->
<button>Click Here</button>

<!-- С aria-label для иконок -->
<button aria-label="Close" class="close-icon">×</button>

<!-- Keyboard навигация -->
<button>Accessible by Tab key</button>

Стилизация

button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background: #f0f0f0;
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

Vs других элементов

<!-- Button — семантичный элемент для действий -->
<button>Save</button>

<!-- a (link) — для навигации -->
<a href="/next">Next Page</a>

<!-- input type=button — старый способ (не рекомендуется) -->
<input type="button" value="Click" />

<!-- div с onclick — плохо для доступности -->
<div onclick="handleClick()">Not Accessible</div>

Вывод: Button — это семантичный HTML элемент для создания кнопок действий. Используй для форм (submit), и обычных действий (type=button). Важно обеспечивать доступность (aria, label) и использовать правильный type для правильного поведения.