14. diel - Formuláre v HTML III. časť

V minulej lekcii, Formuláre v HTML II. časť , sme sa naučili nové typy inputov. Boli to typy napríklad na čas, heslo, text, reset a aj rôzne tlačidlá pre odoslanie formulára.

<input>

Naposledy sme skončili pri elementu <input>, respektíve u jeho typov. Dnes budeme preberať tieto typy inputov:

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

datetime-local

Tento typ je podporovaný podobne ako typ month, teda len v niektorých prehliadačoch. Tento atribút má jednoducho predstavovať miestny dátum a čas, nie nevyhnutne dátum a čas užívateľa. Inými slovami, implementácia by mala umožňovať akúkoľvek platnú kombináciu roka, mesiaca, dňa, hodiny a minúty. Niektoré mobilné prehliadače (najmä v systéme iOS) to aktuálne neimplementujú správne. Pre upresnenie by sme tu mali použiť atribút value ako názorný príklad pre užívateľov.

Atribúty

Typ môže mať ešte tieto atribúty:

• min - Najskorší dátum, ktoré môžeme vybrať.
• max - Najneskorší možný dátum
• step - Špecifikuje krok, rovnako ako pri type date.

Ukážka

Uvedieme si prí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ýsledok:

email

Hodnota, ktorú používateľ zadá, je pred odoslaním automaticky skontrolovaná prehliadačom. Ak je hodnota v elementu <input> validný, automaticky sa aplikuje pseudo trieda :valid, v opačnom prípade sa aplikuje pseudo trieda :invalid, ktorá náš <input> podfarbí červeno. Podľa názvu je asi jasné, že sa jedná o vstup textového poľa pre email.

Atribúty

Atribúty, ktoré je možné špecifikovať:

• Maxlength - Maximálny počet znakov.
• minlength - Minimálny počet znakov.
• multiple - Povolenie pre zadaní viac e-mailov oddelené čiarkou.
• size - Veľkosť poľa, teda počet znakov. Predvolená hodnota je 20.

Ukážka

Príklad využitia:

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

Zo začiatku to vyzerá, ako obyčajné textové pole. Po kliknutí nám to ale bude ponúkať skôr zadané emaily v prehliadači:

url

Ak chceme použiť element <input>, ktorý umožní automaticky skontrolovať URL adresu, môžeme použiť práve typ url. Ak je hodnota validný, stane sa to, čo pri type email - aplikuje sa pseudo trieda :valid, v opačnom prípade sa aplikuje pseudo trieda :invalid, ktorá podfarbí element <input> červeno.

Atribúty

Uvedieme si nasledujúce atribúty:

• Maxlength - Maximálny počet znakov.
• minlength - Minimálny počet znakov.
• Spellcheck - Povolenie, či má byť použitá predvolená kontrola pravopisu.
• size - Veľkosť poľa, teda počet znakov. Predvolená hodnota je 20.

Ukážka

Je vhodné uviesť príklad URL adresy pre užívateľov cez atribút placeholder:

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

Ako u typu email nám to bude nejaké adresy pravdepodobne ponúkať:

tel

Tento typ je užitočný pre vloženie telefónneho čísla. Na rozdiel od typu email a url sa tento typ automaticky nekontroluje. Je to z dôvodu rôznorodosti telefónnych čísel a nie je tu preddefinovaný štandard. Využitie tu nájdeme predovšetkým v mobilných prehliadačoch, ktoré po výbere poľa s typom tel zobrazí numerickú klávesnicu.

Atribúty

Má to špeciálny atribút pattern a ďalšie klasické:

• Maxlength - Maximálny počet znakov.
• minlength - Minimálny počet znakov.
• size - Veľkosť poľa, teda počet znakov. Predvolená hodnota je 20.

Ukážka

Atribút pattern je regulárny výraz, ako má telefónne číslo vyzerať. Výraz [0-9] znamená, že je možné zadať iba tieto čísla. Hneď za ním nasleduje pojem {9}, to limituje počet týchto čísel na 9 po sebe a bez medzier:

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

výsledok:

number

Tento typ umožňuje užívateľovi zadať číslo alebo ho inkrementovať či dekrementovat pomocou šípok v poli. V mobilných prehliadačoch sa nám zobrazí numerická klávesnica. Ak je hodnota v <input> validný, aplikuje sa pseudo trieda, ako napríklad pri type url.

Atribúty

Má dva jednoduché atribúty:

• max - Max imálnej možné číslo.
• min - Min imálnej možné číslo.

Ukážka

Uvedieme si príklad:

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

výsledok:

range

Tento typ môžeme poznať typicky pre zvýšenie alebo zníženie hlasitosti. Ide o slider, ktorý užívateľovi presne špecifikuje rozmedzí, ktoré môže vybrať. Nevýhoda je tá, že používateľ nevie, akú hodnotu presne zadal.

Atribúty

Uvedieme si nasledujúce atribúty:

• max - Maximálna hodnota.
• min - Minimálna hodnota.
• step - Špecifikuje o koľko sa hodnota zvýši alebo zníži posunutím.

Ukážka

Uvedieme si príklad:

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

výsledok:

file

Input typu file umožňuje k formuláru pripojiť súbor. Ten sa potom odošle spolu s formulárom.

Atribúty:

• accept - Umožňuje určiť MIME typy súborov, ktoré je prípustné vybrať. Môžeme využiť špeciálnych hodnôt audio/*, video/* a image/*. Ďalej môžeme samozrejme uviesť klasické MIME typy ako napr. image/jpeg alebo text/plain. Je možné viaceré hodnôt, ktoré oddelíme čiarkou. Možno tiež uviesť priamo prípony súborov, napríklad .docx (alebo pre všetky MS Word prípony application/msword).
• multiple - Atribút je boolean. Ak je uvedený, je možné vybrať viac súborov.

Ak formulár obsahuje <input> typu file, je nutné, aby bol atribút enctype formulára nastavený na hodnotu multipart/form-data ! . [Warning]

Ukážka nahratie súborov na web pomocou inputu typu file:

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

výsledok:

Pozor! Nemôžeme sa spoliehať na to, že používateľ súbor daného typu neodošle. HTML stránka je na jeho počítači a on si môže formulár prepísať a odoslať nám niečo, čo nechceme. S tým musí skript na druhej strane počítať a dáta rovnako znova zvalidovat!

search

Ak náš prehliadač vie spracovať typ search, tak sa nám po zadaní textu zobrazí vpravo malý krížik, ktorý nám zmaže zadaný text v tomto poli.

Ukážka

Ukážka inputu typu search:

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

Ukážme si nasledujúcu ukážku:

hidden

<input> typu hidden označuje skryté pole. Používa sa v špecifických prípadoch, keď chceme s dátami užívateľa odoslať aj nejakú ďalšiu informáciu, o ktoré užívateľ nemusí vedieť, alebo ju nemá meniť. Často sa tam dáva nejaký security token pre zvýšenú bezpečnosť. Môže sa jednať aj o hodnotu zadanú JavaScriptom.

Ukážka inputu typu hidden:

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

Náš <input> na stránkach nebude vidieť:

Z atribútov type je to pre túto chvíľu všetko.