TIL: HTML5 atribut FORM, aneb svazování formulářových prvků s formulářem

Kódování webu

Today I Learned. Dvacet let kóduji weby, ale tohle jsem dnes použil poprvé. Pamatuji si, že v HTML nebylo podle specifikace možné použít <submit> mimo <form> tag. Samozřejmě to šlo svázat Javascriptem, ale čistě v HTML to udělat nešlo, nefungovalo by to, data by se neodeslala. Dnes už to v HTML5 možné je, konkrétně díky atributu form, kterým se propojí formulář a formulářový prvek.

Submit mimo formulář

<form id="formular" method="get" action="...">
	<input type="text" name="name">
</form>

<input type="submit" form="formular">

Zajímavé je, že tímto atributem je možné svázat nejen submit, ale i další formulářová pole.

<form id="formular" method="get" action="...">

	<label>
		Jméno a příjmení:
		<input type="text" name="...">
	</label>

	<input type="submit" value="Odeslat">

</form>

<textarea cols="..." rows="..." form="formular"></textarea>

Mohou se vnořovat formuláře do sebe?

Ne („Flow content, but with no form element descendants.“), ale lze to snadno obejít…

<form id="formular1" method="get" action="..."></form>
<form id="formular2" method="get" action="..."></form>

<input type="text" name="input1" form="formular1">
<input type="text" name="input2" form="formular2">

<input type="submit" value="Odeslat" form="formular1">
<input type="submit" value="Odeslat" form="formular2">

Taková hloupost, až mi celé ty roky unikala. 🤦🏼‍♂️

Další zdroje:

Publikováno: 26.11.2020

Štítky: