#dom_in_action
DOM Node у вакуумі.

DOM API дозволяє нам створювати вузли, що не приєднані до документа. І поки ми їх туди не вставимо, вони просто висять у памʼяті та не впливають на рендеринг сторінки.

Тому будь-який вузол може перебувати фактично у двох станах — приєднаний до живого DOM та, очевидно, відʼєднаний. І так, ми можемо саме відʼєднати елемент, не знищуючи його.

Для цього навіть існують спеціальні методи: removeChild(childNode) аби прибрати з дерева дочірній вузол, та node.remove() для самоусунення. Що важливо — вузол при цьому залишається в памʼяті.

На практиці це дозволяє робити складні дії над елементом, а то й цілим піддеревом, не вбиваючи швидкодію сторінки. Операції з DOM-деревом часто призводять до суттєвого навантаження на рендеринг. А так — можна зібрати в памʼяті фрагмент дерева будь-якої складності, і потім вставити в фактичний DOM за один раз, зменшивши кількість потенційних викликів reflow та repaint до мінімуму.

Є й інший бік медалі. Уявімо, що у вас є елемент і два скрипти. Один, до прикладу, змінює властивості його батька, додає й прибирає дочірні елементи. А другий, припустимо, тримає постійне посилання саме на цей вузол і читає розмір та розташування елемента на сторінці.

І от якщо перший скрипт для оптимізації вилучає елемент з DOM для операцій, а другий у цей час намагається прочитати його геометрію, то результат буде дещо передбачуваним. Скрипт не впаде — він має посилання на вузол, тож усе буде чудово. Просто розміри й розташування будуть часто нульові — наприклад, у getBoundingClientRect(). Халепа?

Може й так, але запобігти їй можна за допомогою однієї-однісінької властивості будь-якого DOM-вузла — Node.isConnected. Цей ґеттер повідомляє нам, чи вузол зараз знаходиться в живому DOM, а чи теліпається в памʼяті.

І, що особливо зручно, isConnected працює й для вкладених вузлів. Тобто це не заміна !!Element.parentElement, повноцінний сигнал — піддерево, у якому знаходиться вузол, зараз не вDOMа. І додавши перевірку на те, чи елемент приєднаний до DOM, ми можемо знати, чи варто в цей момент здійснювати обчислення.

Ось тут невеличка стіна консольлогів, яка демонструє, як працює isConnected:

console.group('1. Create element in memory:');
const element = document.createElement('section');
console.log(`element.parentNode: ${!!element.parentNode}`);
console.log(`element.isConnected: ${element.isConnected}`);
console.groupEnd();

