LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> HTML (12) - formuláře 2

Už víme, jak na stránce označit formulář, ale formulář by měl mít nějaká vstupní políčka a další prvky, kterými můžete vyjádřit své požadavky.

26.8.2004 15:00 | Pavel Kácha | Články autora | přečteno 34669×

Většina formulářových prvků se v HTML zadává pomocí tagu <input>. Tento element je nepárový, takže jeho ukončovací tag není definován. Jaký typu formulářového prvku chceme na stránce zobrazit se určuje pomocí atributu type="". Může nabývat jedné z těchto hodnot: text, password, checkbox, radio, submit, reset, file, hidden, image, button. Na jednotlivé hodnoty se nyní podíváme podrobněji.

text

text je výchozí hodnotou pro atribut type="", pokud tedy zapomenete tento atribut použít, doplní si prohlížeč právě tuto hodnotu. Pokud použijete hodnotu text, objeví se vám na stránce textové políčko pro vložení jednořádkového textu. S hodnotou text jsou spojeny tyto specifické atributy:

  • value=""
  • size=""
  • maxlenght=""

Atributem value="" určíme text, který se má v textovém políčku zobrazit při načtení stránky. Atribut size="" určuje délku textového políčka. Jeho hodnotou je celé číslo, které udává, kolik znaků má být v textovém okénku vidět, tj. udává jeho délku ve znacích. A atribut maxlenght="" určuje maximální délku textu, který můžete do textového políčka napsat. Tento atribut je vhodné použít například ve chvíli, kdy data z formuláře chcete ukládat do databáze, kde máte omezenou maximální délku záznamu. Neochrání vás to ale jistě, někdo vám může zkusit podstrčit data podobně jako jsem to udělal já v minulém díle - minule šlo jen o výpis, ale úplně stejně by se dalo zapisovat třeba do knihy návštěv ze seriálu o PHP. Proto při tvorbě dynamických stránek všechna data ošetřujte i na straně serveru.

Zkusíme si udělat jednoduché textové pole.

Pokud si kód zkopírujete do své stránky, bude tlačítko pravděpodobně vypadat jinak než zde. Je to tím, že některé formulářové prvky jsou na těchto stránkách přestylované pomocí CSS. To platí i o dalších formulářových prvcích.

<input type="text" value="jsem textove pole" name="text1" size="30">

password

Může se vám to zdát podivné, ale o tomto formulářovém prvku už vše víte. Chová se totiž úplně stejně jako textové políčko, jediný rozdíl je v tom, že při psaní se místo písmen objevují hvězdičky (nebo taky kolečka nebo cokoli jiného - záleží na konkrétním prohlížeči). Takže rovnou přejdeme k příkladu.

<input type="password" value="tajné heslo" name="heslo" size="30">

checkbox

Tyto formulářové prvky jsou určené pro zjištění požadavků uživatele ve formě ANO/NE. Checkbox se zobrazuje většinou jako malý čtvereček, který můžete zaškrtnout (ANO) nebo nechat prázdný (NE). Checkbox má povinné atributy name="" a value="" (tento atribut je u ostatních formulářových prvků volitelný). name="" obsahuje jmeno proměnné, která se bude předávat cílovému scriptu a ve value="" určíte hodnotu proměnné. Tato hodnota se odešle jen v případě, že je checkbox aktivní (zaškrtlý). Pokud máte několik checkboxů, které jsou s spolu logicky svázané je vhodné je pojmenovat nějak takto: promenna[], vznikne vám tak rovnou pole, které můžete velice jednoduše zpracovat (předpokládám, že data z formuláře zpracováváte přes php).

Může nastat i situace, že potřebujete zajistit aby bylo některé políčko zaškrtnuté už od načtení stránky. K tomuto efektu slouží atribut checked, kterému nenastavujeme žádnou hodnotu.

<input type="checkbox" name="zaskrtavatko" value="zaskrtnuto" checked> Umím vytvořit checkbox.

