HTML5 giver med tel en input-type, der er designet til brug i forbindelse med telefonnumre.
Dit telefonnummer: <input type="tel" name="telefon">
På smartphones og tablets åbner numerisk tastatur sig, når feltet klikkes på, for indtastning af telefonnummeret.
Felter til internetadresser med url
Felter af typen url er beregnet til indtastning af internetadresser.
<input type="url" />
URL-felter valideres automatisk. Browserne skal kontrollere, om der rent faktisk er indtastet en syntaktisk korrekt URL i sådanne felter.
Outputfelt med output
Med output-feltet kan indhold udskrives. Det er interessant f.eks. i forbindelse med JavaScript. Dette felt kan her bruges til at vise variabler. Feltet kan også bruges til visning af beregnede værdier. Feltet er kun beregnet til dataudskrivning. Brugerinput er ikke muligt.
Et eksempel:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hej,"
wort2="verden!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>I dette eksempel blev der deklareret to variabler. Indholdet af disse variabler skal vises i output-feltet.
<body onload="ausgabe()">
<form action="evaluering.php" method="get" name="form">
<output name="felt" />
</form>
</body>
Browsere som Opera viser den ønskede værdi. Andre browsere, der ikke kan forstå output, vil derimod ikke vise noget.output har tre attributter.
• form – Formularen, som output-elementet er indeholdt i.
• for – Etablerer forbindelsen til felterne eller værdierne, som outputfeltet refererer til. Værdierne og felterne skal adskilles med mellemrum.
• name – Ved at angive et navn, bliver indholdet af feltet overført ved afsendelse af formularen.
• value – Angiver værdien af feltet.output egner sig naturligvis også til matematiske beregninger. For eksempel kunne man spørge efter værdier via prompt-felter og derefter multiplicere dem med hinanden.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Ciffer 1.",0));
b=parseInt(prompt("Ciffer 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Resultatet af multipliceringen:</label>
<output name="result" />
</output>
</form>
</body>
</html>Når siden åbnes, åbner der sig et prompt-vindue, hvor den første værdi bliver spurgt efter.
Hvis man bekræfter indtastningen med OK, åbner der sig et andet vindue. (Hvis man i en af de to vinduer klikker på Annuller, vil resultatet være NaN, altså Not a Number).
Hvis det andet vindue også bekræftes med OK, overfører scriptet resultatet af multipliceringen som værdi til output-feltet.
Fremgangsindikatorer med progress
En fremgangsindikator kan opbygges med progress-elementet. Det er interessant f.eks. i forbindelse med download af filer..gif "HTML & CSS for begyndere (Del 16): Formularer (4)")
Google tolker elementet allerede. Andre browsere, der ikke kender elementet, vil vise dets indhold.
Et eksempel:
Downloaden er i gang ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>progress-elementet har to attributter:
• max – Bestemmer, hvor mange trin der i alt kræves.
• value – Her angiver man, hvor mange trin der allerede er udført.progress-elementet bliver virkelig interessant, når JavaScript kommer ind i billedet. Hvordan en kombination af progress og JavaScript kan bruges, kan bedst vises med et eksempel.
I dette eksempel antages der, at der er et formular, der skal udfyldes i flere trin. Følgende oplysninger indsamles efter hinanden:
• Fornavn
• Efternavn
• Gade
• Postnummer
• By
Nu kan man selvfølgelig spørge efter disse få værdier på én side. Men hvad nu hvis brugeren skal indtaste meget information? Omfattende formularer virker mere afskrækkende. Derfor er det bedre at opdele formularer på flere sider.
Forestil jer, I åbner formularen.
Her bliver I spurgt efter jeres fornavn. Statuslinjen under feltet blev implementeret ved hjælp af et progress-element.
<fieldset id="skridt1" style="display: none;"> <p>Fornavn: <input type="text" name="fnavn" size="30"></p> <p><progress max="5" value="1">Skridt 1 / 5</progress></p> <p><input type="button" value="Næste" onclick="næsteSkridt(2)"></p> </fieldset>
Dette syntaks er afgørende. De enkelte fieldset-elementer er først sat til usynlige. Selvom det ikke ser sådan ud ved første øjekast, består formularen faktisk af én side. De enkelte felter blev indsat i separate fieldset-elementer. Og disse fieldset-elementer (inklusive deres indhold) er ikke synlige.
For at de faktisk skjulte elementer bliver synlige efter at have klikket på de respektive Næste-knap, anvendes en JavaScript-switch-funktion. Hvordan den ser ud, vil blive vist senere i denne vejledning.
Først tilbage til formularen. Ved at klikke på de Næste-knapper bliver man ført gennem formularen. I processen viser progress-elementerne, hvor langt man er kommet.
Det er i øvrigt ikke så slemt, hvis en browser ikke fortolker progress-elementet. Disse browsere viser blot indholdet af dette element.
<progress max="5" value="1">Skridt 1 / 5</progress>
I stedet for fremskridtsvisning er der derfor en tekst i form af Skridt 2 / 5.
Formularen ser sådan ud:
<form method="post" action="#"> <fieldset id="skridt1" style="display: none;"> <p>Fornavn: <input type="text" name="fnavn" size="30"></p> <p><progress max="5" value="1">Skridt 1 / 5</progress></p> <p><input type="button" value="Næste" onclick="næsteSkridt(2)"></p> </fieldset> <fieldset id="skridt2" style="display: none;"> <p>Efternavn: <input type="text" name="enavn" size="30"></p> <p><progress max="5" value="2">Skridt 2 / 5</progress></p> <p><input type="button" value="Næste" onclick="næsteSkridt(3)"></p> </fieldset> <fieldset id="skridt3" style="display: none;"> <p>Gade: <input type="text" name="gade" size="30"></p> <p><progress max="5" value="3">Skridt 3 / 5</progress></p> <p><input type="button" value="Næste" onclick="næsteSkridt(4)"></p> </fieldset> <fieldset id="skridt4" style="display: none;"> <p>Postnummer: <input type="text" name="postnr" size="30"></p> <p><progress max="5" value="4">Skridt 4 / 5</progress></p> <p><input type="button" value="Næste" onclick="næsteSkridt(5)"></p> </fieldset> <fieldset id="skridt5" style="display: none;"> <p>By: <input type="text" name="by" size="30"></p> <p><progress max="5" value="5">Skridt 5 / 5</progress></p> <input type="submit" value="Slut"> </fieldset> </form>
Her er tre ting afgørende:
• Hvert fieldset-element får tildelt en ID.
• Alle fieldset-elementer sættes til display: none.
• Funktionen næsteSkridt(n) tildeles knapperne.
Funktionen næsteSkridt(n) ser sådan ud:
<script>
/* <![CDATA[ */
function næsteSkridt(n) {
switch(n) {
case 1:
document.getElementById('skridt1').style.display = "block";
break;
case 2:
document.getElementById('skridt1').style.display = "none";
document.getElementById('skridt2').style.display = "block";
break;
case 3:
document.getElementById('skridt2').style.display = "none";
document.getElementById('skridt3').style.display = "block";
break;
case 4:
document.getElementById('skridt3').style.display = "none";
document.getElementById('skridt4').style.display = "block";
break;
case 5:
document.getElementById('skridt4').style.display = "none";
document.getElementById('skridt5').style.display = "block";
break
default: break;
}
}
næsteSkridt(1);
/* ]]> */
</script>
Denne funktion viser det aktuelle fieldset-element og skjuler de andre fieldset-elementer. Sørg absolut for at placere funktionen efter definitionen af felterne. Så pak den bedst bag det lukkende </form>.
