7. lekce – Formuláře

Pátek, Září 9th. 2011 | 7. Lekce - Formuláře

Elektronický formulář je prakticky stejný jako klasický tištěný formulář. Obsahuje jak textová pole pro zadávání údajů, tak i tlačítka pro různé volby, dále může obsahovat přepínací tlačítka, např. Ano/Ne, nebo roletové nabídky např: leden, únor, březen, … To vše může být přehledně zformátováno.

Formuláře jsou využívány všude tam, kde potřebujeme získat zpětnou vazby od uživatele. Použitím formulářů tedy vznikají interaktivní webové stránky umožnující uživateli obousměrnou komunikaci se serverem.

Základní metodika použití formulářů

Formulář je v kódu stránky vymezen párovým elementem form. Uvnitř se mohou vyskytovat textová pole, zaškrtávací políčka, přepínače, rolovací seznamy, „textové oblasti“, pole pro vkládání souborů a ovládací prvky (tlačítka).
Tyto elementy mají svůj vzhled implicitně daný použitým prohlížečem, pokud jej pomocí CSS explicitně nezměníme. Změna vzhledu však nemá na funkčnost žádný vliv. V elementu form je možné použít libovolný další XHTML kód.

Formulářů se může na stránce vyskytovat libovolné množství, ale jednotlivé formuláře nesmí být do sebe navzájem vnořeny.

Základním důvodem použití formulářů je možnost zpracovat vyplněná data. Tuto akci provede uživatel většinou stisknutím příslušného tlačítka. Poté dojde k odeslání všech vyplněných hodnot uvnitř formuláře a jejich zpracování pomocí definoovaného skriptu (PHP, ASP, a další).

Atributy elementu form

Element <form> má několik atributů:

  • atribut action – hodnotou tohoto atributu je cesta k obslužnému skriptu, který zpracuje odeslaná data,
  • atribut method – specifikuje, jakým způsobem budou data z formuláře posílána posílána ke zpracování. Je možno použít metody get nebo post. Pokud není atribut uveden, použije se implicitně metoda get,
    • metoda get posílá formulářová data jako součást URL adresy. Např.: http://www.stranka.cz/skript.php?jmeno=nekdo&vek=22. Nehodí se pro formuláře posílající velké množství dat nebo soubory. Rovněž na posílání citlivých informací není tato metoda vhodná,
    • metoda post posílá data v hlavičce protokolu http, data tedy nejsou pro uživatele viditelná. Pomocí této metody lze posílat vše stejně jako metodou get a navíc i soubory,
  • atribut enctype jehož hodnotu je MIME typ přenášených dat. Atribut musíme použít tehdy, pokud formulář obsahuje položku typu file pro odesílání souborů. V tomto případě je hodnotou atributu multipart/form-data,
  • atribut accept jehož hodnotou je typ nebo typy MIME. Atribut je možné použít v případě, že jsme ve formuláři použili položku pro odeslání souboru a požadujeme omezit typy odesílaných souborů. Příklad: accept="image/gif, image/jpg" specifikuje, že uživatel může zaslat pouze soubory typu gif a jpg.

Atributy formulářových prvků

Většina formulářových prvků je tvorena elementem input, který obsahuje atribut type určující, o jaký typ formulářového prvku se jedná, atribut name označující název proměnné, pod kterým se odešle, atribut value určující výchozí hodnotu prvku a atributy disabled nebo readonly určující, že daný prvek formuláře nepůjde změnit. Další atributy jsou závislé na konkrétním typu formulářového pole.

Možné hodnoty atributu type jsou:

  • text – formulářové pole pro zadávání textu,
  • password – textové pole pro zadávání hesla (hvězdičky),
  • hidden – skryté formulářové pole s přednastavenou hodnotou,
  • checkbox – zaškrtávací políčko,
  • radio – přepínač,
  • button – obecné tlačítko použitelné v kombinaci s ovládacími skripty,
  • submit – potrvzující (odesílací) tlačítko,
  • reset – resetující tlačítko,
  • image &dash; grafické potrvzující (odesílací) tlačítko.

