Lekce 14 - Formuláře v HTML III. část

V minulé lekci, Formuláře v HTML II. část, jsme se naučili nové typy inputů. Byly to typy například na čas, heslo, text, reset a i různá tlačítka pro odeslání formuláře.

<input>

Naposled jsme skončili u elementu <input>, respektive u jeho typů. Dnes budeme probírat tyto typy inputů:

• datetime-local,
• email,
• url,
• tel,
• number,
• range,
• file,
• search a
• hidden.

datetime-local

Tento typ je podporován podobně jako typ month, tedy jen v některých prohlížečích. Tento atribut má jednoduše představovat místní datum a čas, nikoli nutně datum a čas uživatele. Jinými slovy, implementace by měla umožňovat jakoukoli platnou kombinaci roku, měsíce, dne, hodiny a minuty. Některé mobilní prohlížeče (zejména v systému iOS) to aktuálně neimplementují správně. Pro upřesnění bychom zde měli použít atribut value jako názorný příklad pro uživatele.

Atributy

Typ může mít ještě tyto atributy:

• min - Nejdřívější datum, které můžeme vybrat.
• max - Nejpozdější možné datum
• step - Specifikuje krok, stejně jako u typu date.

Ukázka

Uvedeme si příklad:

<form>
    <label for="datum-cas">Datum návštěvy:</label>
    <input type="datetime-local" max="2022-01-01T00:00" id="datum-cas" name="datum-cas" value="2020-10-14T14:20">
</form>

Výsledek:

email

Hodnota, kterou uživatel zadá, je před odesláním automaticky zkontrolována prohlížečem. Pokud je hodnota v elementu <input> validní, automaticky se aplikuje pseudo třída :valid, v opačném případě se aplikuje pseudo třída :invalid, která náš <input> podbarví červeně. Podle názvu je asi jasné, že se jedná o vstup textového pole pro email.

Atributy

Atributy, které je možné specifikovat:

• maxlength - Maximální počet znaků.
• minlength - Minimální počet znaků.
• multiple - Povolení pro zadaní více e-mailů oddělené čárkou.
• size - Velikost pole, tedy počet znaků. Výchozí hodnota je 20.

Ukázka

Příklad využití:

 <form>
    <label for="email">Vaše e-mailová adresa:</label>
    <input type="email" id="email" name="email" >
</form>

Ze začátku to vypadá, jako obyčejné textové pole. Po kliknutí nám to ale bude nabízet dříve zadané emaily v prohlížeči:

url

Pokud chceme použít element <input>, který umožní automaticky zkontrolovat URL adresu, můžeme použít právě typ url. Pokud je hodnota validní, stane se to, co u typu email - aplikuje se pseudo třída :valid, v opačném případě se aplikuje pseudo třída :invalid, která podbarví element <input> červeně.

Atributy

Uvedeme si následující atributy:

• maxlength - Maximální počet znaků.
• minlength - Minimální počet znaků.
• spellcheck - Povolení, zda má být použita výchozí kontrola pravopisu.
• size - Velikost pole, tedy počet znaků. Výchozí hodnota je 20.

Ukázka

Je vhodné uvést příklad URL adresy pro uživatele přes atribut placeholder:

<form>
    <label for="url">Přístup na stránky:</label>
    <input type="url" id="url" name="url" placeholder="https://www.priklad.cz">
</form>

Jako u typu email nám to bude nějaké adresy pravděpodobně nabízet:

tel

Tento typ je užitečný pro vložení telefonního čísla. Na rozdíl od typu email a url se tento typ automaticky nekontroluje. Je to z důvodu různorodosti telefonních čísel a není zde předdefinovaný standard. Využití zde najdeme především v mobilních prohlížečích, které po výběru pole s typem tel zobrazí numerickou klávesnici.

Atributy

Má to speciální atribut pattern a další klasické:

• maxlength - Maximální počet znaků.
• minlength - Minimální počet znaků.
• size - Velikost pole, tedy počet znaků. Výchozí hodnota je 20.

Ukázka

