HTML Formuláre a Input

HTML Formuláre sa pou?ívajú na zobratie rôznych tipov u?ívate?ských vstupov.

Príklady

Textové polia
Tento príklad predvádza, ako vytvori? textové polia na HTML stránke. U?ívate? mô?e písa? text do textového po?a.

Heslové polia
Tento príklad predvádza, ako vytvori? heslové pole na HTML stránke.

(Viac príkladov nájdete na spodku tejto stránky)

Formuláre

Formulár je plocha, ktorá mô?e nadobúda? form elementy.

Form elementy sú elementy, ktoré povolujú u?ívate?om, vklada? informácie (ako textové polia, textarea polia, vysúvacie polí?ka, rádiobuttony, za?krtávacie poila, at?. - vo formulári.

Formulár je ur?ený s <form> tágom.

<form>
  <input>
  <input>
</form>

Input (vstup)

Najviac pou?ívaný form tág, je <input> tág. Typ inputu je ?pecifikovaný s typom atribútu. Najbe?nej?ie pou?ívané input typy sú vysvetlené dolu.

Textové polia

Textové polia sa pou?ívajú, ke? chceme od u?ívate?a, aby vkladal text - písmená, ?íslice, at?. vo formulári.

<form>
Meno: 
<input type="text" name="meno">
<br>
Priezvisko: 
<input type="text" name="priezvisko">
</form>

Ako to vyzerá v browsery:

Zazna?te si, ?e formulár sám o sebe nie je vidie?. Taktie? si pozna?te, ?e vo vä??ine browserov je ?írka textového po?a defaultne 20 znakov. 

Rádio Buttony

Rádio Buttony sa pou?ívajú, ke? chceme, aby u?ívate? vybral JEDNU z viac mo?ností.

<form>
<input type="radio" name="pohlavie" value="mu?"> Mu?
<br>
<input type="radio" name="pohlavie" value="?ena"> ?ena
</form>

Ako to vyzerá v browsery:

Zazna?te si, ?e len jedna mo?nos? mô?e by? vybratá.

Za?krtávacie polí?ka

Za?krtávacie polí?ka sa pou?ívajú, ke? chceme, aby u?ívate? vybral jednnu alebo viac mo?ností.

<form>
Mám motorku:
<input type="checkbox" name="vozidlo" value="Motorka">
<br>
Mám auto: 
<input type="checkbox" name="vozidlo" value="Auto">
<br>
Mám lietadlo: 
<input type="checkbox" name="vozidlo" value="Lietadlo">
</form>

Ako to vyzerá v browsery:

Action atribút formulára a potvr?ovacie tla?ítko

Ak u?ívate? klikne na "Submit" tla?ítko, obsah formulára je poslaný do iného súboru. Action atribút formulára definuje názov súboru, do ktorého sa má obsah formulára posla?. Súbor ur?ený v action atribúte zvy?ajne nie?o spraví s prijatým inputom (to, ?o u?ívate? vlo?il do formulára, tzv. "vstup")

<form name="input" action="html_form_action.php"
method="get">
username: 
<input type="text" name="user">
<input type="submit" value="Posla?">
</form>

Ako to vyzerá v prehliada?i:

Ak napí?ete nejaké znaky do polí?ka hore a kliknete "Posla?" tla?ítko, po?lete vá? vklad (input, vstup) do stránky "html_form_action.php". Tá stránka vám uká?e prijatý input (to, ?o ste vlo?ili).

Viac Príkladov

Za?krtávacie polí?ka (CheckBoxe)
Tento príklad predvádza, kao vytvori? za?krtávacie polí?ka na HTML stránke. U?ívate? mô?e za?krtnú? alebo od?krtnú? jedno polí?ko.

Rádio buttony
Tento príklad predvádza, ako vytvori? rádio-buttony na HTML stránke.

Jednoduché vysúvacie polí?ka (drop-down box)
Tento príklad predvádza, ako vytvori? jednoduchý drop-down box v HTML stránke. Drop-down box je vyberate?ný list.

Iný drop-down box
Tento príklad predvádza, ako vytvori? jednoduchý drop-down box s prednastavenou hodnotou0.

Textarea (textové pole)
Tento príklad predvádza, ako vytvori? textové pole (viac-riadkový text input). U?ívate? mô?e písa? text do textového po?a. Do tohoto text-area (textové pole) sa mô?e napísa? nekone?no znakov.
Mo?no, ?e si teraz mýlite textové pole, ako input type="text" a textové pole, ako textarea. Textarea je napríklad to pole, kde pí?ete kód v TryIt! editore. Input typu text je textové pole s 1 riadkom, napríklad pole, kde zadávate meno a heslo pri login-e na stránku.

Vytvorenie tla?ítka
Tento príklad predvádza, ako vytvori? nejaký button (tla?ítko). Na tla?ítku si mô?eme nastavi? hocijaký text.

Fieldset okolo dát (sústava polí)
Tento príklad predvádza, ako natiahnu? border (okraj) s titulkom okolo va?ich dát.

Form Príklady

Formulár s input po?ami a potvrdzovacím tla?ítko
Tento príklad predvádza, ako prida? formulár na stránku. Tento formulár nadobúda dve input polia a potvrdzovacie tla?ítko.

Formulár s checkboxami
Tento formulár nadobúda tri checkboxe a jedno submit tla?ítko (potvrdzovacie).

Formulár s rádio buttonami
Tento formulár nadobúda dva rádio buttony a jedno submit tla?ítko.

Posla? e-mail z formulára
Tento príklad predvádza, ako posla? e-mail z formulára.

Tágy vo Formulári