13. diel - Formuláre v HTML II. časť

V minulej lekcii, Multimédiá v HTML II. časť , sme si ukázali tagy k tvorbe multimédií, medzi ktoré patria <source>, <track>, <video>, atribúty src, type, media a plno ďalších.

<input>

Naposledy sme skončili pri elementu <input>, kde rozoberáme jeho atribúty type. Dnes budeme v týchto typoch inputov pokračovať.

text

Ďalší typ text je predvolená elementu <input>. Jedná sa o krátky text na jeden riadok (napr. Na zadanie mena).

Atribúty

Môžeme dospecifikovat nasledujúce atribúty:

• size - Veľkosť poľa, teda počet znakov. Predvolená hodnota je 20. Šírku môžeme samozrejme nastaviť aj cez CSS štýly.
• Maxlength - Maximálna dĺžka zadávaného textu. Môže byť pokojne dlhšia, než atribút size.

Ukážka

V kombinácii s týmto typom môžeme často vidieť type password. Preto si ich v tejto kombinácii rovno ukážeme.

password

Tento typ slúži pre zadávanie hesla. Funguje rovnako, ako input typu text, ale namiesto znakov sú zobrazované hviezdičky.

Ukážka

Ukážka inputu typu text a password:

<label for="jmeno">Jméno:</label><br />
<input type="text" id="jmeno" name="jmeno" size="12" placeholder="Zadejte jméno" /><br />

<label for="heslo">Heslo:</label><br />
<input type="password" id="heslo name="Heslo" size="12" placeholder="Zadejte heslo" />

výsledok:

submit

Type submit by mal obsahovať každý formulár. Ide totiž o odosielacej tlačidlo, ktoré vyvolá odoslanie hodnôt na server. Formulár môže obsahovať viac inputov typu submit. Ak im zadáme odlišné názvy, môžeme na serveri zistiť, na ktorý z nich užívateľ formulár odoslal. Atribút value nastavuje názvy tlačidiel. Pokiaľ ho nenastavíte, použije sa predvolený text prehliadača.

Atribúty

Tlačidlo môže pomocou nasledujúcich atribútov ovplyvniť spôsob odoslaní formulára:

• formaction - Zmení atribút action formulára.
• formenctype - Zmena kódovanie formulára.
• formmethod - Zmena metódy formulára.
• formnovalidate - Zmena validácie formulára.
• formtarget - Zmena ciele pre odoslanie formulára.

Všetky tieto atribúty sme si prebrali v minulej lekcii, preto si ich znova preberať nebudeme.

Ukážka

Nastavíme formulári metódu GET. Heslo a meno by sme teda videli v URL, lenže na tlačidlo submit sme špecifikovali metódu POST, čiže sme odoslali formulár cez metódu POST a v URL neuvidíme žiadne citlivé dáta:

<form method="GET">
    <label for="jmeno">Jméno:</label><br />
    <input type="text" id="jmeno" name="jmeno" size="22" placeholder="Zadejte jméno" /><br />
    <label for="heslo">Heslo:</label><br />
    <input type="password" id="heslo" name="heslo" size="22" placeholder="Zadejte heslo" /><br /><br />
    <input type="submit" formmethod="POST" value="Odeslat" />
</form>

výsledok:

image

Typ image elementu <input> slúži pre zobrazenie grafického tlačidla submit. Slúži pre tých, ktorí chcú použiť obrázok namiesto klasického tlačidla. Ak nám prehliadač nezobrazí obrázok, zobrazí nám popis zadaný v atribútu alt, ako je to klasicky u obrázkov.

Atribúty

Asi nás neprekvapí, že sú atribúty rovnaké, ako minule:

• formaction - Zmení atribút action formulára.
• formenctype - Zmena kódovanie formulára.
• formmethod - Zmena metódy formulára.
• formnovalidate - Zmena validácie formulára.
• formtarget - Zmena ciele pre odoslanie formulára.

Navyše máme ale tieto dva atribúty:

• width pre šírku obrázku v pixeloch a
• height pre výšku obrázku tiež v pixeloch.

Ukážka

Ukážka inputu typu image:

<form>
    <label for="jmeno">Jméno:</label><br />
    <input type="text" id="jmeno" name="jmeno" size="22" placeholder="Zadejte jméno" /><br />
    <label for="heslo">Heslo:</label><br />
    <input type="password" id="heslo" name="heslo" size="22" placeholder="Zadejte heslo" /><br /><br />
    <input type="image" id="obrazek" alt="Přihlásit" src="images/signin.png" />
