Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

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:

datetime-local
localhost

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:

email
localhost

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>
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

url
localhost

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:

tel
localhost

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:

number
localhost

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:

range
localhost

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:

file
localhost

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:

search
localhost

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

input
localhost

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


 

Predchádzajúci článok
Formuláre v HTML II. časť
Všetky články v sekcii
HTML5
Článok pre vás napísal Tomáš Muzikant
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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 (1)

 

 

Komentáre

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!