HTML5 - Nove vrste unosa

Nove vrste unosa u HTML5

HTML5 uvodi nekoliko novih vrsta unosa <input> kao što su e-pošta, datum, vrijeme, boja, raspon itd., kako bi poboljšali korisničko iskustvo i učinili obrazce interaktivnijim. Međutim, ako pretraživač nije uspio prepoznati ove nove vrste unosa, tretiraće ih kao uobičajeni okvir za tekst. U ovome ćemo dijelu ukratko pogledati svaku od sljedećih vrsta unosa:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Postojao je i tip datetime za unos datuma i vremena, ali sada je već zastario.


Tip ulaza za boju (color)

Tip unosa boje color omogućava korisniku da odabere boju iz alata za odabir boja i vraća vrijednost boje u heksadecimalnom formatu (#rrggbb). Ako ne navedete vrijednost, zadana vrijednost je #000000, što je crna boja. Isprobajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcioniše: 

<form>
    <label for="mycolor">Odaberi boju:</label>
    <input type="color" value="#00ff00" id="mycolor">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa boje</title>
<script>
    function getValue() {
        var color = document.getElementById("mycolor").value;
        alert(color);
    }
</script>
</head>
<body>
    <form>
        <label for="mycolor">Odaberi boju:</label>
        <input type="color" value="#00ff00" id="mycolor">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa datum (date)

Tip unosa datuma date omogućava korisniku da odabere datum iz padajućeg kalendara. Vrijednost datuma uključuje godinu, mjesec i dan, ali ne i vrijeme. 

<form>
    <label for="mydate">Odaberi datum:</label>
    <input type="date" value="2019-04-15" id="mydate">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa datuma</title>
<script>
    function getValue() {
        var date = document.getElementById("mydate").value;
        alert(date);
    }
</script>
</head>
<body>
    <form>
        <label for="mydate">Odaberi datum:</label>
        <input type="date" value="2019-04-15" id="mydate">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa datetime-local

Tip lokalnog unosa datuma i vremena datetime-local omogućava korisniku da odabere i lokalni datum i vrijeme, uključujući godinu, mjesec i dan, kao i vrijeme u satima i minutama. Isprobajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcioniše: 

<form>
    <label for="mydatetime">Odaberi datum i vrijeme:</label>
    <input type="datetime-local" id="mydatetime">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa datetime-local</title>
<script>
    function getValue() {
        var datetime = document.getElementById("mydatetime").value;
        alert(datetime);
    }
</script>
</head>
<body>
    <form>
        <label for="mydatetime">Odaberi datum i vrijeme:</label>
        <input type="datetime-local" id="mydatetime">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Vrsta unosa email-a (email)

Tip unosa e-pošte email omogućava korisniku da unese e-adresu. Vrlo je sličan standardnom tipu unosa teksta, ali ako se koristi u kombinaciji sa atributom required pretraživač može potražiti uzorke kako bi osigurao da se unese pravilno oblikovana adresa e-pošte. Isprobajmo sljedeći primjer unosa bilo koje adrese e-pošte da vidite kako to zapravo funkcioniše: 

<form>
    <label for="myemail">Upište e-mail adresu:</label>
    <input type="email" id="myemail" required>
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Vrsta unosa e-pošte</title>
<style>
    input[type="email"]:valid{
        outline: 2px solid green;
    }
    input[type="email"]:invalid{
        outline: 2px solid red;
    }
</style>
<script>
    function getValue() {
        var email = document.getElementById("myemail").value;
        alert(email);
    }
</script>
</head>
<body>
    <form>
        <label for="myemail">Upišite e-mail adresu:</label>
        <input type="email" id="myemail" required>
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa mjesec (month)

Tip unosa za mjesec month omogućava korisniku da odabere mjesec i godinu iz padajućeg kalendara. Vrijednost je string u formatu "YYYY-MM", gdje je YYYY četveroznamenkasta godina, a MM broj mjeseca. Isprobajmo primjer da vidite kako ovo u osnovi funkcioniše: 

<form>
    <label for="mymonth">Odaberi mjesec:</label>
    <input type="month" id="mymonth">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Unosa tipa mjeseca</title>
<script>
    function getValue() {
        var month = document.getElementById("mymonth").value;
        alert(month);
    }
</script>
</head>
<body>
    <form>
        <label for="mymonth">Odabeti mjesec:</label>
        <input type="month" id="mymonth">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa broja (number)

Tip unosa broja number može se koristiti za unos numeričke vrijednosti. Takođe možete ograničiti korisnika da unosi samo prihvatljive vrijednosti koristeći dodatne atribute min, max i step. Sljedeći primjer omogućava vam da unesete brojčanu vrijednost između 1 i 10. 

<form>
    <label for="mynumber">Upiši broj:</label>
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa broja</title>
<style>
    input[type="number"]:valid{
        outline: 2px solid green;
    }
    input[type="number"]:invalid{
        outline: 2px solid red;
    }
</style>
<script>
    function getValue() {
        var number = document.getElementById("mynumber").value;
        alert(number);
    }
</script>
</head>
<body>
    <form>
        <label for="mynumber">Upiši broj:</label>
        <input type="number" min="1" max="10" step="0.5" id="mynumber">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
    <p><strong>Napomena</strong>: Ako pokušate unijeti broj izvan
    raspona (1-10) ili tekstualni znak, prikazaće se greška.</p>
</body>
</html>

Tip unosa raspona (range)

Tip unosa raspona range se može koristiti za unos numeričke vrijednosti unutar određenog raspona. Radi vrlo slično unosu broja, ali nudi jednostavniju kontrolu za unos broja. Isprobajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcioniše: 

<form>
    <label for="mynumber">Odaberi broj:</label>
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa raspona</title>
<script>
    function getValue() {
        var number = document.getElementById("mynumber").value;
        alert(number);
    }
</script>
</head>
<body>
    <form>
        <label for="mynumber">Odaberi broj:</label>
        <input type="range" min="1" max="10" step="0.5" id="mynumber">    
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa pretrage (search)

Tip unosa za pretragu search može se koristiti za kreiranje polja za unos pretraživanja. Polje za pretraživanje obično se ponaša poput uobičajenog tekstualnog polja, ali u nekim pretraživačina, poput Chromea i Safarija, čim započnete tipkati u okvir za pretragu, na desnoj strani polja pojavit će se mali krstić koji vam omogućava brzo brisanje polja za pretraživanje. Isprobajmo primjer da vidite kako to u osnovi funkcioniše: 

<form>
    <label for="mysearch">Pretraži:</label>
    <input type="search" id="mysearch">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa za pretraživanje</title>
<script>
    function getValue() {
        var term = document.getElementById("mysearch").value;
        alert(term);
    }
</script>
</head>
<body>
    <form>
        <label for="mysearch">Pretraživanje:</label>
        <input type="search" id="mysearch" placeholder="Type something...">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa tel

Tip unosa tel može se koristiti za unos telefonskog broja. Pretraživači izvorno ne podržavaju provjeru unosa putem tel. Međutim, možete koristiti atribut placeholder kako biste pomogli korisnicima u unošenju ispravnog formata za telefonski broj ili odredite regularni izraz za provjeru korisničkog unosa pomoću atributa pattern. Pogledajmo primjer: 

<form>
    <label for="myphone">Telefonski broj:</label>
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa tel</title>
<script>
    function getValue() {
        var phone = document.getElementById("myphone").value;
        alert(phone);
    }
</script>
</head>
<body>
    <form>
        <label for="myphone">Telefonski broj:</label>
        <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa vremena (time)

Tip unosa vremena time može se koristiti za unos vremena (sati i minute). Pretraživač može koristiti 12-satni ili 24-satni format za unos vremena na osnovu postavke vremena lokalnog sistema. 

<form>
    <label for="mytime">Odaberi vrijeme:</label>
    <input type="time" id="mytime">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa vremena</title>
<script>
    function getValue() {
        var time = document.getElementById("mytime").value;
        alert(time);
    }
</script>
</head>
<body>
    <form>
        <label for="mytime">Odaberi vrijeme:</label>
        <input type="time" id="mytime">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>

Tip unosa URL

Tip unosa url adrese može se koristiti za unos URL-ova ili web adresa. Višestruke atribute možete koristiti za unos više URL-ova. Takođe, ako je naveden potreban atribut, pretraživač će automatski izvršiti provjeru valjanosti kako bi osigurao da se u okvir za unos unese samo tekst koji odgovara standardnom formatu za URL-ove. Pogledajmo kako ovo funkcioniše: 

<form>
    <label for="myurl">Upiši URL website-a:</label>
    <input type="url" id="myurl" required>
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa URL-a</title>
<style>
    input[type="url"]:valid{
        outline: 2px solid green;
    }
    input[type="url"]:invalid{
        outline: 2px solid red;
    }
</style>
<script>
    function getValue() {
        var url = document.getElementById("myurl").value;
        alert(url);
    }
</script>
</head>
<body>
    <form>
        <label for="myurl">unesi URl web sajta:</label>
        <input type="url" id="myurl" required>
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
    <p><strong>napomena</strong>: Unesite URL u obrazac kao: https://www.google.com</p>
</body>
</html>

Tip unosa za sedmicu (week)

Tip unosa za sedmicu week omogućava korisniku da odabere sedmicu i godinu iz padajućeg kalendara. Isprobajmo sljedeći primjer da biste razumjeli kako ovo u osnovi funkcioniše: 

<form>
    <label for="myweek">Odaberi sedmicu:</label>
    <input type="week" id="myweek">
</form>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Tip unosa sedmice</title>
<script>
    function getValue() {
        var week = document.getElementById("myweek").value;
        alert(week);
    }
</script>
</head>
<body>
    <form>
        <label for="myweek">Odaberi sedmicu:</label>
        <input type="week" id="myweek">
        <button type="button" onclick="getValue();">Vrijednost</button>
    </form>
</body>
</html>