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>
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.
<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>
© 2006-2007 Petr Kuda - www.troska.cz