Ответ
В HTML можно заменить <button> на <div>, но нужно учитывать семантику и доступность. Для имитации кнопки на <div> добавьте ARIA-роль и обработчики событий:
<div
role="button"
tabindex="0"
onclick="handleClick()"
onkeydown="handleKeyDown(event)"
style="cursor: pointer; padding: 8px 16px;"
>
Нажми меня
</div>
<script>
function handleClick() {
console.log('Клик по div-кнопке');
}
function handleKeyDown(e) {
if (e.key === 'Enter' || e.key === ' ') {
handleClick();
}
}
</script>Ключевые моменты:
role="button"- указывает семантическую рольtabindex="0"- делает элемент фокусируемым- Обработка кликов и нажатий клавиш (Enter/Space)
- CSS-стили для визуального сходства с кнопкой
Лучше использовать <button> там, где это возможно, так как он уже содержит встроенную семантику и поведение.
Ответ 18+ 🔞
А, ну это классика, блядь! Сейчас объясню, как из обычного дива сделать кнопку, чтобы все думали, что это кнопка, а на самом деле это пиздопроебибна, хитрая жопа!
Смотри, в теории, да, можно взять <div> и натянуть на него сову глобус. Но это как ебать мои старые костыли — мороки дохуя, а результат тот же, если не хуже.
Вот, смотри, как эти умники предлагают:
<div
role="button"
tabindex="0"
onclick="handleClick()"
onkeydown="handleKeyDown(event)"
style="cursor: pointer; padding: 8px 16px;"
>
Нажми меня
</div>
<script>
function handleClick() {
console.log('Клик по div-кнопке');
}
function handleKeyDown(e) {
if (e.key === 'Enter' || e.key === ' ') {
handleClick();
}
}
</script>Видишь этот цирк? Целый вагон хуйни нужно прикрутить:
role="button"— кричим всей вселенной: «Эй, я кнопка, ёпта!». А то сама не догадается.tabindex="0"— чтобы на эту штуку хоть как-то можно было табом перейти, а то нихуя.onclickиonkeydown— это чтобы она не просто так стояла, как манда с ушами, а хоть что-то делала при клике и нажатии пробела/энтера.style="cursor: pointer;"— а это чтобы курсор хоть менялся, а то пользователь будет долбиться в этот див, а он него не кликабельный, блядь! Удивление пиздец!
И знаешь что самое охуительное? После всех этих танцев с бубном, она всё равно не будет вести себя как настоящая <button>. Захочешь отправить форму по Enter — нихуя. Захочешь, чтобы она правильно работала со скринридерами для слепых — опять нихуя, нужно ещё пол-литра атрибутов ARIA дописывать. Волнение ебать!
Поэтому запомни, как «Отче наш»: если тебе нужна кнопка — юзай <button>, блядь! Он из коробки всё умеет: и в фокус попадает, и на клавиши реагирует, и форму сабмитит, и семантика у него правильная. Это как взять готовый танк вместо того, чтобы собирать его из хуйни и палок.
Этот трюк с дивом — только для крайних случаев, когда уже совсем припёрло и архитектура какая-то ебаная не позволяет использовать нормальный тег. А так — не выёбывайся, используй <button> и живи спокойно. Всё, лекция окончена, можешь идти делать интерфейсы, а не эту самодеятельность, в рот меня чих-пых!