Popisek ve formulářovém poli
Školení, která pořádám 
Z důvodu úspory místa někdy vznikne požadavek nacpat popisek formulářového políčka (obvykle vyhledávání) přímo do něj. Mě se tento způsob ze zásady nelíbí, ale co naplat, někdy to jinak nejde. Tradičně se to řeší nějak takhle:
<input name="search" value="Vyhledat" onfocus="this.value = '';" />
Kód se dá ještě všelijak upravit, třeba aby se popisek při nevyplnění textu zase obnovil (při obsluze události onblur), zásadní problém tohoto kódu je ale v tom, že výchozí hodnota se přenese i v případě, že ji uživatel nevyplní, takže ji musíme ve vyhledávání ignorovat. Co když ale uživatel opravdu chce hledat text „Vyhledat“? Řešit se dá i tento problém, ale je to už poněkud krkolomné a popisek se navíc zobrazí jen při zapnutém JavaScriptu:
<input id="search" name="search" onfocus="this.name = 'search'; this.value = '';" />
<script type="text/javascript">
document.getElementById('search').name = '';
document.getElementById('search').value = 'Vyhledat';
</script>
Správné řešení tohoto problému spočívá v ponechání popisku mimo formulářové políčko a jeho prosté nastylování:
<fieldset style="position: relative;"> <label for="search" style="position: absolute;">Vyhledat </label><input id="search" name="search" onfocus="this.previousSibling.style.display = 'none';" /> </fieldset>
Pokud by nám vadilo, že při vypnutém JavaScriptu zůstane popisek viset nad formulářovým políčkem, můžeme jeho prvotní nastylování provést JavaScriptem, pak ovšem za tohoto stavu bude popisek umístěn vedle.
A jak to souvisí s PHP? Inu, nemusíme potom psát if ($_GET["search"] != "Vyhledat")…
Diskuse
dgx:
<input id="search" name="search" onfocus="this.name = 'search'; this.value = '';" />
Určitě bych použil:
onfocus="if (this.name=='') { this.name='search' ...
Protože je hloupé vymazat již zadaný text, pokud uživatel klikne do políčka dvakrát.
dgx: 3rojka:
Trošku mě zmátla věta "vypnutém JavaScriptu zůstane ..., můžeme jeho prvotní nastylování provést JavaScriptem", asi tam mělo být css, ale jinak dobrý.
Jakub Vrána 
:
Ne, je to správně. Když jsou vypnuté styly, popisek bude před políčkem, ne nad ním. Když je vypnutý JavaScript, tak tam zůstane i poté, co uživatel do políčka klikne.
Jakub Vrána : dgx:
Ještě jsem to viděl několikrát řešené přes background-image, tedy popisek byl ve skutečnosti obrázek v podkladu textového pole.
dgx: Štěpán Svoboda:
Osobně se domnívám, že popisek vyhledávacího políčka by měl být nejen umístěn vedle (nad/pod) něj, ale měl by být ještě výrazný aby člověk, který hledá vyhledávací políčko ho nemusel taky hledat :)
Petr Vaclavek:
Hodne casto se to take dela tak, ze pri onFocus toho policka se jen oznaci jeho obsah, misto toho aby obsah zmizel. Pokud pak uzivatel zacne psat, obsah zmizi a prepise.
Petr Vaclavek: 
MiSHAK:
Jo docela pěkné řešení.
MiSHAK: Thomas:
Muzete mi nekdo vysvetli proc autor pouziva v tagu tento zapis (lomitko a zobak) u prvku input kdyz to je neparova znacka ?<input ..... />
dgx:
Píše v XHTML a v XML jsou všechny značky párové.
dgx: dgx:
> Co když ale uživatel opravdu chce hledat text „Vyhledat“? Řešit se dá i tento problém, ale je to už poněkud krkolomné...
On je problém není ani tak technický, jako spíš problém použitelnosti. Totiž, pokud chci hledat "Vyhledat" a v políčku je předvyplněno "Vyhledat", tak stačí kliknout na tlačítko, proč někam něco psát, že. Nebo lze očekávat, že uživatel stejně do políčka klikne a napíše znovu "Vyhledat"? Možná ano, možná ne...
dgx: Diskuse je zrušena z důvodu spamu.
© 2005-2024 