console.group('2. Add child:');
element.innerHTML = '<div><p>Hello</p></div>';
const p = element.querySelector('p');
console.log(`p.parentNode: ${!!p.parentNode}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

console.group('3. Append element to live DOM:');
document.body.appendChild(element);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

console.group('4. Remove p:');
p.remove();
console.log(`element.isConnected: ${element.isConnected}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

Ставте 🔥, якщо дізналися про isConnected лише сьогодні, і ❤️, якщо знали про це давно.

@babichdev

P.S. І заберіть уже ті кілька квитків на запис нової Співбесіди на сцені.

float
Побутує думка, що CSS float — це щось дуже застаріле, а його використання вважається ледь не богохульством. Ну бо для лейауту ж маємо і flex, і grid. І частково з цим можна погодитись — для лейауту це дійсно моветон.

Але й в епоху свого розквіту цей підхід теж був не best practice, а банальним костилем через відсутність притомних інструментів.

Справжнє ж призначення float просте як дрова — відтворювати типографський принцип "обтікання" зображення текстом. І все.

Принцип дії також не складний — float-елемент приклеюється до лівого або правого краю контейнера, а будь-який наступний вміст бравзер намагатиметься відобразити поруч із ним. На "новий рядок" наступний вміст перенесеться з однієї з трьох причин: текстовий вміст досягне нижньої межі float-елементу, блочний елемент не вміщатиметься в доступну ширину, або ж якийсь із наступних елементів матиме відповідний clear.

У сучасній верстці використання float цілком собі виправдане. Але, як завжди, за умови одного суттєвого "але" — для відтворення друкарських принципів. Для створення лейауту, як уже зазначалося вище, є спеціальні інструменти.

Чого ж тоді його взагалі використовували для цих задач? Це були темні часи. Таблиці впали в немилість, сходила зірка CSS 2.1, дизайнери вигадували нові, досі небачені структури сторінок, але над усим цим бовваніла одна величезна проблема — стандарти досі сприймали html-сторінки як документи, а не як інтерактивний інтерфейс для взаємодії з вебом.

Тому веброзробники зробили те, що у них виходить найкраще — вигадали новий костиль. Головною фішкою float є те, що він може виставити декілька блокових елементів в один ряд, якщо у них є ширина, та ще й без додаткових обгорток, якими по суті були таблиці. Тобто зробити їх колонками. Тож дивовижний світ веброзробки став ще дивовижнішим, і інтернет заполонили легіони сайтів із багатоколонковою структурою.

Однак усе не було таким райдужним, як уявлялося. Навіть простенький лейаут на дві колонки міг несподівано розʼїхатись, якщо сумарна ширина колонок виходила бодай на нанопіксель більшою за 100%. Рахувати і прописувати ширини колонок потрібно було вручну, і розробники часто йшли безпечним шляхом, недотягуючи до 100%. Особливо підступним це було для трьох рівноширинних колонок. 33.33% — це найкраще, що ми могли запропонувати світу.

Є проблеми й окрім цього — наприклад, батьківський контейнер за замовчанням не підхоплює висоту float-елементів. І для вирішення цієї проблеми зʼявилися нові хаки: так званий clearfix, чи танці з overflow.

З іншого боку оця вся чудасія з float та спроби на їх основі будувати гнучкі й динамічні лейаути стали одним із чинників, що врешті призвели до появи flex, а згодом і до grid. Саме в епоху float зʼявилися CSS-фреймворки, які принесли у розробку поняття "12-колонкова сітка", що стала основою для макетів безлічі сайтів, і де-факто золотим стандартом дизайну.

Отут можна глянути як воно працює.

Якщо ви в очі не бачили float, і верстаєте виключно з flex та grid, ставте 🔥, ну а як ви такі самі динозаври, як і я, та провели не одну безсонну ніч, намагаючись зверстати той самий "священний Ґрааль", то ставте ❤️ і не забудьте випити таблетки від тиску ;)

Що почитати:
MDN — float
MDN Learn — floats

Що почитати душнілам:
W3C — CSS 2.1 Floats
W3C — CSS Display Module 3

@babichdev

P.S. Квитки на нову "Співбесіду на сцені" скоро здорожчають. Заберіть вже.

#нагадування
Співбесіда на сцені №2
Квитки закінчуються.

В суботу, 28 лютого, у Львові, в пабі Христофор. о 12:00 буде запис нового випуску.
Будуть забави, розіграші всяких приколів за донати, ну і очевидно, сама співбесіда на сцені.
Цього разу — з Frontend Tech Lead.

КВИТКИ ЗАКІНЧУЮТЬСЯ, КАЖУ

#партнерський_допис
Товариство, найбільший ярмарок вакансій в Defense Tech «Арсенал талантів» повертається!

https://arsenal.talantiv.in.ua

DOU та Lobby X знову збирають ключових гравців оборонної індустрії та фахівців, які прагнуть працювати у сфері оборонних технологій. 

🗓 Коли: 14 березня 
📍 Де: Київ, точну локацію ми надішлемо зареєстрованим учасникам в день події на пошту

Впродовж ярмарку 70+ компаній презентують власні проєкти, розробки та актуальні вакансії. Учасники зможуть поспілкуватися з роботодавцями, знайти однодумців та дізнатися більше про оборонно-промисловий комплекс України.

👉🏻 Щоб відвідати «Арсенал талантів» заповнюйте форму та залишайте донат від 333 грн у фонд «Повернись живим». Одна транзакція = один квиток: https://arsenal.talantiv.in.ua/

Після цього триває обов'язкова безпекова перевірка (донат не гарантує її проходження). У випадку підтвердження квиток надійде на електронну пошту, яку ви вказали при реєстрації.