Základní prvky formuláře

Textové pole

Nejpoužívanějším formulářovým prvkem je textové pole, do kterého lze zadávat krátký jednořádkový text. Určuje se pomocí atributu type="text".
Dalšími atributy textového pole jsou:

  • atribut size udávající šířku zobrazeného políčka ve znacích. Pokud je zadáno více znakú, odrolují přebytečné znaky vlevo,
  • atribut maxlength udává kolik znaků je možno maximálně vložit do políčka.
<form action=”obsluzny_skript.php” method=”post”>
Jméno:<br />
<input type=”text” name=”jmeno” value=”Vaše jméno” size=”20″ />
</form>

Výsledkem bude formulář obsahující textové pole.

Jméno:

Textové pole pro zadání hesla

Liší se od předchozího případu použitím atributu type="password". Použití atributu value zde nemá smysl, neboť uživatel si stejně nepřečte, co je v poli uvedeno.

<form action=”obsluzny_skript.php” method=”post”>
Heslo:<br />
<input type=”password” name=”heslo” />
</form>

Výsledkem bude formulář obsahující textové pole.

Heslo:

Výsledkem bude formulář obsahující opět textové pole, tentokrát se „zahvězdičkováváním“ textu.

Zaškrtávácí políčko

Zaškrtávací políčko lze vytvořit pomocí atributu type="checkbox". Pokud je políčko při odeslání zaškrtnuto, proměnná definovaná atributem name bude mít hodnotu uvedenou ve value.
Pokud má být formulářové políčko implicitně zaškrtnuto, přidáme atribut checked="checked".

Jak si přejete odeslat zprávu?

<form action=”obsluzny_skript.php” method=”post”>
<input type=”checkbox” name=”emailem” /> E-mailem
<input type=”checkbox” name=”sms” checked=”checked” /> SMS-zprávou
</form>

Výsledkem bude formulář obsahující volbu způsobu odeslání údajů:

Jak si přejete odeslat zprávu?

E-mailem

SMS-zprávou

Přepínač

Pokud uživatel může vybrat maximálně jednu možnost, je vhodné použít přepínač. Přepínač lze vytvořit pomocí atributu type="radio". Výběr přepínače se provádí ze všech přepínačů se stejnou hodnotou atributu name. Odešle se jen hodnota atributu value vybraného přepínače.

<form action=”obsluzny_skript.php” method=”post”>
Pohlaví: <br />
<input type=”radio” name=”pohlavi” value=”z” />Žena<br />

<input type=”radio” name=”pohlavi” value=”m” checked=”checked” />Muž
</form>

Pohlaví

Žena

Muž

Tlačítko reset – vynulování hodnot ve formuláři

Po aktivování tlačítka reset se celý formulář vymaže, resp. nastaví se hodnoty jeho polí na výchozí hodnotu. Popisek tohoto tlačítka lze nastavit pomocí atributu value.

<form action=”obsluzny_skript.php” method=”post”>
<input type=”text” name=”jmeno” />
<input type=”reset” name=”reset” value=”Vymazat” />
</form>

Výsledkem bude formulář s textovým polem a tlačítkem pro vymazání hodnot:

Tlačítko submit – odeslání formuláře

K vytvoření tlačítka pro odeslání dat formuláře ke zpracování použijeme opět element input s tím, že hodnotu atributu type nastavíme na submit. Většinou se ve formuláři objevuje právě jedno takové tlačítko.

<form action=”obsluzny_skript.php” method=”post”>
<input type=”text” name=”jmeno” />
<input type=”submit” name=”odeslat” value=”Odeslat formulář” />
</form>

Výsledkem bude formulář s textovým polem a tlačítkem pro odeslání:

Formulářové pole pro odeslání souboru

