Dva způsoby, jak zrušit odsazení tagu FORM v HTML

Pokud používáte na svých stránkách formuláře, určitě víte, že otevírací tag FORM odsadí formulář od obsahu stránky o jeden řádek. To stejné vám udělá ukončovací tag. Velikost tohoto odsazení lze ale určitým postupem snížit na nulu či si definovat vlastní velikost.

<FORM> v definici tabulky

Princip tohoto postupu je velmi jednoduchý – vytvořte si tabulku, do které vložte ješte jednu tabulku (vnořenou) a do ní umístněte váš formulář. Tag <FORM> se poté vloží mezi tagy <TR> a <TD> této vnořené tabulky, které definují nový řádek a novou buňku tabuly. U ukončovacího tagu formuláře je postup obdobný – </FORM> se vloží třeba mezi tagy </TD> a </TR>, které slouží k ukončení buňky a řádku tabulky.

Možná se ptáte, proč se musí použít dvě tabulky, když by možná stačila pouze jedna. Je to proto, že když jsem tento článek psal a uvedené příklady si kontroloval, zjistil jsem zajímavou věc, že když není formulář ještě v jedné (vnořené) tabulce, formulář se v Netscape 4.5 stejně odsadí z horní strany, ať dáváte tag <FORM> mezi <TR><TD> kolikrát chcete.

To, že musí být formulář ve vnořené tabulce, není žádný problém, když totiž používáte při tvorbě stránek tabulky, obvykle se neobejdete bez jejich několikanásobného vnoření.

Následuje zdrojový kód takového postupu:

Ukázka:

Text před formulářem

Text za formulářem

Výše uvedený postup má jednu nevýhodu – je totiž v rozporu se syntaxí jazyka HTML a každý validátor vám zde vyhodí chybu. Nicméně – pokud vám záleží spíše na precizním vzhledu více než na správnosti syntaxe, tento způsob je možné bez obav používat.

Pokud bojíte použít takový postup s ohledem na ostatní prohlížeče mimo Internet Explorer, můžu vás uklidnit. Bez problémů je Internet Explorer od verze 4.0, Netscape Navigátor taktéž od verze 4.0, stejně tak Netscape 6. V Opeře 5.0 se nějaké menší odsazení bohužel projeví, ale Opera dnes není v českých zemích zase tak moc používána.

Odsazení <FORM> pomocí CSS

Výše uvedený způsob zrušení odsazení tagu <FORM> používalo a stále používá mnoho českých webmasterů. Ovšem, jakmile se objevily (a také pořadně rozšířily) kaskádové styly CSS, začíná se od tohoto způsobu ustupovat.

Ale dost řečí a pojďme si říci, jak na to. Jednoduše – prostě definuje styl pro tag <FORM> a to třeba takto:

Ukázka:

Text před formulářem

Text za formulářem

Pomocí vlastnosti margin-top definujete velikost odsazení formuláře zeshora, pomocí vlastnosti margin-bottom zase definujete odsazení formuláře zezdola. V obou případech je zde uvedena hodnota 0 px, takže odsazení bude nulové.

Tento způsob zrušení osazení tagu <FORM> pomocí CSS je zcela v souladu s definicí CSS a proto jej doporučuji více než předchozí způsob, kdy je tag <FORM> umístněn mezi párovými tagy <TR><TD>. Navíc to má tu výhodu, že si můžete snadno změnit velikosti odsazení formuláře, třeba na dva pixely. V prvním případě toho docílíte pouze s použitím neviditelného obrázku 1×1.gif, kterému nastavíte požadované rozměry.

Nevýhoda použití CSS? Je pouze jedna – nepoběží to na starších prohlížečích, které málo či vůbec nepodporují styly. Netscape verze 4.xx sice podporuje kaskádové styly, nicméně ne v takové míře, jak bychom si přáli a proto to zde nebude fungovat. Ostatní prohlížeče jako Internet Explorer od verze 4.0, Netscape 6 či Opera 5.0 jsou zcela bez problémů. Zrušení odsazení formuláře pomocí CSS je mimo jiné použito i na Interval.cz.

Doufám, že se vám tento tip pro tvorbu HTML stránek líbil.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.