</form>

Tlačidlo sa zobrazí takto:

reset

Typ inputu reset zobrazí resetovacie tlačidlo. To po stlačení obnoví východiskové hodnoty vo formulári. Môžeme nastaviť aj jeho atribút value. Ak to neurobíme, zobrazí sa defaultné názov tlačidla prehliadača, čo je určite viac štandardizované.

Ukážka

Ukážka inputu typu reset:

<form>
    <label for="jmeno">Jméno:</label><br />
    <input type="text" id="jmeno" name="jmeno" size="22" placeholder="Zadejte jméno" /><br />
    <label for="heslo">Heslo:</label><br />
    <input type="password" id="heslo" name="heslo" size="22" placeholder="Zadejte heslo" /><br /><br />
    <input type="submit" value="Odeslat" />
    <input type="reset">
</form>

Tlačidlo sa zobrazí nasledovne:

button

Tento typ funguje ako jednoduché tlačidlo, ktoré môžeme naprogramovať tak, aby ovládalo nami požadovanú funkciu, najčastejšie udalosť onclick. Je dôležité povedať, že tento typ nahradil novší element <button>, ktorý si ukážeme ďalej v kurze. Atribútom value mu pridelíme jeho názov:

<input type="button" onclick="alert('ITnetwork je můj pomocník')" value="Klikni na mě!">

Do kódu sme dali javascriptový kód. Po kliknutí sa nám zobrazí vyskakovacie okno s textom, pokojne si to vyskúšajme:

color

Formulár môže tiež obsahovať výber farby. K tomu použijeme typ color:

<form>
    <label for="barva">Barevná paleta:</label>
    <input type="color" id="barva" name="barva">
</form>

V prehliadači budeme mať farebnú paletu:

time

Tento typ využijeme napríklad pre výber času schôdzky či pre čas návštevy u lekára. Ak to náš prehliadač podporuje, objaví sa nám polia pre výber času.

Ukážka

Naše ukážka:

<form>
    <label for="cas">Čas příchodu:</label>
    <input type="time" id="cas" name="cas">
</form>

výsledok:

week

Pre výber týždňa v danom roku použijeme typ week. Výber týždňa je v rozmedzí od 1 do 52 alebo 53 podľa roku. Ak to náš prehliadač podporuje, objaví sa nám polia pre výber týždňa a roku. V tejto chvíli tento typ podporuje Chrome, Opera a Microsoft Edge. Na ostatné si dajte pozor.

Ukážka

Opäť je lepšie užívateľovi do <input> zadať názornú ukážku:

<form>
    <label for="tyden">Výběr týdne v roce: </label>
    <input type="week" id="tyden" name="tyden" value="2020-W15">
</form>

výsledok:

month

Typ month podporujú len niektoré prehliadače, zatiaľ Chrome, Opera, Edge a niektoré novšie mobilné prehliadače. Pre ostatné sa <input> typu month javí ako klasický typ text. V tomto prípade je tu vhodné nastaviť šablónu value, aby používateľ vedel v akom formáte má mesiac zvoliť:

<form>
    <label for="mesic">Měsíc narození:</label>
    <input type="month" id="mesic" name="mesic" value="2020-11">
</form>

výsledok:

date

Typ date vytvorí vstupné pole pre výber nami zvoleného dátumu. Výsledok obsahuje rok, mesiac a deň. Každý prehliadač má svoju špecifickú tabuľku pre výber dátumu.

Atribúty

Uvedieme si nasledujúce atribúty:

• min - najskorší dátum, ktoré môžeme vybrať
• max - a najviac možné dátum.
• step - Špecifikuje krok. Napríklad step="2" sa rovná každý druhý deň, ktorý môžeme vybrať.

Ukážka

Náš príklad bude vyzerať takto:

<form>
    <label for="datum">Datum návštěvy:</label>
    <input type="date" min="2020-01-01" step="2" id="datum" name="datum">
</form>

výsledok:

Pre dnešok to je ale všetko, ostatné typy inputov si ukážeme zase nabudúce.

V nasledujúcom kvíze, Kvíz - Textové tagy a multimédiá v HTML5, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.