Здається, що
<button> існував завжди. Відверто, з точки зору більшости веброзробників, так і є. Цей тег зʼявився в специфікації HTML 4.0 1997 року, і старший за багатьох з моїх любих читачів.А ще ми нерозривно повʼязуємо його з формами, адже як іще можна надіслати дані з нашої сторінки, як не за допомогою
<button>? І ось ці два моменти часто складаються в хибну думку, що кнопки зʼявилися в HTML разом з формами, і є їхньою невідʼємною частиною. Чому ж ця думка хибна?Річ у тім, що форми випереджають
<button> на цілих два роки і дві версії HTML: вони зʼявляються в стандарті HTML 2.0 від 1995 року. І це вже спростовує другу тезу про невідʼємність кнопки від форми.А як же так сталося, і як відправлялися форми в той час? Дуже просто —
input. Кнопки як окремого примітива чи сутності не було, а бідолашний інпут віддувався за все, що не було select чи textarea. І саме тоді й зʼявилися різні типи інпутів, серед яких були й submit, reset та button.До речі, про
reset я й сам чи то не знав, чи то забув до цього часу. Він, виявляється, скидає стан форми до значень за замовчуванням.input цілком собі вдало виконував функції кнопки, але button, як я зазначив на початку, досить швидко зʼявився в специфікації. Не братимусь розбирати причини, але вони, як на мене, доволі очевидні з різниці між інпутом і кнопкою.Якщо дуже стисло окреслити різницю між
button та input, то всередину button можна додавати розмітку, а всередину input — не можна.Тепер поглянемо на типи:
submit, reset, button.submit є значенням атрибуту type за замовчуванням, і саме тому будь-яка кнопка без явного значення цього атрибуту, поміщена всередину форми, буде її "сабмітити". Я певен, що кожен з нас бодай раз стикався з цією поведінкою, і Ґуґл памʼятає саме ваш запит "button form prevent submit".Я памʼятаю, наскільки це дратувало. Але зараз розумію, що це роздратування насправді було викликано не якоюсь не такою поведінкою кнопки, а саме моїм незнанням та нерозумінням, як вона насправді працює.
Виправити таку поведінку дуже просто — явно вказати
type="button". І тоді наша кнопка перетвориться на… кнопку-кнопку. Саме той інтерактивний примітив, про який я говорив минулого разу. В цьому випадку бравзер прибирає з кнопки "очікувану" поведінку в контексті форм. Якщо простіше, то кнопка більше не сабмітить.Про
type="reset" я вже побіжно згадав, і тут немає ніяких підводних каменів — просто скидання стану до початкових значень.Є ще один цікавий момент, про який я колись розповідав: кнопку можна звʼязати з формою через атрибут
form, і тоді її можна розмістити поза нею, і все працюватиме. Так от. Виявляється, ця поведінка притаманна усім елементам форми, не лише кнопкам. Але я розберу цей курйоз іншим разом.Тож, якщо підбити підсумки:
- Кнопки — логічне продовження інтерактивності, закладеної
input;- Мають три значення атрибуту
type: submit, reset, button;- За замовчуванням тип кнопки —
submit;- Якщо треба кнопка всередині форми, що має робити щось інше, то це
type="button"Але HTML не стоїть на місці, і сьогодні
button вміє набагато більше, ніж сабмітити форму і бути безвольним гачком, до якого ми чіпляємо свої onClick. Про що мова? Можливо, ви вже здогадалися, тож пишіть в коментарях. А я вже готую наступний допис.
MDN: button type
@babichdev
***
Збір на РЕБ для 115 ОМБр: зібрано 30 731 / 300 000грн. Долучайтесь!