Jak vytvářet www stránky - 16. díl
Formuláře - 3. pokračování
Dnes si ukážeme, jak můžete vyšperkovat své webové formuláře pomocí několika jednoduchých fíglů. Na závěr si ukážeme několik tipů a triků, které zatraktivní vaše stránky a také usnadní orientaci vašim návštěvníkům.
Vylepšené tlačítko (BUTTON)
Protože tlačítko vytvořené pomocí elementu INPUT nenabízí příliš široké možnosti, objevil se v normě HTML 4.0 samostatný tag BUTTON (tlačítko, knoflík). Ten umožňuje mnohem lépe specifikovat vlastnosti tlačítka, do kterého lze nyní umísťovat objekty jako například obrázky, tabulky, formátovaný text atd.
- name - jméno prvku, které je důležité zejména v případě, že jsou na toto tlačítko vázané nějaké skripty.
- value - hodnota, která je předána serveru v okamžiku stisknutí tlačítka.
- type - nabízí tři varianty: submit (odeslání dat z formuláře), reset (vymazání formuláře a nastavení všech polí do výchozího stavu) a button (tlačítko, které nevykoná žádnou akci s vlastním formulářem, ale provede zadaný skript)
- disabled - tento parametr způsobí, že tlačítko nebude aktivní (uživatel jej tedy nebude moci stisknout).
- accesskey - definování klávesové zkratky, která umožní stisknutí tlačítka bez použití myši.
Jak si vytvoříte vzhlednější tlačítko si ukážeme na příkladu ze 14. dílu:
<B>Které deníky čtete pravidelně?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="checkbox" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="checkbox" name="deniky" value="blesk">Blesk<BR>
<INPUT type="checkbox" name="deniky" value="pravo">Právo<BR>
<INPUT type="checkbox" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="checkbox" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="checkbox" name="deniky" value="dalsi">Další deníky<BR>
<BUTTON name="tlacitko" type="submit" accesskey="O">
<B><U>O</U>deslat data ke zpracování</B><BR>
<FONT color="red">jak vidíte, lze v tlačítku BUTTON použít i barevný text</FONT><BR>
</BUTTON>
</FORM>
A takto vypadá výsledek:
Které deníky čtete pravidelně?
Kromě formátovaného textu můžete do tlačítka vkládat obrázky, tabulky a většinu prvků standardu HTML.
Rámečky ve formulářích (FIELDSET a LEGEND)
K lepší orientaci může pomoci rozčlěnění jednotlivých prvků formuláře do několika částí. K tomu slouží párové tagy FIELDSET a LEGEND. FIELDSET ohraničí všechny formulářové prvky, které jsou umístěném mezi úvodním a zakončovacím tagem, tenkým rámečkem, čímž je opticky oddělí, LEGEND pak nabízí vytvoření popisku tohoto rámečku. Tag FIELDSET nemá žádné důležité parametry, u tagu LEGEND je podstatné pouze jeho zarovnání vzhledem k rámečku pomocí parametru align. Hodnoty jsou podobné jako u většiny prvků HTML, tedy top (zarovnání nahoru), bottom (zarovnání dolů), left (doleva) a right (doprava).
Jak může vypadat takto vylepšený formulář vidíte opět na příkladě:
<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:jmeno@server.cz">
<FIELDSET>
<LEGEND align="top">Informace o uživateli</LEGEND>
Jméno: <INPUT type="text" name="jmeno" size=30 maxlength=45 align="left"><BR>
Příjmení: <INPUT type="text" name="prijmeni" size=30 maxlength=45 align="left"><BR>
e-mail: <INPUT type="text" name="email" size=30 maxlength=45 align="left"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND align="top">Konfigurace počítače</LEGEND>
Procesor:<BR>
<INPUT type="radio" name="procesor" value="pentium3" chcecked>Pentium III<BR>
<INPUT type="radio" name="procesor" value="pentium2" chcecked>Pentium II<BR>
<INPUT type="radio" name="procesor" value="celeron" chcecked>Celeron<BR>
<INPUT type="radio" name="procesor" value="pentiummmx" chcecked>Pentium MMX<BR>
<INPUT type="radio" name="procesor" value="pentium" chcecked>Pentium<BR>
<INPUT type="radio" name="jiny" value="pentium" chcecked>Jiný<BR>
Mechaniky pro přenosná média:<BR>
<INPUT type="checkbox" name="vybava" value="cdrom" chcecked>Mechanika CD ROM<BR>
<INPUT type="checkbox" name="vybava" value="cdr" chcecked>Mechanika CD-R<BR>
<INPUT type="checkbox" name="vybava" value="cdrw" chcecked>Mechanika CD-RW<BR>
<INPUT type="checkbox" name="vybava" value="zip" chcecked>Mechanika ZIP<BR>
<INPUT type="checkbox" name="vybava" value="ls120" chcecked>Mechanika LS120<BR>
</FIELDSET>
<INPUT type="submit" value="Odešli data">
</FORM>
Jistě mi dáte za pravdu, že formulář je díky rámečkům s legendou mnohem přehlednější:
Tipy, triky a vylepšení
Ačkoli jsme se zatím pečlivě drželi normy HTML 4.0 dle doporučení W3C, nabídneme vám desítku tipů, které osvěží vaše www stránky, ovšem neručíme za to, že budou fungovat v úplně všech prohlížečích (v MS Internet Exploreru 4.0 a 5.0, který používá drtivá většina uživatelů však fungovat budou). Některé ukázky jsou zpracované pomocí JavaScriptu a CSS, takže budou fungovat pouze v prohlížečích, které JavaScript a CSS podporují.
Tip č. 1: Návrat o stránku zpět
Chcete-li, aby se uživatel mohl vrátit na stránku, z níž přišel (bez ohledu na to, kde je tato stránka umístěna), použijte pro odkaz následující kód:
<A href="JavaScript:history.back()">libovolný text viditelný jako odkaz</a>
Kliknutí na takovýto odkaz má zcela stejný význam, jako stisk tlačítka Zpět (resp. Back) v horní liště browseru.
Tip č. 2: Tlačítko místo odkazu
Jestliže chcete mít místo textového hyperlinkového odkazu tlačítko, můžete použít "prázdný formulář". Zdrojový kód takového objektu vypadá následovně:
<FORM action="adresa" method="get">
<INPUT type="submit" value="popis tlačítka">
</form>
Místo parametru adresa vepište adresu na odkazovaný server nebo dokument., místo popis tlačítka pak to, co uvidí návštěvník napsané na tlačítku.
Tip č. 3: Jak vypsat uživateli jméno jeho browseru
Chcete-li, aby se návštěvníkovi vašich stránek v textu zobrazilo jméno prohlížeče, který používá, stačí do těla dokumentu vložit kraťoučký JavaScript.
<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(navigator.appName)
// -->
</SCRIPT>
Výsledek může vypadat například takto: Používáte
Tip č. 4 - uzavření okna kliknutím na odkaz
Chcete-li dát návštěvníkovi svých stránek možnost uzavřít aktuální okno prohlížeče kliknutím na hyperlinkový odkaz, stačí vložit do stránky následující kód:
<A HREF=JavaScript:onclick=self.close()>uzavřít toto okno</A>
Na vlastní kůži si tento efekt můžete vyzkoušet kliknutím sem.
Jednoduché, ale efektní...
Tip č. 5: Automatické přesměrování na jinou stránku - 1. způsob
Tento tip se vám bude hodit v případě, že přestěhujete své www stránky na jiný server. Návštěvník, který si pamatuje pouze starou adresu tak bude automaticky přesměrován na nové umístění, aniž by musel kamkoli kliknout.
Stačí do kódu stránky vložit jednoduchoučký JavaScript, v němž proměnou kam presmerovat nahradíte novou adresou svých www stránek (např. http://www.zive.cz/):
<SCRIPT language="JavaScript">
<!--
window.location="kam presmerovat";
//-->
</SCRIPT>
Tip č. 6: Automatické přesměrování na jinou stránku - 2. způsob
V předchozím tipu jsme si popsali přesměrování na jinou www stránku pomocí JavaScriptu. Dnes si popíšeme další způsob, kterým lze dosáhnout téhož.
Stačí na libovolný řádek mezi tagy <HEAD> a </HEAD> umístit následující tag META:
<META HTTP-EQUIV="Refresh" CONTENT="cas; URL=adresa">
Místo proměnné cas zadáte počet vteřin, po kterých má dojít k přesměrování, místo adresa pak vyplníte adresu stránky, na níž má dokument přesmerovávat. Dávejte pozor především na správný zápis uvozovek - celkem jsou v tomto elementu pouze čtyři!
Tip č. 7: Přidání stránky k oblíbeným položkám kliknutím na odkaz
Chcete-li, aby si uživatelé mohli přidat vaší stránku k oblíbeným položkám bez toho, aby museli v menu Oblíbené klikat na volbu Přidat k oblíbeným položkám a následně vše ještě potvrzovat stiskem tlačítka OK, můžete jim vytvořit odkaz, který se postará o jednodušší zařazení vaší stránky mezi oblíbené. Stačí na libovolné místo stránky umístit následující kód:
<SCRIPT language="javascript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0) && (parseInt(navigator.appVersion) >= 4)) {document.write("<U><SPAN onclick='window.external.AddFavorite(location.href, document.title);'>Přidat stránku k Oblíbeným položkám</SPAN></U>");}
//-->
</SCRIPT>
Poznámka: modře označený text musí být umístěn v jediném řádku
Jak vypadá výsledek si můžete vyzkoušet kliknutím na odkaz
Tip č. 8: Odeslání e-mailu na dvě adresy současně
Zcela jednoduchou úpravou odkazu můžete dosáhnout toho, že po kliknutí na tento odkaz se otevře okno mailovacího programu s vyplněnou adresou dvou různých příjemců. Pokud pak uživatel něco napíše a stiskne tlačítko Odeslat, bude příslušná zpráva odeslána současně na obě adresy. Zdrojový kód vypadá následovně:
<A HREF="mailto:prijemce1@server.cz?CC=prijemce2@server2.cz">Napište nám!</A>
Například si tak můžete nechat posílat zprávy na e-mail domů i do zaměstnání. Chcete-li si vyzkoušet, jak to celé funguje, zkuste kliknout sem.
Tip č. 9: Jak zajistit, aby se vaše stránky zobrazovaly hezky česky
Některé browsery mohou nesprávně zobrazovat češtinu na vašich stránkách, proto je dobré hned v záhlaví definovat kódovou stránku, v níž je dokument napsán. To provedete jednoduchým meta-tagem, který umístíte mezi tagy <HEAD> a </HEAD>. Zdrojový kód tohoto tagu vypadá takto:
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
Pokud browser zná kódovou stránku 1250 (což zná většina browserů), automaticky se přepne a vaše stránky budou zobrazeny s dokonalou češtinou.
Tip č. 10: Odkaz, který se podrthne až po aktivaci kurzorem
Pokud si na stránce vytvoříte hyperlinkový odkaz, bude ve většině prohlížečů zobrazen podtrženým písmem, což může v některých případech působit rušivým dojmem. Chcete-li, aby se odkaz podtrhnul až v okamžiku, kdy na něj uživatel ukáže kurzorem myši, můžete si pomoci kaskádovými styly. Stačí kamkoli do stránky (nejlépe však na její začátek hned po tagu BODY) umístit následující kód:
<STYLE>
<!--
a {text-decoration:none}
a:hover {text-decoration:underline}
-->
</STYLE>
Tolik tedy dnešní dlouhý díl seriálu o HTML. Za týden se těším opět nashledanou.
|
