Predmetová komisia ELT a INF

Učebnica HTML - Formuláre

HTML - Basic - Forms

« Predchádzajúca Ďalšia kapitola »

HTML formuláre sa používajú na výber a získavanie rôznych druhov užívateľských vstupov. 

Vyskúšajte si to sami - Príklady:

Vytvárenie textových polí
Ako vytvoriť textové polia. Užívateľ môže napísať text do textového poľa.

Vytvorenie poľa s heslom
Ako vytvoriť textové pole s heslom.

(Viac príkladov nájdete v dolnej časti tejto stránky).

HTML formuláre

HTML formuláre slúžia k prenosu dát na server.

Formulár môže obsahovať prvky, ako je vstupné textové polia, začiarkavacie políčka, radio-tlačidlá, odosielacie tlačidlá a ďalšie. Formulár môže obsahovať tiež zoznamy, textové pole, popisy a elementy značiek.

Tag <form> slúži na vytvorenie formulára HTML

Príklad:

<form>
.
input elements
.
</form>

Formuláre - vstupný element

Najdôležitejšie prvok formulára je vstupný element.

Vstupný prvok sa používa pre výber informácií o užívateľovi.

Vstupný prvok sa môže líšiť v mnohých ohľadoch, v závislosti od typu atribútu. Vstupný prvok môže byť typu textové pole, začiarkavacie políčko, heslo, prepínač, tlačidlo pre odoslanie a ďalšie.

Najčastejšie používané typy vstupov sú popísané nižšie.

Textové polia

<input type="text" /> definuje jedno vstupné pole, ktorým môže užívateľ zadať text:

<form>
Meno: <input type="text" name="firstname" /><br />
Priezvisko: <input type="text" name="lastname" />
</form>

Takto tento HTML kód vyzerá v prehliadači:

Vaše meno:
Priezvisko:


Poznámka: formulár nie je viditeľný. Tiež si všimnite, že predvolená šírka textového poľa je 20 znakov.

Heslo poľa

<input type="password" /> definuje pole s heslom

<form>
Password: <input type="password" name="pwd" />
</form>

Ako kód HTML vyzerá vo vašom prehliadači:

Heslo:


Pozn: znaky v poli pre heslo sú maskované (zobrazujú ako hviezdičky alebo kolieska)

Pripínacie tlačidlá

<input type="radio" /> definuje prepínač. Uživateľ môže vybrať iba jeden z prepinačov z niekoľkých možností

<form>
<input type="radio" name="sex" value="male" /> Muž<br />
<input type="radio" name="sex" value="female" /> Žena
</form>

Takto tento HTML kód vyzerá v prehliadači:

Muž
Žena

Zaškrtávacie políčka

<input type="checkbox" /> definuje políčko. Zaškrtnutím necháme uživateľa vybrať jednu alebo viac možností z obmedzeného počtu možností.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> Mám bicykel<br />
<input type="checkbox" name="vehicle" value="Car" /> Mám auto
</form>

Takto tento HTML kód vyzerá v prehliadači:

Mám bicykel
Mám auto

Tlačidlo "Odoslať"

<input type="submit" /> defines a submit button.

Tlačidlo slúži na odoslanie dát z formulára na server. Dáta sú odoslaná na stránku uvedenú v podobe akcii atribútu.

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Takto tento HTML kód vyzerá v prehliadači:

Meno:

Ďalšie príklady:

Prepínače
Ako vytvoriť prepínače.

Políčka
Ako vytvoriť zaškrtávacie políčka. Užívateľ si môže vybrať alebo odznačiť políčko.

Jednoduché drop Ak v zozname
Ako vytvoriť jednoduchý drop-zozname.

Drop Ak v zozname sa pred vybranú hodnotu
Ako vytvoriť drop-down zozname sa pred vybranú hodnotu.

Textarea
Ako vytvoriť multi-line textové vstupnú kontrolu. V texte-oblasť užívateľ môže napísať neobmedzený počet znakov.

Vytvorenie tlačidla
Ako vytvoriť tlačidlo.

 

Tag Popis
<form> Definuje formulára HTML pre užívateľský vstup
<input /> Definuje vstupná kontrola
<textarea> Definuje multi-line textu ovládanie
<label> Definuje označenie pre vstupný prvok
<fieldset> Definuje ohraničenie prvkov vo formulári
<legend> Definuje titulok pre fieldset prvok
<select> Definuje vyberte zoznam (drop-dole zoznam)
<optgroup> Definuje skupinu súvisiacich možností v zozname
<option> Definuje možnosť v zozname vyberu
<button> Definuje tlačidla

« Predchádzajúca Ďalšia kapitola »