Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Slevový týden - Březen 30

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:

datetime-local
localhost

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:

email
localhost

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

url
localhost

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:

tel
localhost

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:

number
localhost

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:

range
localhost

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:

file
localhost

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:

search
localhost

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:

input
localhost

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.


 

Předchozí článek
Formuláře v HTML II. část
Všechny články v sekci
HTML5 od A do Z
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
1 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 (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í!