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

Lekce 13 - Formuláře v HTML II. část

V minulé lekci, Formuláře v HTML, jsme si ukázali tagy k tvorbě formulářů, mezi které patří určitě tag <form> a v něm <label> a <input>, u kterého máme několik typů.

<input>

Naposled jsme skončili u elementu <input>, kde rozebíráme jeho atributy type. Dnes budeme probírat tyto typy:

  • text,
  • password,
  • submit,
  • image,
  • reset,
  • button,
  • color,
  • time,
  • week a
  • month.

text

Další typ text je výchozí elementu <input>. Jedná se o krátký text na jeden řádek (např. k zadání jména).

Atributy

Můžeme dospecifikovat následující atributy:

  • size - Velikost pole, tedy počet znaků. Výchozí hodnota je 20. Šířku můžeme samozřejmě nastavit i přes CSS styly.
  • maxlength - Maximální délka zadávaného textu. Může být klidně delší, než atribut size.

Ukázka

V kombinaci s tímto typem můžeme často vidět type password. Proto si je v této kombinaci rovnou ukážeme.

password

Tento typ slouží pro zadávání hesla. Funguje stejně, jako input typu text, ale místo znaků jsou zobrazovány hvězdičky.

Ukázka

Ukázka 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ýsledek:

text a password
localhost

submit

Type submit by měl obsahovat každý formulář. Jedná se totiž o odesílací tlačítko, které vyvolá odeslání hodnot na server. Formulář může obsahovat více inputů typu submit. Pokud jim zadáme odlišné názvy, můžeme na serveru zjistit, na který z nich uživatel formulář odeslal. Atribut value nastavuje popisek tlačítka. Pokud ho nenastavíme, použije se výchozí text prohlížeče.

Atributy

Tlačítko může pomocí následujících atributů ovlivnit způsob odeslání formuláře:

  • formaction - Změní atribut action formuláře.
  • formenctype - Změna kódování formuláře.
  • formmethod - Změna metody formuláře.
  • formnovalidate - Změna validace formuláře.
  • formtarget - Změna cíle pro odeslání formuláře.

Všechny tyto atributy jsme si probrali v minulé lekci, proto si je znova probírat nebudeme.

Ukázka

Nastavíme formuláři metodu GET. Heslo a jméno bychom tedy viděli v URL, jenže na tlačítko submit jsme specifikovali metodu POST, čili jsme odeslali formulář přes metodu POST a v URL neuvidíme žádná citlivá data:

<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ýsledek:

submit
localhost

image

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Typ image elementu <input> slouží pro zobrazení grafického tlačítka submit. Slouží pro ty, kteří chtějí použít obrázek namísto klasického tlačítka. Pokud nám prohlížeč nezobrazí obrázek, zobrazí nám popis zadaný v atributu alt, jako je to klasicky u obrázků.

Atributy

Asi nás nepřekvapí, že jsou atributy stejné, jako minule:

  • formaction - Změní atribut action formuláře.
  • formenctype - Změna kódování formuláře.
  • formmethod - Změna metody formuláře.
  • formnovalidate - Změna validace formuláře.
  • formtarget - Změna cíle pro odeslání formuláře.

Navíc máme ale tyto dva atributy:

  • width pro šířku obrázku v pixelech a
  • height pro výšku obrázku také v pixelech.

Ukázka

Ukázka 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čítko se zobrazí takto:

reset
localhost

reset

Typ inputu reset zobrazí resetovací tlačítko. To po stisknutí obnoví výchozí hodnoty ve formuláři. Můžeme nastavit i jeho atribut value. Pokud to neuděláme, zobrazí se defaultní název tlačítka prohlížeče, což je jistě standardnější.

Ukázka

Ukázka 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čítko se zobrazí následovně:

reset
localhost

button

Tento typ funguje jako jednoduché tlačítko, které můžeme naprogramovat tak, aby ovládalo námi požadovanou funkci, nejčastěji událost onclick. Je důležité říci, že tento typ nahradil novější element <button>, který si ukážeme dále v kurzu. Atributem value mu přidělíme jeho název:

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

Do kódu jsme dali JavaScriptový kód. Po kliknutí se nám zobrazí vyskakovací okno s textem, klidně si to vyzkoušejme:

button
localhost

color

Formulář může také obsahovat výběr barvy. K tomu použijeme typ color:

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

V prohlížeči budeme mít barevnou paletu:

color
localhost

time

Tento typ využijeme například pro výběr času schůzky či pro čas návštěvy u lékaře. Pokud to náš prohlížeč podporuje, objeví se nám pole pro výběr času.

Ukázka

Naše ukázka:

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

Výsledek:

time
localhost

week

Pro výběr týdne v daném roce použijeme typ week. Výběr týdne je v rozmezí od 1 do 52 nebo 53 podle roku. Pokud to náš prohlížeč podporuje, objeví se nám pole pro výběr týdne a roku. V tuto chvíli tento typ podporuje Chrome, Opera a Microsoft Edge. Na ostatní si dejte pozor.

Ukázka

Opět je lepší uživateli do <input> zadat názornou ukázku:

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

Výsledek:

week
localhost

month

Typ month podporují jenom některé prohlížeče, zatím Chrome, Opera, Edge a některé novější mobilní prohlížeče. Pro ostatní se <input> typu month jeví jako klasický typ text. V tomto případě je zde vhodné nastavit šablonu value, aby uživatel věděl v jakém formátu má měsíc zvolit:

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

Výsledek:

month
localhost

date

Typ date vytvoří vstupní pole pro výběr námi zvoleného data. Výsledek obsahuje rok, měsíc a den. Každý prohlížeč má svou specifickou tabulku pro výběr data.

Atributy

Uvedeme si následující atributy:

  • min - Nejdřívejší datum, které můžeme vybrat
  • max - a nejvýše možné datum.
  • step - Specifikuje krok. Například step="2" se rovná každý druhý den, který můžeme vybrat.

Ukázka

Náš příklad bude vypadat 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ýsledek:

date
localhost

Pro dnešek to je ale vše, ostatní typy inputů si ukážeme zase příště.

V další lekci, Formuláře v HTML III. část, se naučíme nové zajímavé typy inputů. Ukážeme si například typ email, url, tel, number, range a file.


 

Předchozí článek
Formuláře v HTML
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
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 (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!