HTML5 ponuja tip polja tel
, ki je zasnovan za uporabo v povezavi s telefonskimi številkami.
Vaš telefonska številka: <input type="tel" name="telefon">
Na pametnih telefonih in tablicah se ob kliku na polje odpre numerična tipkovnica za vnos telefonske številke.
Polja za internetne naslove s tipom url
Polja tipa url
so namenjena vnosu internetnih naslovov.
<input type="url" />
Polja URL se samodejno preverijo. Brskalniki naj bi v takšnih poljih preverili, ali je bil dejansko vnešen sintaktično pravilen URL.
Polje za izpis z output
Z poljem output
lahko izpisujete vsebine. To je lahko zanimivo na primer v povezavi s JavaScript-om. Tako lahko to polje uporabite za izpis spremenljivk. Enako pa se polje lahko uporabi tudi za izpis izračunanih vrednosti. Polje je namenjeno izključno izpisovanju podatkov. Uporabniški vnos ni mogoč.
Primer:
<script> /* <![CDATA[ */ function izpis(){ wort1="Pozdravljeni," wort2="svet!" document.forms[0][0].value=wort1+wort2 } /* ]]> */ </script>
V tem primeru so bile deklarirane dve spremenljivki. Vsebine teh spremenljivk naj bi bile prikazane v polju output
.
<body onload="izpis()"> <form action="izracun.php" method="get" name="form"> <output name="polje" /> </form> </body>
Brskalniki, kot je Opera, prikažejo želeno vrednost. Takšni brskalniki, ki ne znajo interpretirati output
, ne bodo prikazali ničesar.output
pozna tri atribute.
• form
– Obrazec, v katerem je vključen element output
.
• for
– Vzpostavi povezavo do polj ali vrednosti, na katere se nanaša polje izpisa. Vrednosti in polja morajo biti ločena z presledkom.
• name
– Če navedete ime, se vsebina polja prenese ob oddaji obrazca.
• value
– Določi vrednost polja.output
je seveda primeren tudi za matematične izračune. Na primer, prek namenskih poljčk lahko pridobite vrednosti in jih med seboj množite.
<!DOCTYPE html> <html > <head> <title>izpis</title> <script> /* <![CDATA[ */ function multiply(){ a=parseInt(prompt("Številka 1.",0)); b=parseInt(prompt("Številka 2.",0)); document.forms["form"]["rezultat"].value=a*b; } /* ]]> */ </script> </head> <body onload="multiply()"> <form action="#" method="get" name="form"> <label>Rezultat množenja:</label> <output name="result" /> </output> </form> </body> </html>
Po odprtju strani se odpre okno s sporočilom, kjer je prva vrednost pridobljena.
Če se vnos potrdi z OK, se odpre drugo okno. (Če se v enem od obeh oken klikne Prekliči, bo rezultat NaN, torej Not a Number).
Če se potrdi tudi drugo okno z OK, skript prenese rezultat množenja kot vrednost v polje output
.
Napredne črte s progress
Napredno vrstico lahko ustvarite prek elementa progress
. To je na primer zanimivo v povezavi z nalaganjem datotek.
Google že interpretira ta element. Drugi brskalniki, ki tega elementa ne prepoznajo, prikažejo njegovo vsebino.
Primer:
Prenos poteka ... <progress value="250" max="1000"> <span id="nalozenoNapreduje">25</span>% </progress>
Element progress
pozna dva atributa:
• max
– Določi, koliko skupnih korakov je potrebnih.
• value
– Tu navedete, koliko korakov je že opravljenih.
Element progress
postane zares zanimiv šele, ko vstopi JavaScript. Kako lahko uporabite kombinacijo progress
in JavaScripta, najbolje prikaže primer.
Predpostavlja se obrazec, ki ga je treba izpolniti v več korakih. Zaporedoma se sprašujejo naslednje informacije:
• Ime
• Priimek
• Ulica
• Poštna številka
• Kraj
Zdaj se lahko te nekaj vrednosti seveda povpraša na eni strani. Kaj pa, če je treba uporabnik pridobiti veliko informacij? Obsežni obrazci delujejo precej odvračilno. Bolje je torej, če obrazce razdelimo na več strani.
Recimo, da odprete obrazec.
Tukaj se boste vprašali po svojem imenu. Vrstična nogica pod poljem je bila uresničena z progress
-elementom.
<fieldset id="schritt1" style="display: none;"> <p>Ime: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Korak 1 / 5</progress></p> <p><input type="button" value="Naprej" onclick="naechserSchritt(2)"></p> </fieldset>
Pri tej sintaksi so pomembne več stvari. Posamezni fieldset
elementi so sprva nastavljeni na nevidno. Ker čeprav se na prvi pogled ne zdi tako, je obrazec dejansko sestavljen samo iz ene strani. Posamezna polja so bila vsaka vstavljena v svoj fieldset
element. In ti fieldset
elementi (vključno z njihovo vsebino) niso vidni.
Da bi dejansko skriti elementi postali vidni po kliku na posamezne Naprej gumbe, se uporablja JavaScript switch
funkcija. Kako izgleda, se bo pokazalo v nadaljevanju tega vadnice.
Ampak najprej nazaj k obrazcu. Z delom skozi obrazec z gumbi Naprej se vam bo pokazalo, kako daleč ste že prišli.
Sicer ni preveč pomembno, če brskalnik progress
elementa ne razume. Saj ti brskalniki preprosto prikažejo vsebino tega elementa.
<progress max="5" value="1">Korak 1 / 5</progress>
Namesto prikaza napredka je torej viden besedilni Korak 2 / 5.
Obrazec izgleda takole:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Ime: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Korak 1 / 5</progress></p> <p><input type="button" value="Naprej" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Priimek: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Korak 2 / 5</progress></p> <p><input type="button" value="Naprej" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Ulica: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Korak 3 / 5</progress></p> <p><input type="button" value="Naprej" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Poštna številka: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Korak 4 / 5</progress></p> <p><input type="button" value="Naprej" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Kraj: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Korak 5 / 5</progress></p> <input type="submit" value="Konec"> </fieldset> </form>
Tu so pomembne tri stvari:
• Vsakemu fieldset
elementu je dodeljen ID.
• Vsem fieldset
elementom je nastavljeno na prikaz: none.
• Gumbi imajo dodeljeno funkcijo naechsterSchritt(n)
.
Funkcija naechsterSchritt(n)
izgleda takole:
<script> /* <![CDATA[ */ function naechsterSchritt(n) { switch(n) { case 1: document.getElementById('schritt1').style.display = "block"; break; case 2: document.getElementById('schritt1').style.display = "none"; document.getElementById('schritt2').style.display = "block"; break; case 3: document.getElementById('schritt2').style.display = "none"; document.getElementById('schritt3').style.display = "block"; break; case 4: document.getElementById('schritt3').style.display = "none"; document.getElementById('schritt4').style.display = "block"; break; case 5: document.getElementById('schritt4').style.display = "none"; document.getElementById('schritt5').style.display = "block"; break; default: break; } } naechsterSchritt(1); /* ]]> */ </script>
Ta funkcija prikaže trenutni fieldset
element in skrije druge fieldset
elemente. Pazite, da postavite funkcijo za dodelitev začrtanih polj. Najbolje jo postavite za odpiranje </form>
.