HTML таг button
Пример
Кратък пример как се използва тагът <button>.
<button type="button" class="btn btn-primary" onclick="alert('Здравей!')">
Натисни ме
</button>
Опитай в редактора
Дефиниция и употреба
Тагът <button> създава интерактивен бутон в HTML, който може да се използва за изпращане на формуляри, задействане на JavaScript действия или други интеракции с потребителя.
По подразбиране бутонът е фокусируем и може да се активира с мишка, клавиатура (клавиш Enter или Space) и чрез скрийн рийдъри, което го прави подходящ за достъпни интерфейси.
Най-често се използват следните стойности на атрибута type:
type="button"– обикновен бутон, който не изпраща формуляр; използва се за JavaScript действия.type="submit"– бутон за изпращане на формуляр.type="reset"– нулира (връща началните стойности) на полетата във формуляра.
Съдържанието вътре в <button> може да бъде текст, икони или други HTML елементи (напр. <span>, <i>), което го прави по-гъвкав от <input type="button">.
При използване с Bootstrap 5.3, към бутона се добавят класове като btn, btn-primary, btn-outline-secondary и др., за да се приложи готов стил и поведение.
Browser Support
| Browser | Поддръжка |
|---|---|
|
Chrome |
✔️ |
|
Firefox |
✔️ |
|
Edge |
✔️ |
|
Safari |
✔️ |
|
Opera |
✔️ |
Атрибути
| Атрибут | Описание | Стойности |
|---|---|---|
type |
Определя типа на бутона и поведението му във формуляр. | button, submit, reset |
name |
Име на бутона, изпращано с формуляра. | Текстова стойност |
value |
Стойност, която се изпраща към сървъра при изпращане на формуляра. | Текстова стойност |
disabled |
Деактивира бутона (не може да се натиска и не се фокусира). | disabled (булев атрибут) |
form |
Свързва бутона с формуляр по id, дори да не е вътре в него. |
Идентификатор на формуляр |
formaction |
Презаписва action атрибута на формуляра за този бутон (само за type="submit"). |
URL |
formmethod |
Презаписва method на формуляра (само за type="submit"). |
get, post |
formtarget |
Определя къде да се отвори резултатът от изпращането. | _self, _blank, _parent, _top, име на прозорец |
formenctype |
Тип кодиране на данните при изпращане (само за method="post"). |
application/x-www-form-urlencoded, multipart/form-data, text/plain |
formnovalidate |
Изключва HTML5 валидацията за този бутон при изпращане. | formnovalidate (булев атрибут) |
autofocus |
Автоматично поставя фокуса върху бутона при зареждане на страницата. | autofocus (булев атрибут) |