Sémantika
pravý význam html značek

Hlavní strana » Návody » Formuláře

Formuláře

Formulář začíná značkou <form>, ve které jsou potom další a další značky, tvořící samotný formulář. Ze sémantického hlediska má smysl se zmínit o třech značkách: <fieldset>, <legend> a <label>.

Značka <fieldset>

Pokud máte nějaký delší formulář, který je možné rozdělit do nějakých logických podskupin, dělá se to za pomocí značky <fieldset>. Takže pokud máte někde vyplnit jméno, příjmení a zaměstnání vašich rodičů, můžete touto značkou snadno rozlišit otce od matky. Je dobré to používat, protože prohlížeč vykreslí kolem části formuláře ohraničení, čímž se celý formulář stává mnohem přehlednějším.

Poslední dobou ale vídám docela zajímavou věc a sice, že značka <fieldset> je používáná nejen na sdružování částí formulářů, které patří k sobě, ale i na jiné objekty, které spolu nějak souvisí (a nejsou tedy součástí formuláře). Netroufám si tvrdit, jak moc to je či není sémantické, podle mého názoru je lepší mít jasnou strukturu nadpisů.

Značka <legend>

Předchozí značka měla za úkol spojit dohromady tématicky blízké části formuláře. Tag <legend> potom tyto jednotlivé části pojmenovává - je to v podstatě nadpis. Takže pokud bych použil předchozí příklad, vepsalo by se do této značky "Otec" a "Matka". Tento text se potom objeví v rámečku okolo fieldsetu. Vypadá to velmi efektivně a každý pochopí o co jde, takže opět mohu jen doporučit tuto značku používat. Mimochodem - <legend> musí následovat hned za <fieldset>.

Poslední značka <label>

Každé pole obvykle obsahuje nějaký doprovodný text, který vysvětluje, co se do daného políčka má zapsat, stejně tak je u každého přepínače uveden nějaký název, který vybíráte. Tento text by měl obsažen ve značce <label>. A aby bylo jednoznačně určené, k jakému poli se popisek vztahuje, přidává se zde obvykle ještě atribut for, kde je obsažen identifikátor onoho pole. Značka <label> se určitě vyplatí používat, protože formuláře jsou pak použitelnější, neboť když máte popisek například u radiobuttonu nemusíte klikat přímo na ten přepínač, stačí kliknout na ten popisek a přepínač se aktivuje.

Příklad na formuláře:

<form>
  <fieldset>
    <legend>Matka</legend>
    <p>
      <label for="jmeno-m">Jméno matky:</label>
      <input type="text" id="jmeno-m">
    </p>
    <p>
      <label for="prijmeni-m">Příjmení matky:</label>
      <input type="text" id="prijmeni-m">
    </p>
  </fieldset>
  <fieldset>
    <legend>Otec</legend>
    <p>
      <label for="jmeno-o">Jméno otce:</label>
      <input type="text" id="jmeno-o">
    </p>
    <p>
      <label for="prijmeni-o">Příjmení otce:</label>
      <input type="text" id="prijmeni-o">
    </p>
  </fieldset>
</form>

«« Tabulky » rozcestník « Nesémantické značky »»

o web se stará Lukáš Havrlant (kontakt)