Pro výběr a následné odeslání souboru pomocí formuláře se použije element input s atributem type nastaveným na hodnotu file a atributem enctype nastaveným na multipart/form-data. Atribut value nelze v tomto případě použít (z bezpečnostních důvodů).

<form action=”obsluzny_skript.php” method=”post” enctype=”multipart/form-data”>
<input type=”file” name=”soubor” size=”30″ />
</form>

Výsledek:

Element textarea – textové pole

V případě, že požadujeme, aby uživatel vyplnil dlouhý text, použijeme element <textarea>. Metodu předávání hodnot obslužnému skriptu je vhodné nastavit na post.

Element textarea má navíc parametry cols určující šířku pole ve znacích a rows určující výšku pole ve znacích.

<form action=”obsluzny_skript.php” method=”post”>
<textarea cols=”40″ rows=”3″ name=”textovepole”>Sem napiste vzkaz:</textarea>
</form>

Výsledek:


Element select – seznam položek

Seznam položek se do formuláře vkládá pomocí elementu <select>. Jednotlivé položky se do seznamu umístí pomocí <option>. Obě formátovací značky mají několik atributů, kterými lze měnit vzhled i chování seznamu. Atribut multiple u značky <select> určuje, zda je možné vybrat více položek najednou. Uvádí se s hodnotou multiple. Atribut size udává, kolik řádků seznamu bude v prohlížeči zobrazeno najednou. Pokud nastavíme tento atribut na jedna, seznam se promění v rozevírací nabídku. Atribut selected se vztahuje ke značce <option> a označuje položku, která se má zobrazit jako vybraná.

<form action=”obsluzny_skript.php” method=”post”>
<select name=”vyhledavaci_nastroje[]” multiple=”multiple” size=”3″>
<option value=”www.google.com” selected=”selected”>Google</option>
<option value=”www.jyxo.cz”>Jyxo</option>
<option value=”www.yahoo.com”>Yahoo</option>
<option value=”www.seznam.com”>Seznam</option>

</select>
</form>

Výsledkem bude formulář obsahující tento seznam vyhledávacích serverů:

Element select – seznam se skupinami položek

Jednotlivé položky seznamu, které spolu nějak souvisejí, lze uspořádat do logických skupin. Skupinu položek seznamu vytvoříme formátovací značkou <optgroup>. Tento element bývá doplněna atributem label, udávajícím popisek, kterým je skupina v nabídce označena.

<form action=”obsluzny_skript.php” method=”post”>
<select name=”vyhledavaci_nastroje”>
<optgroup label=”Vyhledávací nástroje”>
<option value=”www.google.com”>Google</option>
<option value=”www.jyxo.cz”>Jyxo</option>
</optgroup>
<optgroup label=”Katalogy”>

<option value=”www.yahoo.com”>Yahoo</option>
<option value=”www.seznam.com”>Seznam</option>
</optgroup>
</select>
</form>

Výsledkem bude formulář obsahující tyto skupiny položek:

Element label – popisky položek

Pro popisky jednotlivých formulářových polí lze použít párový tag <label>. Umisťuje se před popisovaný element pole a obsahuje daný popisek. Je nutné pro atribut for uvést hodnotu v podobě hodnoty id uvedené u daného elementu. Při použití elementu label dojde po kliknutí na popisek k aktivaci pole.

<label for=”jmeno”>Jméno:</label>
<input type=”text” name=”jmeno” id=”jmeno” />

Výsledek:

Element fieldset – seskupování prvků ve formuláři

V jednom formuláři může být několik prvků, které spolu souvisejí. Například informace o zákazníkovi. Takové informace je možne zvýraznit i opticky. Např. adresa zákazníka je charakterizována položkami jméno, přijmení, ulice, psč, město. Tuto množinu je pak možno seskupit.

Pro seskupení položek používáme element <fieldset>. Všechny ovladací prvky, jejichž definice je umístěna mezi počátkem a koncem této značky, jsou ve výsledném dokumentu ohraničeny rámečkem.

