HTML & CSS pre začiatočníkov

HTML a CSS pre začiatočníkov (časť 13): Formuláre (1)

Všetky videá tutoriálu HTML & CSS pre začiatočníkov.

Formuláre sa definujú pomocou prvku form. Všetky prvky, ktoré sú vnútri prvku form, patria k danému formuláru.

<form>
…
</form>

V úvodnom prvku <form> sa očakáva atribút action. Tým sa nakoniec určuje, čo sa má stať s údajmi z formulára. Zvyčajne ide o aplikáciu PHP.

<form method="post" action="form.php">
…
</form>



Dôležité je uistiť sa, že zadaný súbor je skutočne dostupný. Preto musíte zadať správnu cestu.

Namiesto skriptu je možné uviesť aj e-mailovú adresu.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



V tomto prípade sa údaje z formulára odosielajú e-mailom. To však nie je elegantné, preto sa takmer vždy uprednostňuje použitie skriptu. Ak momentálne nemáte k dispozícii skript, môžete formulár odoslať aj e-mailom.

Ďalší dôležitý atribút pre prvok form je method. Určuje spôsob prenosu HTTP pre odoslanie obsahu formulára. Sú k dispozícii dva rôzne varianty.

post = Údaje z formulára sa tu odosielajú v dvoch krokoch na zadanú adresu. Najprv je kontaktovaná zadaná adresa prehliadačom. Keď sa to podarí, údaje z formulára sa odovzdajú skriptu.

get = Pri tomto spôsobe sa údaje z formulára pripájajú na koniec URL, ktorý bol priradený atribútu action. Z tohto dôvodu sú údaje z formulára viditeľné aj v riadku s adresou prehliadača.

Samozrejme, vzniká otázka, ktorú z týchto dvoch variantov by ste mali použiť pre odoslanie údajov z formulára. Zásadne ich môžete využiť obidva. Avšak, najmä ak ide o veľké množstvo údajov a nahranie súborov na server, malo by sa uprednostniť použitie post.

Jednoduché polia formulára

Zatiaľ bolo jedine definované vonkajšie schéma formulára. V prehliadači ešte však nie je viditeľný samotný formulár.

<form method="post" action="form.php">
 …
 </form>



Teraz ide o to, naplniť formulár obsahom/životom.

Najčastejším typom poľa, ktoré sa potrebuje, je jednoriadkové vstupné pole. Používa sa napríklad na získanie mena, priezviska a e-mailovej adresy. Jednoriadkové vstupné polia sa definujú nasledovne:

<input type="text" name="vorname" />



Prvku input je priradená kombinácia atribút-hodnota type="text". Okrem toho by ste mali každému vstupnému polu priradiť interný identifikátor. Tento identifikátor musí byť v dokumente jednoznačný. Je zaujímavý hlavne v prípade spracovania údajov z formulára pomocou skriptu. V identifikátore nezadávajte medzery a špeciálne znaky.

Ak si výsledok pozriete v prehliadači, uvidíte nasledujúci obraz:

HTML & CSS pre začiatočníkov (časť 13): Formuláre (1)

Zatiaľ to vyzerá celkom obyčajne. Ak však kliknete do textového poľa, uvidíte, že už môžete robiť zadania.

HTML a CSS pre začiatočníkov (časť 13): Formuláre (1)

Samozrejme, na to, aby návštevníci vedeli, čo majú do poľa zadať, tam chýba označenie.

Meno: <input type="text" name="vorname" />



Opäť, ak sa pozriete do prehliadača, uvidíte požadovaný výsledok.

HTML & CSS pre začiatočníkov (časť 13): Formuláre (1)

Pomocou atribútu size môžete určiť šírku poľa.

Meno: <input type="text" name="vorname" size="30" />
<br />
PSČ: <input type="text" name="plz" size="5" />



Atribútu size priradíte požadovanú šírku poľa.

HTML & CSS pre začiatočníkov (časť 13): Formuláre (1)

Hodnota 5 zodpovedá presne päť znakom. V tejto súvislosti je tiež zaujímavý atribút maxlength. Cezeň sa určuje maximálny povolený počet znakov, ktoré môžu byť zadané do poľa. Tu je ďalší príklad:

Meno: <input type="text" name="vorname" size="30" maxlength="40" />



Ak je uvedená hodnota v maxlength väčšia ako u hodnoty v size, automaticky sa v prípade dlhších zadávaní prejde do rolovania v poli.

Pomocou atribútu value môžete dosiahnuť predvyplnenie pola.

Meno: <input type="text" name="meno" value="Tvoje meno" />



Hodnota priradená k value sa považuje za prednastavenie poľa.

HTML & CSS pre začiatočníkov (časť 13): Formuláre (1)



Používatelia môžu túto prednastavenú hodnotu vymazať.

Môžete tiež zabrániť vymazaniu hodnôt z polí. Pri tom definujete vstupné pole, ktoré v podstate už nie je vstupné pole. Takéto polia sa často využívajú na výstupy. Mohlo by to byť zaujímavé napríklad na zobrazenie hodnôt určených skriptom. Myslite napríklad na kalkulačku. Ale tiež môžete manuálne predvyplniť pole s textom, ktorý návštevníci už nevedia zmeniť. (Upozornenie: Znak eura sa v zobrazení PDF bohužiaľ nezobrazuje správne).

<input name="cena" type="text" value="€ 699.-" readonly />



Aby ste pole nastavili ako iba na čítanie, priradíte mu atribút readonly. Tu je opäť pohľad na výsledok:

HTML a CSS pre začiatočníkov (časť 13): Formuláre (1)



Preddefinovaný text je priamo vidieť. Avšak nedá sa zmazať.

Definovať polia na zadanie hesla

Samozrejme poznáte polia na zadanie hesla. Všade tam, kde sa registrujete, musíte zadať heslo. (Zvyčajne ho musíte dokonca zadať dvakrát).

HTML a CSS pre začiatočníkov (časť 13): Formuláre (1)

Vložené údaje do vstupného poľa nie sú viditeľné, ale prehliadač automaticky nahrádza hviezdičkami/bodkami. Výhodou tohto spôsobu je, že osoby, ktoré vás možno sledujú pri zadávaní hesla, nemôžu heslo rozlúštiť. Je však omyl, že polia na heslo sú automaticky bezpečné. Skutočnosťou je, že heslá sa pri bežnej komunikácii HTTP odosielajú v čistom texte.

Polia na zadanie hesla sa definujú nasledovne:

<input type="password" name="heslo" />



Typu priradený atribút password. Tu je zase pohľad na výsledok.

HTML & CSS pre začiatočníkov (časť 13): Formuláre (1)



Ak tam niečo napíšete, prehliadače to počas zadávania automaticky zneviditeľnia.