Kvaliteetsed mallid, kergesti kohandatavad Laadi sisu kohe alla Üle 10 000 kontrollitud arvustuse Kvaliteet Saksamaal valmistatud
Proovi nüüd
HTML ja CSS algajatele

HTML ja CSS algajatele (Osa 16): Vormid (4)

Kõik õpetuse videod HTML ja CSS algajatele

HTML5 pakub välja tel väljatüübi, mis on mõeldud telefoninumbritega seotud kasutamiseks.

Sinu telefoninumber: <input type="tel" name="telefon">

Nutitelefonides ja tahvelarvutites avaneb telefoninumbri sisestamiseks numbrilukk, kui välja peale klõpsatakse.

Väljad internetiaadresside jaoks tüübiga url

Url-tüüpi väljad on mõeldud internetiaadresside sisestamiseks.

<input type="url" />



URL-välju valideeritakse automaatselt. Brauserid peaksid sellist tüüpi väljadel kontrollima, kas sisestatud URL on süntaksilt õige.

Väljundväli tüübiga output

Output-välja abil saab sisu välja kuvada. See on huvitav näiteks koos JavaScriptiga. Näiteks saab seda välja kasutada muutujate väljastamiseks. Samuti saab välja kasutada ka arvutatud väärtuste väljastamiseks. Väli on mõeldud ainult andmete väljastamiseks. Kasutaja sisendeid pole seega võimalik teha.

HTML ja CSS algajatele (osa 16): Vormid (4)



Näide:

<script>
/* <![CDATA[ */
function ausgabe(){
 wort1="Tere,"
 wort2="maailm!"
 document.forms[0][0].value=wort1+wort2
}
/* ]]> */ 
</script>

Selles näites deklareeriti kaks muutujat. Nende muutujate sisu kuvatakse output-väljal.

<body onload="ausgabe()">
   <form action="auswertung.php" method="get" name="form">
      <output name="feld" />
   </form>
</body>



Brauserid nagu Opera kuvavad soovitud väärtust. Sellised brauserid, mis output'ist aru ei saa, ei kuvata midagi.

Output'il on kolm atribuuti.

• Form – Vorm, kus output-element sisaldub.

• For – Viitab väljadele või väärtustele, millele output-väli viitab. Väärtused ja väljad tuleb eraldada tühikutega.

• Name – Kui nimi on määratud, saadetakse välja sisu vormi saatmise ajal edasi.

• Value – Välja väärtus.

Output'it saab kasutada ka matemaatiliste arvutuste jaoks. Näiteks võiks küsida väärtusi Prompt-väljadest ja korrutada neid omavahel.

<!DOCTYPE html>
 <html >
 <head>
 <title>output</title>
 <script>
 /* <![CDATA[ */ 
 function multi(){
    a=parseInt(prompt("Number 1.",0));
    b=parseInt(prompt("Number 2.",0));
    document.forms["form"]["result"].value=a*b;
 }
 /* ]]> */ 
 </script>
 </head>
 <body onload="multi()">
    <form action="#" method="get" name="form">
    <label>Korrutamise tulemus:</label>
       <output name="result" />
       </output>
     </form>
 </body>
 </html>

Kui lehele minna, avaneb Prompt-aken, kust esimene väärtus küsitakse.

HTML ja CSS algajatele (Osa 16): Vormid (4)

Kinnitades sisendit OK, avaneb teine aken. (Kui tühistatakse mis tahes aknas, on tulemus NaN, ehk Not a Number).

HTML ja CSS algajatele (osa 16): Vormid (4)



Kui kinnitada ka teine aken OK, saadab skript korrutamise tulemuse output-väljale väärtusena.

Edusammude näitamine tüübiga progress

Edusammude näitamiseks saab kasutada progress-elementi. See on huvitav näiteks failide allalaadimisega seotud olukordades.

HTML ja CSS algajatele (Osa 16): Vormid (4)

Google tõlgendab seda elementi juba. Teised brauserid, kes ei tunne seda elementi, kuvavad selle sisu.

Näide:

Allalaadimine käib ...
 <progress value="250" max="1000">
    <span id="downloadProgress">25</span>%
 </progress>



Progress-element tunneb kahte atribuuti:

• Max – Määrab, kui palju samme kokku vaja läheb.

• Value – Näitab, palju samme on juba tehtud.

Progress-element muutub tõeliselt huvitavaks alles siis, kui lisatakse sisse JavaScript. Kuidas kasutada progress'i koos JavaScriptiga, seda näitab kõige paremini näide.

Selles näites eeldatakse vormi, mis tuleb täita mitmes sammus. Küsitakse järgmised andmed järjestikku:

• Eesnimi

• Perekonnanimi

• Tänav

• Postiindeks

• Asukoht

Nüüd võiks neid vähesi väärtusi muidugi ühel lehel pärida. Kuid mis siis, kui kasutajalt tuleb koguda väga palju teavet? Siis muudavad mahukad vormid pigem eemaletõukavaks. Seetõttu on parem, kui vormid jagatakse mitmele lehele.