Umím vytvořit checkbox.

radio

Tento formulářový prvek má stejné atributy jako checkbox, ale použití se malinko liší. radio se používá pokud chcete dát vybrat uživateli z několika možností, ale uživatel si může vybrat jen jednu. Všem prvkům v jedné skupině možností nastavte stejnou hodnotu atributu name="". Odesílá se jen hodnota u zaškrtlého prvku. Opět můžete nějakou možnost předvolit atributem checked.

Používám operační systém:<br>
<input type="radio" name="os" value="linux" checked> Linux<br>
<input type="radio" name="os" value="jiny" > jiný<br>

Používám operační systém:
Linux
jiný

submit

Takto vytvoříte tlačítko, které odešle formulář ke zpracování zpracovávajícímu scriptu. Popisek tlačítka můžete definovat pomocí atributu value="". Pokud přidáte i nepovinný atribut name="", můžete definovat několik odesílacích tlačítek a podle toho, které tlačítko bylo zmáčknuto, můžete různě vyhodnotit formulář, hodnata tlačítka se odešle jako další proměnná, její název určíte právě pomocí atributu name="".

<input type="submit" value="odesílací tlačítko">

reset

Toto tlačítko slouží pro smazání dat ve formuláři, nic se neodesílá ke zpracování. Atributem value="" nastavíme popisek tlačítka.

<input type="reset" value="smaž formulář">

file

Tímto formulářovým prvkem můžete spolu s formulářem odeslat i soubor uložený na vašem počítači. Při odesílání souborů musíte nastavit formuláři jiné kódování přenášených dat (enctype="application/x-www-form-urlencoded"). Více informací najdete v předchozím dílu.

Můžete použít atribut accept="", kterým určíte jaké typy souborů je povolené zadat. I o tomto atributu jsme mluvili v předchozím dílu.

<input type="file" name="soubor">

hidden

Hidden neboli skryté pole. Tento formulářový prvek se na stránce nijak nezobrazí, ale slouží jako uložiště dat, která nemají mít uživatelé na očích. Můžete ho využít třeba v případě, že máte několik formulářů, které si mezi sebou posílají data, na každém formuláři se zjistíněco dalšího a odešle do následujícího formuláře do skrytých polí.

Použít můžete atributy name="" pro určení jména proměnné a atribut value="" pro nastavení hodnoty proměnné.

<input type="hidden" name="tajna_promenna" value="jeji_hodnota" >

image

Jako odesílací tlačítko lze použít i soubor. Pomocí atributu src="" určíme cestu k obrázku. Po kliknutí se odšlou data na server a mezi proměnnými budou i souřadnice místa, na které jste klikli. Souřadnice budou ve formátu jmeno_tlačítka.x resp jmeno_tlačítka.y.

Toto tlačítko je ale nepoužitelné v textových prohlížečích, takže tím je celý formulář nefunkční. Pokud si ríkáte, že textové prohlížeče nikdo nepoužívá, tak musím říct, že aspoň já občas brouzdám v terminálu. Jsem jediný?

<input type="image" name="obrazek" src="odesli.png" >

button

Pokud chcete mít na stránce tlačítko, které ani neodesílá data ani je nemaže, je volba button přesně to co hledáte. Toto tlačítko nemá žádnou funkci, ale můžete si pomocí klientským scriptům (JavaScript a další.) napsat vlastní funkce. Pro spouštění jednotlivých scriptů můžete použít např. událost onclick="" a další, o kterých jsem se už zmínil v předchozích dílech.

Popisek opět můžete nastavit atributem value="".

<input type="button" value="tlačítko" onclick="over();" >

To je pro dnešek vše, už znáte základní prvky formulářů, příště je probereme všechny dopobrobna.

Verze pro tisk

pridej.cz

 

DISKUZE

Překlep 11.12.2008 11:11 Eva Rázgová
Návaznost 6.8.2013 10:24 Stanislav Mišík




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze