Szél Péter

Mi történik, ha nem adod meg explicit módon a <button> típusát? Érdemes erre figyelni, mutatok egy érdekes és tanulságos hibát, ami az elhagyásából adódik.

button

A szabvány szerint és a valóságban

A HTML szabvány szerint a <button> type attribútumának alapértelmezett értéke a submit. Ami azt jelenti, ha elhagyod, akkor a gombod megnyomására az aktuális űrlap elküldésre kerül.

A modern böngészők helyesen implementálják ezt a működést, viszont az Internet Explorer régebbi verzióiban nem így volt, hanem a type=button volt az alapértelmezett.

Összességében tehát akkor jársz a legjobban, ha minden alkalommal explicit módon megadod.

Érdekes hiba

Tegyük fel, hogy van egy űrlapunk egy "név" és egy "születési dátum" mezőkkel, az utóbbihoz tartozik egy dátumválasztó gomb. A gomb megnyomására előjön egy naptár és választhatunk egy időpontot. A gomb működése a click eseménykezelőjében van megírva, ahol egyébként az alapértelmezett működése le van tiltva.

Mi történik viszont, ha elfelejtjük a naptár gomb type attribútumát button-re állítani? Mutatom:

See the Pen YPNBdG by Szél Péter (@szelpe) on CodePen.

Próbáld ki: ha a "név" szöveges mezőben van a fókusz, és megnyomod az enter billentyűt, akkor aktiválódik a naptár. Nagyon csúnya hiba.

Hogy lehetséges ez?

A magyarázat kicsit trükkös: egy tetszőleges szöveges mezőben az enter gomb megnyomása egyet jelent az űrlap elküldésével. Érdekes módon ez egyben azt is jelenti, hogy az űrlaphoz tartozó submit button kattintás eseménye is aktiválódik. Mivel az eseménykezelőben letiltottuk az alapértelmezett működést, amely az űrlap elküldése lett volna, ez nem történik meg, ott maradunk egy nyitott naptárral az űrlap elküldése helyett.

Több submit button

Érdekes kérdés, hogy mi történik akkor, ha több submit button is van egyszerre:

See the Pen qERgwO by Szél Péter (@szelpe) on CodePen.

Ebben az esetben kizárólag a legelső submit button click eseménye fog aktiválódni.

Ha tetszett a bejegyzés, mások számára is hasznos lehet, akkor oszd meg az alábbi gombok segítségével!