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:

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:

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

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ě:

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:

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:

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:

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:

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:

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:

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.