ZaRohem.cz Pražské metro Test osobnosti CowParade 2004 Praha MHD v ČR
Blog ZaRohem 1.PCRevue.cz Vinárna Na roli (Petřvald) Restaurace Třebovická role kapela Terra Ignota

Reklama
Hlavní stránka
Aktuality
Software
Internet
Hardware
Seriály
Viry
Tipy a triky
Download
Konference
Napište nám
Reklama
Doporučujeme užitečný crm systém od CÍGLER SOFTWARE!
Reklama
Tip na výkonný Macbook Pro 2017. Pořiďte si rychlý notebook s dlouhou výdrží.
28. únor 2000 - Seriály

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ě?

Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Další deníky

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ší:

Informace o uživateli

Jméno:
Příjmení:
e-mail:

Konfigurace počítače

Procesor:
Pentium III
Pentium II
Celeron
Pentium MMX
Pentium
Jiný
Mechaniky pro přenosná média:
Mechanika CD ROM
Mechanika CD-R
Mechanika CD-RW
Mechanika ZIP
Mechanika LS120

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.

Reklama
 
 
Aktuální články:
Reklama
Program eWay-CRM je praktické CRM řešení integrované přímo do Microsoft Outlooku. Vyzkoušejte Outlook CRM i vy!
 
 
Reklama
 
© 1.PC Revue.cz - všechna práva vyhrazena
ISSN: 1213-080X
© Karel Kilián ml.
Zásady ochrany osobních údajů
Reklama