Eeldades, et te kutsite esile vormi.

HTML ja CSS algajatele (osa 16): Vormid (4)



Siin küsitakse teie eesnime. Välja alla on lisatud progress-element.

<fieldset id="samm1" style="display: none;">
 <p>Eesnimi: 
 <input type="text" name="enimi" size="30"></p>
 <p><progress max="5" value="1">Samm 1 / 5</progress></p>
 <p><input type="button" value="Edasi" onclick="järgmineSamm(2)"></p>
 </fieldset>



Selle süntaksi puhul on oluline mitu asja. Kõik fieldset-elemendid muudetakse esialgu nähtamatuks. Kuigi see võib esmapilgul teisiti välja näha, koosneb tegelikult vorm ainult ühest lehest. Iga väli on lisatud omaette fieldset-elementi. Ja need fieldset-elemendid (koos nende sisuga) ei ole nähtavad.

Et tegelikult varjatud elemendid pärast vastavale Edasi-nuppudele klõpsamist nähtavaks muutuksid, kasutatakse JavaScripti switch-funktsiooni. Kuidas see välja näeb, näidatakse selle õpetuse edasises käigus.

Kuid enne tagasi vormile. Edasi-nuppudele klõpsates juhatakse teid vormi läbi. progress-elemendid näitavad, kui kaugele olete jõudnud.

HTML ja CSS algajatele (osa 16): Vormid (4)



Muide, see pole eriti hull, kui brauser ei tõlgenda progress-elementi. Need brauserid kuvavad selle elemendi sisu lihtsalt.

<progress max="5" value="1">Samm 1 / 5</progress>



Edasi asemel edusamm näidatakse seega teksti järgmise skeemi järgi Samm 2 / 5.

Vorm näeb välja järgmiselt:

<form method="post" action="#">
 <fieldset id="samm1" style="display: none;">
 <p>Eesnimi: 
 <input type="text" name="enimi" size="30"></p>
 <p><progress max="5" value="1">Samm 1 / 5</progress></p>
 <p><input type="button" value="Edasi" onclick="järgmineSamm(2)"></p>
 </fieldset>
 <fieldset id="samm2" style="display: none;">
 <p>Perekonnanimi: 
 <input type="text" name="pnimi" size="30"></p>
 <p><progress max="5" value="2">Samm 2 / 5</progress></p>
 <p><input type="button" value="Edasi" onclick="järgmineSamm(3)"></p>
 </fieldset>
 <fieldset id="samm3" style="display: none;">
 <p>Tänav: 
 <input type="text" name="tänav" size="30"></p>
 <p><progress max="5" value="3">Samm 3 / 5</progress></p>
 <p><input type="button" value="Edasi" onclick="järgmineSamm(4)"></p>
 </fieldset>
 <fieldset id="samm4" style="display: none;">
 <p>Postiindeks: 
 <input type="text" name="postcode" size="30"></p>
 <p><progress max="5" value="4">Samm 4 / 5</progress></p>
 <p><input type="button" value="Edasi" onclick="järgmineSamm(5)"></p>
 </fieldset>
 <fieldset id="samm5" style="display: none;">
 <p>Asukoht: 
 <input type="text" name="asukoht" size="30"></p>
 <p><progress max="5" value="5">Samm 5 / 5</progress></p>
 <input type="submit" value="Lõpp">
 </fieldset>
 </form>

Siin on olulised kolm asja:

• Iga fieldset-elemendile määratakse ID.

• Kõik fieldset-elemendid määratakse nähtamatuks display: none.

• Nuppudele määratakse funktsioon järgmineSamm(n).

Funktsioon järgmineSamm(n) näeb välja järgmine:

<script>
/* <![CDATA[ */
function järgmineSamm(n) {
  switch(n) {
    case 1:
       document.getElementById('samm1').style.display = "block";
       break;
    case 2:
       document.getElementById('samm1').style.display = "none";
       document.getElementById('samm2').style.display = "block";
       break;
    case 3:
       document.getElementById('samm2').style.display = "none";
       document.getElementById('samm3').style.display = "block";
       break;
    case 4:
       document.getElementById('samm3').style.display = "none";
       document.getElementById('samm4').style.display = "block";
       break;
    case 5:
       document.getElementById('samm4').style.display = "none";
       document.getElementById('samm5').style.display = "block";
       break
    default: break;
  }
}
järgmineSamm(1);
/* ]]> */
</script>



See funktsioon muudab praeguse fieldset-elemendi nähtavaks ja peidab teised fieldset-elemendid. Veenduge kindlasti, et panete selle funktsiooni väljale määratlemise taha. Seega pange see parimini vormi sulgeva </form> taga.

Eelmine tekstiõpetus HTML ja CSS algajatele (Osa 15): Vormid (3)
HTML & CSS algajatele (Osa 17): Vormid (5) Järgmise tekstiõpetuseni