Товариство!
Просто зараз стрим на каналі DOU, де я покажу, як можна зробити дійсно інтерактивний інтерфейс без жодного рядочка JS.

https://www.youtube.com/watch?v=gL9GN8906FU

Лишилося усього 12 квитків.
Завтра, о 12:00, чекаю на вас на записі нового випуску "Співбесіди на сцені" з Frontend Tech Lead!

🗺️ Львів, вул. Ів. Франка 3, Львівський Університет Крафтового Пива ім. Св. Христофора.

⏰ 28 лютого, 12:00

https://secure.wayforpay.com/payment/fe_tech_lead_interview

Їду на транспортному засобі за кілька мільйонів на зустріч із найдорожчими моєму серцю глядачами.

Ще встигаєте узяти квиток на запис "Співбесіди на сцені" ;)

https://secure.wayforpay.com/payment/fe_tech_lead_interview

Дякую усім, хто прийшов на запис цього випуску! Сподіваюсь, вам сподобалось )
Діліться враженнями )

А от і фото підвезли ) Розбирайте на аватарки )
https://15837-mariia-gnip.gallera.io/563289-spivbesida-2

Нове відео на каналі!
Я стільки чекав на цей реліз, що не можу й передати. "Одне питання — три відповіді" — це спроба довести усім, і в першу чергу собі, що цілком реально провести технічну співбесіду за одним і тим самим планом фахівцям різних рівнів.

Пілотний випуск я записував з фахівцями компанії appflame — української продуктової IT-компанії, що вже 7 років працює на ринку, має 500+ спеціалістів в команді. ТОП-5 у рейтингу найкращих роботодавців за версією Forbes Ukraine та robota_ua у 2025 році.

Тож до вашої уваги — пілотний випуск цього формату. Ставте вподобайки, лишайте коментарі, і обовʼязково дайте знати, чи сподобався вам такий формат.

Приємного перегляду!

https://youtu.be/eOK11Pvc2RM

Бабіча багато не буває )
https://youtu.be/bhQnXtKHDIg?si=POSEAupf7t_j2ZSx

Товариство, я тут зрозумів, що вже давно не проводив старих-добрих публічних онлайн-співбесід. Ну тих, де ви позоритесь в прямому етері )

Оці всі подкасти, офлайн-розваги і нові формати це все, звісно, дуже добре, але не варто й забувати, звідки ростуть ноги у мого каналу )

Тому ось вам посилання на форму, де можна лишити заявку на участь в онлайн-співбесіді. Чекатиму з нетерпінням!

https://forms.gle/ytgXa619bE8xy1mBA

#js_in_action
В кожній мові програмування існує безліч способів вистрілити собі в ногу, і JavaScript — не виключення. Буквально днями мені пригадався один з таких способів, який я навіть колись (дуже давно) використовував в продакшн-коді.

Мова йде про оператор with.

const user = { name: "Elvira" };

with (user) {
  console.log(name); // Elvira
}

Якщо спробувати пояснити це явище швидко й просто, то нічого не вийде. Але я спробую. В першу чергу нам потрібно пригадати поняття scope chain. Це ланцюжок контекстів, у якому рушій шукає змінну, до якої ми звертаємось у коді.

І зазвичай мова йде про лексичні скоупи, створені або функціями, або іншими блоками коду за допомогою фігурних дужок. А with просто ніби "пристібає" свій обʼєкт у ланцюжок пошуку імен, тому всередині блоку прості звертання можуть неочікувано резолвитись у властивості цього об’єкта.

with втручається саме в звертання до простих імен. Усередині такого блоку JavaScript спочатку намагається трактувати name як властивість переданого об’єкта, і лише потім шукає це ім’я далі по scope chain. Звертання через явний об’єкт, як-от user.name, цієї проблеми не мають.

const user = { name: "Elvira" };
const name = "Oliver";

with (user) {
  console.log(name);
}

У цьому прикладі буде виведено "Elvira", а не "Oliver", тому що with змушує JavaScript спочатку шукати name у user.