Použijeme-li ještě element <legend>, bude tento rámeček označen popiskem. Tento popisek může být zarovnán pomocí atributu align s parametry top, bottom, left nebo right. Implicitně je nastaven na top.

<form action=”obsluzny_skript.php” method=”post”>
<fieldset>
<legend><Adresa zákazníka</legend>
<p><label for=”jmeno”>Jméno:</label>

<input type=”text” name=”jmeno” />
<label for=”prijmeni”>Přijmení:</label>
<input type=”text” name=”prijmeni” />
</p>
<p><label for=”ulice”>Ulice:</label>
<input type=”text” name=”ulice” id=”ulice” />

</p>
<p>
<label for=”psc”>Psč:</label>
<input type=”text” name=”psc” id=”psc” />
<label for=”mesto”>Město:</label>
<input type=”text” name=”mesto” id=”mesto” />
</p>

</fieldset>
</form>

Výsledek:

Adresa zákazníka

Vyhledávání na vlastním webu pomocí formuláře

Zpřístupnit uživatelům možnost vyhledávání na Vašem serveru je možné dvěma způsoby. Buď si vlastní vyhledávač naprogramujete ručně a nebo můžete využít služeb externího vyhledávače.

Omezení cizího vyhledávače na vlastní web

Základní princup spočívá ve vytvoření vlastního fomuláře pro vyhledávání, jehož obsluha (atribut action) je řízena externím vyhledávačem (většinou Google, ale také Atomz, Jyxo atd.). Prostřednictvím skrytého pole je dále nastaveno omezení vyhledávání pro vlastní web. Výsledky vyhledávání jsou zobrazeny stejně jako kdyby uživatel použil přímo služby použitého vyhledávače.

Formulář pro Google

<form action=”http://www.google.com/search” target=”_blank”>
<input type=”text” name=”as_q” size=”20″ />
<input type=”hidden” name=”as_sitesearch” value=”adresa webu” />
<input type=”submit” value=”Vyhledat” />
</form>

Základní podmínkou funkčnosti je samožřejmě nutnost zaregistrovat daný web v Googlu. Pokud toto neproběhne automaticky (trvá řádově několik týdnu, stránky navíc musí být dostupné pro roboty), je možné registraci zadat ručně na http://www.google.com/addurl.

Vylepšení Google Sitesearch

Výhodou oproti předchozímu řešení je možnost graficky upravit výsledky vyledávání tak, aby odpovídaly designu Vašeho webu.
Formulář může vypadat např. takto:

<form action=”http://www.google.com/custom”>
<input type=”text” name=”q” size=”31″>
<input type=”submit” value=”Vyhledat Googlem na upce.cz”>
<input type=”hidden” name=”cof” value=”T:black;GALT:#333366;GFNT:#44AA66;LC:#333366;BGC:white;VLC:#3344bb;
GIMP:#666;LW:131;LH:88;L:http://www.upce.cz/styles/imix/logoUPCE.gif;
AH:center;S:http://www.upce.cz;” />

<input type=”hidden” name=”domains” value=”upce.cz” />
<input type=”hidden” name=”sitesearch” value=”na upce.cz” />
<input type=”hidden” name=”ie” value=”utf-8″ />
</form>

Skryté vstupní pole se jménem cof obsahuje definice vzhledu výsledků. V současnosti funguje dost sporadicky, něco ano, něco ne.

Barvy:
T: většinový text
LC: nenavštívený odkaz
VLC: navštívený odkaz
ALC: aktivní odkaz (přejížděný tabulátorem)
GALT: vypsané url (alternativní barva textu)
GFNT: sekundární odkazy (archiv, podobné) a nadpis bloku reklam
GIMP: barva číslíčka aktuální stránky (dole)
BGC: pozadí stránky (barva)

