HTML5 tilbyr en tel felttype som er designet for bruk i forbindelse med telefonnumre.
Ditt telefonnummer: <input type="tel" name="telefon">
På smarttelefoner og nettbrett åpnes et nummertastatur når feltet klikkes, for å legge inn telefonnummeret.
Felter for internettadresser med url
Felt av typen url er ment for inntasting av internettadresser.
<input type="url" />
URL-felt valideres automatisk. Nettlesere skal sjekke om en syntaktisk korrekt URL er skrevet inn i slike felt.
Utdatafelt med output
Med output-feltet kan innhold vises. Det er nyttig for eksempel i forbindelse med JavaScript. Dette feltet kan brukes for å vise variabler eller for å vise beregnede verdier. Feltet kan kun brukes for utdata. Brukerinntasting er derfor ikke mulig.
Et eksempel:
<script>
/* <![CDATA[ */
function utdata(){
wort1="Hei,"
wort2="Verden!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>I dette eksempelet ble to variabler deklarert. Innholdet i disse variablene skal vises i output-feltet.
<body onload="utdata()">
<form action="vurdering.php" method="get" name="skjema">
<output name="felt" />
</form>
</body>
Nettlesere som Opera viser ønsket verdi. Nettlesere som ikke kan tolke output, vil ikke vise noe.output har tre attributter.
• form – Skjemaet som inneholder output-elementet.
• for – Etablerte forbindelser til feltene eller verdiene som output-feltet refererer til. Verdiene og feltene må skilles med mellomrom.
• name – Hvis du gir det et navn, overføres innholdet i feltet når skjemaet sendes.
• value – Angir verdien til feltet.output egner seg også for matematiske beregninger. For eksempel kan verdier hentes inn via prompt-felt og multipliseres med hverandre.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multiplikasjon(){
a=parseInt(prompt("Tall 1.",0));
b=parseInt(prompt("Tall 2.",0));
document.forms["skjema"]["resultat"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multiplikasjon()">
<form action="#" method="get" name="skjema">
<label>Resultatet av multiplikasjonen:</label>
<output name="resultat" />
</output>
</form>
</body>
</html>Når siden lastes, åpnes et prompt-vindu der den første verdien blir spurt om.
Hvis du bekrefter inntastingen med OK, åpnes et andre vindu. (Hvis du klikker på Avbryt i noen av vinduene, vil resultatet være NaN,, altså Not a Number).
Hvis det andre vinduet også bekreftes med OK, sendes resultatet av multiplikasjonen som verdi til output-feltet.
Framdriftsindikatorer med progress
En framdriftsindikator kan implementeres ved bruk av progress-elementet. Det er nyttig for eksempel i forbindelse med nedlasting av filer..gif "HTML & CSS for nybegynnere (Del 16): Skjemaer (4)")
Google tolker elementet allerede. Andre nettlesere som ikke kjenner igjen elementet, vil vise innholdet.
Et eksempel:
Nedlastingen pågår ...
<progress value="250" max="1000">
<span id="nedlastingsfremgang">25</span>%
</progress>
Progress-elementet har to attributter:
• maks – Angir totalt antall trinn som trengs.
• verdi – Angir hvor mange trinn som er fullført til nå.
Progress-elementet blir virkelig interessant når JavaScript blir involvert. Hvordan en kombinasjon av progress og JavaScript kan brukes, kan best vises med et eksempel.
I dette eksempelet antas et skjema som skal fylles ut i flere trinn. Følgende informasjon spørres etter i rekkefølge:
• Fornavn
• Etternavn
• Gateadresse
• Postnummer
• Sted
Nå kan man selvfølgelig be om disse få verdiene på en side. Men hva om det er mange opplysninger som skal innhentes fra brukeren? Da virker omfattende skjemaer mer skremmende. Det er derfor bedre å dele skjemaene inn i flere sider.
For eksempel, dere kaller opp skjemaet.
Her blir dere spurt om deres fornavn. Statuslinjen under feltet ble realisert ved hjelp av progress-elementet.
<fieldset id="schritt1" style="display: none;"> <p>Fornavn: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Trinn 1 / 5</progress></p> <p><input type="button" value="Neste" onclick="naechserSchritt(2)"></p> </fieldset>
Flere elementer er avgjørende for denne syntaksen. De individuelle fieldset-elementene blir først satt til usynlige. Selv om det ved første øyekast ikke kan se slik ut, består skjemaet faktisk bare av en side. De enkelte feltene ble hver satt inn i egne fieldset-elementer. Og disse fieldset-elementene (inkludert innholdet deres) er ikke synlige.
For at de egentlig skjulte elementene skal bli synlige etter at de respektive Neste-knappene har blitt klikket på, brukes en JavaScript-switch-funksjon. Hvordan den ser ut, vil bli vist senere i den videre gangen av denne opplæringen.
Først tilbake til skjemaet. Ved å trykke på de respektive Neste-knappene, blir man navigert gjennom skjemaet. De progress-elementene viser hvor langt man har kommet.
Det er forresten ikke spesielt alvorlig hvis en nettleser ikke tolker progress-elementet. For disse nettleserne viser rett og slett innholdet av dette elementet.
<progress max="5" value="1">Trinn 1 / 5</progress>
I stedet for fremdriftsindikatoren, kan man derfor se en tekst i henhold til skjemaet Trinn 2 / 5.
Skjemaet ser slik ut:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Fornavn: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Trinn 1 / 5</progress></p> <p><input type="button" value="Neste" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Etternavn: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Trinn 2 / 5</progress></p> <p><input type="button" value="Neste" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Gateadresse: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Trinn 3 / 5</progress></p> <p><input type="button" value="Neste" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Postnummer: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Trinn 4 / 5</progress></p> <p><input type="button" value="Neste" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Sted: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Trinn 5 / 5</progress></p> <input type="submit" value="Slutt"> </fieldset> </form>
Det er tre viktige ting her:
• Hver fieldset-element blir tildelt en ID.
• Alle fieldset-elementer blir satt til display: none.
• Funksjonen naechsterSchritt(n) blir tildelt til knappene.
Funksjonen naechsterSchritt(n) ser slik ut:
<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>
Denne funksjonen viser det aktuelle fieldset-elementet og skjuler de andre fieldset-elementene. Pass på å plassere funksjonen etter definisjonen av feltene. Sett den derfor helst etter </form>.