Вам уже мало стати очевидним, що with має набагато більше недоліків, аніж сумнівних вигод. І це правильне відчуття. Він вносить сумʼяття на усіх рівнях: людині важко зрозуміти, що ж мав на увазі автор — чи локальну змінну, чи властивість, чи змінну глобальну; рушій не може оптимізувати такий код, бо не може безпечно припускати, до чого саме посилається кожне імʼя всередині with; лінтери й інші інструменти також можуть сумніватися в тому, до чого саме звертається просте ім’я всередині блоку.

Яскравим прикладом є потенційне перекриття глобальних та локальних імен:

const user = { name: "Elvira", console: true };

with (user) {
  console.log(name);
}

Проблема тут полягає в тому, console буде резолвитись як user.console, а не як глобальний об’єкт console. Насправді, існує механізм обходу глобальних імен через [Symbol.unscopables], але розібратися з ним я залишаю моєму цікавому читачу.

Хоч with і не вилучено зі специфікації ECMAScript повністю, його використання, мʼяко кажучи, не заохочується. В strict mode він заборонений, і лишається лише як частина зворотньої сумісності.

Якщо вважати, що призначенням with було спрощення доступу до властивостей обʼєкту на письмі, то нині у нас є набагато кращі й надійніші способи спрощено звертатися до таких властивостей, наприклад, та сама деструктуризація:

const user = { name: "Elvira"};
const { name } = user;
console.log(name);

Попри добрі наміри, with виявився конструкцією, що втручається в один із фундаментальних механізмів JavaScript — пошук ідентифікаторів через scope chain. І через це привносить неочікувану невизначеність, через що код стає неочевидним і складним для аналізу.

Що почитати:
MDN: with statement
MDN: JavaScript Guide — Working with objects

Що почитати душнілам:
ECMAScript: with statement
ECMAScript: Object Environment Records
ECMAScript: GetIdentifierReference

P.S. Навіщо я взагалі вирішив розповісти про таку стародавню й дивну чудасію? Бо одним з моїх принципів є чергове складне речення: "треба знати не лише як правильно, але і як не правильно, щоб не писати неправильно, не знаючи, що це неправильно".

@babichdev

#css_in_action
Навіть у 2026 році люди не перестають дивуватися, що відносні (тобто відсоткові) вертикальні margin та padding насправді рахуються не від висоти, а від ширини (насправді ширини containing block) елемента). 100% розуміння, 0% засудження — свого часу для мене це теж стало неприємним відкриттям.

Тож чому так? Насправді, це один з моїх улюблених випадків, коли "так історично склалося". Той факт, що ця поведінка зафіксована в CSS2.1, не означає, що вона просто прийшла комусь в голову і її затвердили по приколу. Річ у тім, що цей документ значною мірою був радше не оновленим стандартом, а таким собі "зліпком" того, що коїлося в дивовижному світі веброзробки на той час. І саме така поведінка була вже усталеною.

Існує припущення, що причина полягає в доволі складних алгоритмах обрахунку загального макету, і це було свідоме спрощення. Зазвичай ширина елемента доступна раніше за його висоту, особливо в класичній флоу-моделі, де висота залежна від вмісту. І розрахунок вертикальних відступів від ширини дозволив уникнути зациклених обрахунків в ранніх рушіях.

Відверто, дуже багато речей, які здаються нелогічними чи незрозумілими в CSS, насправді спричинені ось такими непростими рішеннями, бо на світанку веброзробки доводилося шукати шляхи, аби обійти нестачу обчислювальних ресурсів та недосконалість алгоритмів. От такий hack driven development.

Попри те, що такий підхід досить контрінтуїтивний, він усе ж спромігся породити бодай одне непогане рішення (читай — хак): попередника aspect-ratio, що дозволяє втілити співвідношення сторін за допомогою вертикального падингу. Про нього я вже колись розповідав.

Тож якщо коротко — логічного пояснення цьому немає. Така поведінка зафіксована в специфікації, а пошук її істинних причин, відчуваю, може затягнути нас у пригоди, яким позаздрив би сам Індіана Джонс.

