HTML5 tarjoaa tel -kenttätyypin, joka on suunniteltu puhelinnumeroiden syöttämistä varten.
Puhelinnumerosi: <input type="tel" name="puhelin">
Älypuhelimissa ja tableteissa painikkeen napsauttamisen jälkeen avautuu numeronäppäimistö puhelinnumeron syöttämistä varten.
Internetosoitteen kentät käyttäen url
Url-tyypin kentät on tarkoitettu Internet-osoitteiden syöttämistä varten.
<input type="url" />
URL-kentät tarkistetaan automaattisesti. Selaimien tulisi tarkistaa näiden kenttien validiteetti, onko syötetty todella syntaksiltaan oikea URL-osoite.
Tulostealue output
Output-kentän avulla voidaan tulostaa sisältöjä. Tämä on esimerkiksi hyödyllinen yhteys JavaScriptin kanssa. Tämä kenttä voi toimia muuttujien tulostamiseen. Kenttää voi myös käyttää laskettujen arvojen tulostamiseen. Kenttä on tarkoitettu vain datan tulostamiseen. Käyttäjän syötteitä ei siis voi tehdä.
Esimerkki:
<script>
/* <![CDATA[ */
function tulostus(){
sana1="Hei,"
sana2="Maailma!"
document.forms[0][0].value=sana1+sana2
}
/* ]]> */
</script>Tässä esimerkissä kaksi muuttujaa on deklaroitu. Niiden sisältöjen pitäisi näkyä output-kentässä.
<body onload="tulostus()">
<form action="arviointi.php" method="get" name="lomake">
<output name="kenttä" />
</form>
</body>
Esimerkiksi Opera-selain näyttää halutun arvon. Sellaiset selaimet, jotka eivät tunnista output-kenttää, eivät sen sijaan näytä mitään.Output-kentällä on kolme attribuuttia.
• form – Lomake, jossa output-elementti sijaitsee.
• for – Määrittää suhteen kenttiin tai arvoihin, joihin output-kenttä viittaa. Arvot ja kentät on erotettava välilyönnillä.
• name – Nimi ilmoittaa, että kentän sisältö lähetetään lomaketta lähetettäessä.
• value – Kentän arvo.Output sopii myös matemaattisiin laskuihin. Esimerkiksi kyselyikkunoista saadut arvot voidaan kertoa keskenään.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function kertoma(){
a=parseInt(prompt("Numero 1.",0));
b=parseInt(prompt("Numero 2.",0));
document.forms["lomake"]["tulos"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="kertoma()">
<form action="#" method="get" name="lomake">
<label>Kertolaskun tulos:</label>
<output name="tulos" />
</output>
</form>
</body>
</html>Kun sivusto avataan, ilmestyy kyselyikkuna, jolla ensimmäinen arvo kysytään.
Hyväksyttäessä syöttö OK, toinen ikkuna aukeaa. (Jos jommassakummassa ikkunassa painetaan Peruuta, tulos on NaN, eli Ei luku).
Hyväksyttäessä myös toinen ikkuna OK, skripti lähettää kertolaskun tuloksen output-kenttään.
Edistymisindikaattorit progress
Edistymisindikaattori voidaan toteuttaa käyttäen progress-elementtiä. Tämä on esimerkiksi hyödyllinen tiedostojen latauksen yhteydessä..gif "HTML ja CSS aloittelijoille (Osa 16): Lomakkeet (4)")
Google tulkitsee elementin jo. Toiset selaimet, jotka eivät tunnista elementtiä, näyttävät sen sisällön.
Esimerkki:
Lataus käynnissä ...
<progress value="250" max="1000">
<span id="lataustila">25</span>%
</progress>
Progress-elementillä on kaksi atribuuttia:
• max – Määrittää kokonaismäärän askelista.
• value – Tämä ilmoittaa, kuinka monta askelta on jo suoritettu.Progress-elementti tulee todella hyödylliseksi vasta kun JavaScript on mukana. Miten yhdistelmä progress ja JavaScript voidaan hyödyntää, on parasta näyttää esimerkin avulla.
Tässä esimerkissä lähdetään siitä, että lomake täytetään useissa vaiheissa. Seuraavia tietoja kysytään peräkkäin:
• Etunimi
• Sukunimi
• Katuosoite
• Postinumero
• Kaupunki
Nyt voitaisiin tietenkin kysyä näitä muutamia arvoja yhdellä sivulla. Mutta mitä tehdä, jos käyttäjältä tarvitaan hyvin paljon tietoja? Silloin laajat lomakkeet voivat pikemminkin vaikuttaa pelottavilta. Siksi on parempi jakaa lomakkeet useille sivuille.
Oletetaan, että avaat lomakkeen.
Täällä sinulta kysytään etunimeäsi. Kentän alapuolella oleva tilapalkki on toteutettu progress-elementillä.
<fieldset id="schritt1" style="display: none;"> <p>Etunimi: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Vaihe 1 / 5</progress></p> <p><input type="button" value="Jatka" onclick="naechserSchritt(2)"></p> </fieldset>
Tämän syntaksin suhteen on useita olennaisia seikkoja. Yksittäiset fieldset-elementit asetetaan ensin näkymättömiksi. Vaikkakin se ei ehkä näytä siltä ensisilmäyksellä, lomake koostuu itse asiassa vain yhdestä sivusta. Yksittäiset kentät on lisätty omiin fieldset-elementteihinsä. Ja nämä fieldset-elementit (sisältöineen) eivät ole näkyvissä.
Jotta itse asiassa piilotetut elementit tulevat näkyviin klikkauksen jälkeen kunkin Jatka-painikkeen jälkeen, käytetään JavaScript-switch-funktiota. Ohjeet siitä, miltä funktio näyttää, annetaan tämän oppaan myöhemmässä osassa.
Ensin kuitenkin takaisin lomakkeeseen. Klikkaamalla Jatka-painikkeita olet ohjattuna läpi lomakkeen. Samalla progress-elementit näyttävät, kuinka pitkällä olet edennyt.
Muuten ei ole erityisen vakavaa, jos selain ei tulkitse progress-elementtiä. Nämä selaimet näyttävät aikapaljon vain tämän elementin sisällön.
<progress max="5" value="1">Vaihe 1 / 5</progress>
Lomake näyttää seuraavalta:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Etunimi: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Vaihe 1 / 5</progress></p> <p><input type="button" value="Jatka" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Sukunimi: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Vaihe 2 / 5</progress></p> <p><input type="button" value="Jatka" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Katuosoite: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Vaihe 3 / 5</progress></p> <p><input type="button" value="Jatka" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Postinumero: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Vaihe 4 / 5</progress></p> <p><input type="button" value="Jatka" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Paikkakunta: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Vaihe 5 / 5</progress></p> <input type="submit" value="Loppu"> </fieldset> </form>
Tässä kolme tärkeää asiaa:
• Jokaiselle fieldset-elementille annetaan tunniste-ID.
• Kaikille fieldset-elementeille asetetaan display: none.
• Painikkeille määritellään toiminto naechsterSchritt(n).
Toiminto naechsterSchritt(n) näyttää tältä:
<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>
Tämä funktio näyttää nykyisen fieldset-elementin ja piilottaa muut fieldset-elementit. Muista sijoittaa funktio kenttämääritelmien jälkeen. Eli parasta on sijoittaa se lomakkeen sulkevan </form>-elementin jälkeen.
