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`

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.

Článek pro vás napsal Tomáš Muzikant

Uživatelské hodnocení:

83 hlasů

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