Але лишається відкритим питання — чи можемо ми усе ж задавати відносні відступи залежно від висоти? Відповідь — нуууууууу… майже.

Відносно самого елемента? Тверде ні. Відносно чогось іншого? До вибору, до кольору.

Як мінімум, тепер можна використовувати vh та dvh. Так, це відносно висоти вʼюпорту, і я не дуже уявляю, кому треба такий падинг чи маржин, але суть від того не змінюється — це відносна величина, яка рахується від потрібної нам вісі.

І, звичайно, сьогодні ми маємо контейнерні одиниці. cqh, cqb, cqi, cqw. Цікавлять нас cqh — 1% від висоти контейнера, та cqb — 1% від блочного розміру. За замовчуванням ці напрямки співпадають, але є нюанси при зміні напрямку письма.

Проте з cq* одиницями є надзвичайно важливий момент — вони рахуються від найближчого query container, а не від безпосереднього батьківського елемента. Це, якщо спрощено. Взагалі, тема container queries доволі цікава, і беззаперечно потребує окремого допису. Що скажете?

Однак на даний момент саме container query units виглядають як найбільш надійний спосіб вирішити давню проблему — задавати вертикальні відступи відносно вертикальної вісі. І щодо підтримки перейматись не варто, згідно Can I Use це майже 95% сучасних бравзерів.

Взагалі, оця історія з відносними відступами чудово ілюструє те, як розвивається веб в цілому: обмеження стає домовленістю, домовленість породжує хаки, хаки стають поширеною практикою, а з часом вже платформа реагує та пропонує нове рішення у відповідь.

Хотів би написати "…рішення, що робить хак непотрібним", але ми усі розуміємо, що це не так. В деяких випадках, як з aspect-ratio, хак дійсно розчиняється в небутті, але часто, як із cq* одиницями, ми отримуємо рішення, що лише частково закриває початкову проблему. Але при цьому — дозволяє вирішити ще низку проблем, про які ми й не здогадувались.

Що почитати:
MDN — Layout and the containing block
MDN — padding
MDN — CSS container queries

Що почитати душнілам:
W3C — CSS 2.2 Box model
W3C — CSS Containment Module Level 3

@babichdev

Я тут планую записати нову співбесіду для Ютубу. В ідеалі цей випуск виглядав би так:

— Відважний трейні або сміливий джуніор. А ще краще — відважна трейні чи смілива джуніорка.

— Формат — вайбкод-рев'ю. Я даю задачу і півтори години на її реалізацію перед записом. На зйомці — захист. Зараз це дуже важлива навичка для інженерів, що використовують LLM для роботи — розуміти і вміти розібратися в чужому коді.

— Хотів би зняти випуск наступного або тамтого тижня.

Відчуваєте, що це саме ваша нагода спозоритись на весь інтернет? Заповніть формочку:

https://forms.gle/ytgXa619bE8xy1mBA

#збір_на_РЕБ
Товариство, прийшов час нового збору для ЗСУ.
Цього разу нашої допомоги попросили в 115 ОМБр 3МБ.

Ми збираємо на засіб радіоелектронної боротьби "Писець" та приладдя до нього.
Наразі мета збору — 300 000 грн.

Дякую за кожну гривню! Разом ми робимо великі речі!

🔗Посилання на банку
https://send.monobank.ua/jar/46FX59UkXS

💳Номер картки банки
4874100026432743

P.S. Розіграш за минулий збір для ЖВІ вже проведено, і артбук поїхав до нового власника. А в коментарях до допису додам скрин з підтвердженням, що стоматкабінет вже працює на повну.

#нове_відео
Товариство, запрошую до перегляду нового випуску "Подкасту у нас вдома". Цього разу розмовляв з Уляною Білінською-Шутою — QA-менторкою й тестувальницею з досвідом роботи в Uber та LinkedIn.

Говорили про усяке — де добре, де не дуже, хто наші конкуренти на закордонних ринках, які внутрішні тємки є в великих компаніях, і чи взагалі є шанс для українців працювати на американське ІТ.

Приємного перегляду!

З вас комент під відео, вподобайка і поширення. Дякую!

https://youtu.be/yyoNw2g2VHM

