BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
BF Sales

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:

text a password
localhost

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:

submit
localhost

image

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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
localhost

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:

reset
localhost

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:

button
localhost

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:

color
localhost

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:

time
localhost

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:

week
localhost

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:

month
localhost

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:

date
localhost

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

V ďalšej lekcii, Formuláre v HTML III. časť , sa naučíme nové zaujímavé typy inputov. Ukážeme si napríklad typ email, url, tel, number, range a file.


 

Predchádzajúci článok
Multimédiá v HTML II. časť
Všetky články v sekcii
HTML5
Článok pre vás napísal Tomáš Muzikant
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!