V dřívějších dobách muselo být tlačítko pro odeslání formuláře uvnitř něj.

To znamená uvnitř značky <form>. Někdy tak celé stránky bývaly jedním velkým formulářem s jedním odesílacím tlačítkem.

V dnešní době je tomu jinak.

Tlačítko může být mimo element <form> a přesto může formulář odeslat. Stačí použít atribut form, který odkazuje na id příslušného formuláře.

<form id="kontakt" action="/odeslano" method="post">
  <label>
    E‑mail
    <input name="email" type="email" required>
  </label>
</form>

<button type="submit" form="kontakt">Odeslat</button>

Kdy se to hodí

• Akční lišta nebo sticky hlavička/patička stránky s tlačítkem pro odeslání.
• Modální dialog s potvrzením, který spouští odeslání formuláře na pozadí.
• Více CTA na stránce (např. „Uložit“, „Uložit jako koncept“, „Náhled“) cílených na jeden formulář.
• Rozdělený layout: formulář v obsahu, ovládací prvky v sidebaru nebo toolbaru.
• Designové komponenty, kde tlačítko žije v jiné komponentě než formulář, ale má jej ovládat.
• Umístění primární akce blízko shrnutí/validace mimo samotný formulář.

Přetížení atributů formuláře

Atributy na tlačítku mohou přepsat chování formuláře pro konkrétní odeslání.

<button type="submit" form="kontakt" formmethod="get" formaction="/odeslat">
    Náhled
</button>
<button type="submit" form="kontakt" formnovalidate>
    Odeslat bez validace
</button>

• form funguje i na <input type="submit"> nebo <input type="image">.
• type="submit" je nutné; type="button" neodešle nic.
• Tlačítko uvnitř elementu <form> atribut form nepotřebuje.

Podpora v prohlížečích

Atribut form je podporován ve všech moderních prohlížečích včetně mobilních. Nepodporuje jej pouze starý Internet Explorer (včetně verse 11).

Odkazy jinam

• Submit a form with a button outside the form (Hashrocket TIL)
• MDN: button – atribut form
• MDN: input – atribut form