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")

Jakub Vrána, Dobře míněné rady, 13.12.2006, diskuse: 10 (nové: 0)

Diskuse

ikona 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.

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ý.

ikona Jakub Vrána OpenID:

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.

ikona 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.

Š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 :)

ikona 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.

ikona MiSHAK:

Jo docela pěkné řešení.

Thomas:

Muzete mi nekdo vysvetli proc autor pouziva v tagu tento zapis (lomitko a zobak) u prvku input kdyz to je neparova znacka ?
<input ..... />

ikona dgx:

Píše v XHTML a v XML jsou všechny značky párové.

ikona 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...

Vložit komentář

Používejte diakritiku. Vstup se chápe jako čistý text, ale URL budou převedeny na odkazy a PHP kód uzavřený do <?php ?> bude zvýrazněn. Pokud máte dotaz, který nesouvisí s článkem, zkuste raději diskusi o PHP, zde se odpovědi pravděpodobně nedočkáte.

Jméno: URL:

avatar © 2005-2018 Jakub Vrána. Publikované texty můžete přetiskovat pouze se svolením autora. Ukázky kódu smíte používat s uvedením autora a URL tohoto webu bez dalších omezení Creative Commons. Můžeme si tykat. Skripty předpokládají nastavení: magic_quotes_gpc=Off, magic_quotes_runtime=Off, error_reporting=E_ALL & ~E_NOTICE a očekávají předchozí zavolání mysql_set_charset. Skripty by měly být funkční v PHP >= 4.3 a PHP >= 5.0.