Další prvky formulářů

Vysunovací nabídky ve formulářích

Pokud chci dát uživateli na výběr z předdefinovaných možností, použiji nejčastěji nějakou vysunovací nabídku.

Zdrojový kód:

<select name="mesto">
  <option value="plz" selected="selected">Plzeň</option>
  <option value="pra">Praha</option>
  <option value="man">Manětín</option>
  <option value="spo">Spálené Poříčí</option>
</select>

Jak je z ukázky patrné, celý vysunovací seznam reprezentuje entita <select>, která má udaný atribut name. V ní jsou pak jednotlivé položky ohraničené elementem <option>. Jejich hodnotu udává atribut value.

Položka, která obsahuje atribut selected, je automaticky vybrána při načtení stránky (stejně jako atribut value u elementu <input />). selected může nabývat pouze jediné hodnoty: selected="selected".

Je-li potřeba aby bylo najednou vidět více položek, použije se atribut size. Jeho hodnota udává, kolik jich bude vidět.

<select name="město" size="3">
  <option value="plz" selected="selected">Plzeň</option>
  <option value="pra">Praha</option>
  <option value="man">Manětín</option>
  <option value="spo">Spálené Poříčí</option>
  <option value="mos">Most</option> 
  <option value="par">Pardubice</option>
  <option value="ckr">Český Krumlov</option>
</select>

Pro možnost označení a následného odeslání více položek v adresáři slouží atribut multiple. Může nabývat jedinou hodnotu, a to multiple="multiple".

<select name="město" size="3" multiple="multiple">

Pro označení více položek je třeba podržet klávesu ctrl (To platí v Internet Exploreru, Firefoxu a Opeře - u ostatních prohlížečů to odzkoušené nemám).

Máte-li ve vysunovací nabídce více podobných možností, je dobré je rozdělit do tématických skupin. To lze udělat pomocí elementu <optgroup>. Ten musí povinně obsahovat atribut label, jehož hodnota je nadpisem skupiny prvků. Straší prohlížeče, které <optgroup> nepodporují, zobrazí nabídku jako obyčejnou - nečleněnou. Nadpisů skupin (atributu label) si nevšímají.

<select name="auto">
  <optgroup label="Škoda">
    <option value="oct" selected="selected">Octavia</option>
    <option value="fab">Fabia</option>
	<option value="sup">Superb</option>
  </optgroup>

  <optgroup label="Peguot">
	<option value="206">206</option>
	<option value="306">306</option>
  </optgroup>
</select>

Logické členění formulářů

Aby byly formuláře přehlednější jak pro interprety XHTML, tak pro uživatele, existují další elementy určené pro jejich členění.

<label> </label>

Přiřazuje popisky k jednotlivým ovládacím prvkům.

Vaše jméno:

<p><label>Vaše jméno: <input name="jmeno" type="text" /></label></p>

<fieldset> </fieldset>

Orámuje vybranou skupinu ovládacích prvků.

<legend> </legend>

Obsahuje nadpis (název) skupiny ovládacích prvků. Uvádí se v elementu <label> a to hned na prvním místě. Před ním mohou být v <label> pouze bílá místa.

Souhrnný příklad:

<fieldset>
  <legend>Osobní údaje</legend>
	
  <p><label>Vaše jméno: <input name="jmeno" type="text" /></label></p>
  <p><label>Bydliště: <input name="bydliste" type="text" /></label></p>
  <p><input type="submit" value="odeslat" /></p>
</fieldset>

< Předchozí Následující >

O webu

Slovníček pojmů

Odkazy

Verze pro tisk (pdf)