Atribut pattern je regulární výraz, jak má telefonní číslo vypadat. Výraz [0-9] znamená, že lze zadat pouze tato čísla. Hned za ním následuje výraz {9}, to limituje počet těchto čísel na 9 po sobě a bez mezer:

<form>
    <label for="mobil">Enter your phone number:</label>
    <input type="tel" id="mobil" name="mobil" pattern="[0-9]{9}">
</form>

Výsledek:

number

Tento typ umožňuje uživateli zadat číslo nebo jej inkrementovat či dekrementovat pomocí šipek v poli. V mobilních prohlížečích se nám zobrazí numerická klávesnice. Pokud je hodnota v <input> validní, aplikuje se pseudo třída, jako například u typu url.

Atributy

Má dva jednoduché atributy:

• max - Maximální možné číslo.
• min - Minimální možné číslo.

Ukázka

Uvedeme si příklad:

<form>
    <label for="cislo">Zadejte počet:</label>
    <input type="number" id="cislo" name="cislo" min="1" max="30">
</form>

Výsledek:

range

Tento typ můžeme znát typicky pro zvýšení nebo snížení hlasitosti. Jedná se o slider, který uživateli přesně specifikuje rozmezí, které může vybrat. Nevýhoda je ta, že uživatel neví, jakou hodnotu přesně zadal.

Atributy

Uvedeme si následující atributy:

• max - Maximální hodnota.
• min - Minimální hodnota.
• step - Specifikuje o kolik se hodnota zvýší nebo sníží posunutím.

Ukázka

Uvedeme si příklad:

<form>
    <input type="range" id="slider" name="slider" min="0" max="100" step="10">
    <label for="slider">Hlasitost</label>
</form>

Výsledek:

file

Input typu file umožňuje k formuláři připojit soubor. Ten se poté odešle spolu s formulářem.

Atributy:

• accept - Umožňuje určit MIME typy souborů, které je přípustné vybrat. Můžeme využít speciálních hodnot audio/*, video/* a image/*. Dále můžeme samozřejmě uvést klasické MIME typy jako např. image/jpeg nebo text/plain. Je možné uvést více hodnot, které oddělíme čárkou. Lze také uvést přímo přípony souborů, například .docx (nebo pro všechny MS Word přípony application/msword).
• multiple - Atribut je typu boolean. Pokud je uveden, je možné vybrat více souborů.

Pokud formulář obsahuje <input> typu file, je nutné, aby byl atribut enctype formuláře nastaven na hodnotu multipart/form-data! .[warning]

Ukázka nahrání souborů na web pomocí inputu typu file:

Připoj obrázek se svou originální podobou:<br />
<input type="file" name="foto" accept="image/*" />

Výsledek:

Pozor! Nemůžeme se spoléhat na to, že uživatel soubor daného typu neodešle. HTML stránka je na jeho počítači a on si může formulář přepsat a odeslat nám něco, co nechceme. S tím musí skript na druhé straně počítat a data stejně znovu zvalidovat!

search

Pokud náš prohlížeč umí zpracovat typ search, tak se nám po zadání textu zobrazí vpravo malý křížek, který nám smaže zadaný text v tomto poli.

Ukázka

Ukázka inputu typu search:

<form>
    <label for="hledej">Hledej:</label></br>
    <input type="search" id="hledej" name="hledej" placeholder="Prohledat síť" />
    <button>Hledej</button>
</form>

Ukažme si následující ukázku:

hidden

<input> typu hidden označuje skryté pole. Používá se ve specifických případech, kdy chceme s daty uživatele odeslat i nějakou další informaci, o které uživatel nemusí vědět nebo ji nemá měnit. Často se tam dává nějaký security token pro zvýšenou bezpečnost. Může se jednat také o hodnotu zadanou JavaScriptem.

Ukázka inputu typu hidden:

<input type="hidden" value="hodnota" />

Náš <input> na stránkách nebude vidět:

Z atributů type je to pro tuto chvíli vše.

V další lekci, Formuláře v HTML IV. část, si ukážeme tagy k tvorbě formulářů, mezi které patří třeba <legend>, <textarea>, <button> a plno dalších.