BIMG: url obrázku na pozadí
GL: styl pozadí formuláře ve výsledku: 0 nebo bez hodnoty je bílá (pokud je pozadí jiné barvy, pak má formulář rámeček), 1 šedá s rámečkem, 2 černá s rámečkem. Jiné barvy formuláře nastavit nejdou.

Logo:
L: url loga
LW: šířka loga (v pixelech)
LH: výška loga (v pixelech)
S: kam logo kliká
AH: zarovnání loga a formuláře (left|right|center), výchozí je center

Do inputu name=”ie” se zadává kódování stránky, na které je formulář umístěný.

Google Coop

Zajímavou možností jak využít Googlu k vyhledávání tak, aby bylo možné jak vyhledávací formulář, tak především výsledky vyhledávání zabudovat do designu konkrétního webu. Po registraci na http://www.google.com/coop/cse si můžete vytvořit vlastní vyhledávání, do něhož zahrnete pouze určité domény. Výsledky je možné přes javascript vložit na vlastní stránku, která je na doméně majitele webu. Pak to vypadá, že je vyhledávání přímo na tom webu, nikoli na Google.

Komentář: 1 to 7. lekce – Formuláře

Karinita
4. Červenec, 2014

Rozhodně užitečnfd čle1nek. Dovoledm si přidat pe1r postřehů + jeden dotaz.1) Pohyb po stre1nce: ?ekl bych, že sleped uživatele9 nejsou často tolik zvykled se poohbyvat po nadpisech, jako po odkazech. A to ne proto, že by to bylo pohodlnějšed, ale proto, že jsou už nějak zvykled, že “nadpisy” velmi často že1dnou semantiku nemajed. Možnost semanticke9ho pohybu po nadpisech sice vedtajed s otevřeonu ne1ručed (Už proto, že odkazů jim to obvykle přečte ohromne9 množstved, často velmi chaoticky), ale předliš ji neočeke1vajed.2) Title: zatedm jsem se nesetkal s tedm, že by nějake1 čtečka v implicitnedm nastavened přečetla běžně použitfd title, vyjma předpadů, kdy je title to jedine9, co element obsahuje.3) Kotvy: K odkazům na kotvy bych re1d dodal, že existuje nějakfd bug v IE, kterfd občas způsobed, že čtečka skočed v obsahu “kamsi” ještě před kotvu, tudedž začne třeba čedst od půlky předchozedho (nesouvisejedcedho) odstavce. De1 se to vyřešit obalenedm kotvy do elementu s pevnou velikosted, ale věředm, že se najde nějake9 elegantnějšed řešened.4) JAWS9: V Jaws 9 jsem si všiml, že již podporuje alespo? css vlastnost speak: spell-out. (Nevedm jak jine9 verze, ale “šestka” to neumed.) Spell-out by se velmi hodilo pro zkratky typu SMS, RSS, CMS,…, ale v praxi je to zatedm nepoužitelne9, protože staršed čtečky kašlou i na tento styl (resp. umož?ujed pouze “vyvolat” spelove1ned uživatelem).V Jaws9 jsem mimochodem kromě {speak: spell-out} nezjistil že1dnfd dalšed podporovanfd aural styl.5) Radek Pavledček: Zmi?ujete v komente1ři použited “skrytfdch” nadpisů. Ty by byly v mnoha předpadech velmi užitečne9, nicme9ně by to teoreticky mohlo medt i neblahe9 ne1sledky na viditelnost stre1nky např. ze strany Google, protože (přestože je to děle1no v dobre9m famyslu), je to v předme9m rozporu s jeho pravidly. Nezne1te nějakfd precedens nebo bližšed info, ze ktere9ho by se dalo odvodit, že s tedm lze nakle1dat nez obav?

Napsat komentář

TVORBA WEBOVÝCH STRÁNEK

ODKAZY

KONTAKTNÍ FORMULÁŘ

Jméno:

E-mail:

Váš vzkaz:

sedm plus pět =

VYHLEDÁVÁNÍ

PODĚKOVÁNÍ

Logo projektu