Дякую за довіру та підтримку, товариство!

Доброго ранку, товариство! За вікном чудова погода, співають пташечки і світить сонечко. Виглядає як чудовий початок тижня.

Маю до вас дві справи.

Перша: нагадую про збір на РЕБ для 115ОМБр, наразі є 29 500 грн з 300 000. Кожна гривня важлива, і за кожну гривню я вдячний надзвичайно.

Друге — у мене трошки творча криза, але дуже хочеться написати для вас щось, що збере сто тисяч вподобайок за хвилину.

Тому пропоную вам написати в коментарях, про що вам цікаво було б почитати цього тижня: щось про HTML чи CSS, може якісь роздуми, може десятитисячний допис про ШІ.

Загалом, прошу ділитися своїми побажаннями!

І гарного усім дня ;)

Кнопка.

Будьмо відверті — мало хто з нас сприймає елемент <button> інакше, ніж просто засіб запуску якогось коду по кліку. І саме тому багато хто не бачить і різниці між кнопкою й просто дівом з addEventListener. А це, в свою чергу, призводить до хибного бачення <button> як просто клікалки з тупими стилями за замовчанням.

Але це не так. Якщо заглянути далі цього сприйняття, то виявиться, що кнопка — це дещо більше. Насправді це справжній інтерактивний примітив бравзера, що не лише дозволяє себе натискати, але й володіє багатьма іншими аспектами — власною семантикою, очікуваною бравзером поведінкою, повною підримкою клавітурної взаємодії, власними правилами доступности, врешті-решт.

Якщо не зважати на це уваги, розробники рано чи пізно починають займатися "цікавими дослідами" і городити те, що має бути простою кнопкою, за допомогою дівів чи спанів. А іноді — десятків дівів чи спанів. Тут примітно, що насправді дуже легко знехтувати саме <button>, адже на поверхні ми бачимо лише блок, який треба натиснути. І це чудово вміють усі інші елементи: навісимо onClick чи що у вас там у вашому улюбленому фреймворку, і задача ніби вирішується.

Але згодом таке рішення часто вилазить боком, і ось розробник уже починає додавати те, що вже й так існує у простої кнопки: той самий правильний фокус, ту саму клавіатурну взаємодію, стани, а на завершення поринає з головою в імітацію доступности.

Взагалі, я раджу завжди ставити собі питання — чи є вже в бравзері те, що я намагаюсь зробити? Відверто, в більшості випадків відповідь однозначна — так. Звичайно, я розумію, що навіть зараз багато нативних контролів у бравзері не надають достатніх засобів для такої стилізації, яку часто вигадують наші любі дизайнери. Чи такого функціоналу, який вигадують наші любі стейхолдери.

І це підіймає доволі цікавий аспект розробки — ми часто сприймаємо інтерактивні елементи через призму того, як вони виглядають, а не що вони роблять. Несвідомо в такий спосіб ми жертвуємо і ефективністю інтерфейсу, і зручністю розробки. Бо замість того, аби узяти те, що вже працює і так, нам доводиться вигадувати колесо заново. Або кнопку.

<button> в цій історії є дуже цікавим прикладом, бо цей елемент або ігнорують, або використовують замість усього, що бодай якось клікається. Так, я про <a> в якості кнопки і <button> в якості гіперпосилань. Повірте, я таке бачив на власні очі.

Я спеціально не говорю про поведінку <button> в формах в цьому дописі, бо планую детальніше зупинитися на цій темі у наступному. Чому перезавантажується сторінка, якщо натиснути в кнопку всередині форми, чим це зумовлено, чому це не баг, і як зробити так, щоб цього не відбувалося — про це наступного разу.

А сьогодні були просто ліричні роздуми про елемент <button> і його роль в ширшій картині Всесвіту.

Просто запамʼятайте — якщо, дивлячись на дизайн, у вас виникає підсвідоме бажання тицьнути в щось мишкою, то швидше за все це звичайна кнопка, а не оріґамі з <div>.

@babichdev

Збір на РЕБ для 115 ОМБр — кожна гривня важлива!

#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грн. Долучайтесь!