#html_in_action
Здається, що
<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грн.
Долучайтесь!
