HTML in CSS za začetnike (del 16): Obrazci (4)

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č.

HTML in CSS za začetnike (Del 16): Obrazci (4)

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.

HTML in CSS za začetnike (del 16): Obrazci (4)

Č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).

HTML in CSS za začetnike (Del 16): Obrazci (4)

Č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.

HTML & CSS za začetnike (Del 16): Obrazci (4)

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.

HTML in CSS za začetnike (Del 16): Obrazci (4)

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.

HTML in CSS za začetnike (Del 16): Obrazci (4)

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>.

HTML in CSS za začetnike (del 16): Obrazci (4)

Polja za internetne naslove s tipom url

Polje za izpis z output

Napredne črte s progress

Polja za internetne naslove s tipom `url`

Polje za izpis z `output`

Napredne črte s `progress`