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 35461×

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ů

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

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

> Poslední diskuze

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:04 / Jan Ober
Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:00 / Jan Ober
Re: Gimp

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

Více ...

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