HTML5 ger med tel en fälttyp som är avsedd för användning i samband med telefonnummer.
Ditt telefonnummer: <input type="tel" name="telefon">
På smartphones och tablets öppnas ett numeriskt tangentbord när fältet klickas på för att mata in telefonnumret.
Fält för webbadresser med url
Fält av typen url är avsedda för inmatning av webbadresser.
<input type="url" />
URL-fält valideras automatiskt. Webbläsare bör kontrollera om en syntaktiskt korrekt URL har angetts i sådana fält.
Utgångsfält med output
Med fältet output kan innehåll visas. Det är intressant att använda det till exempel i kombination med JavaScript. På så sätt kan detta fält användas för att visa variabler här. Fältet kan också användas för att visa beräknade värden. Fältet är endast avsett för datautmatning. Användarinmatningar är alltså inte möjliga.
Ett exempel:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hej,"
wort2="världen!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>I detta exempel har två variabler deklarerats. Innehållet i dessa variabler ska visas i output-fältet.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Webbläsare som Opera visar det önskade värdet. Sådana webbläsare som inte kan hantera output visar däremot ingenting.output har tre attribut:
• form – Formuläret där output-elementet ingår.
• for – Skapar en koppling till fälten eller värden som output-fältet hänvisar till. Värdena och fälten måste separeras av mellanslag.
• namn – Om man anger ett namn, kommer fältets innehåll att skickas med vid formulärets överföring.
• värde – Anger fältets värde.output lämpar sig också för matematiska beräkningar. Till exempel skulle man kunna fråga efter värden via Prompt-fält och sedan multiplicera dem med varandra.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Siffra 1.",0));
b=parseInt(prompt("Siffra 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Produkten av multiplikationen:</label>
<output name="result" />
</output>
</form>
</body>
</html>När sidan laddas visas ett Prompt-fönster där det första värdet efterfrågas.
Om man bekräftar inmatningen med OK, öppnas ett andra fönster. (Om man klickar på Avbryt i någon av fönstren kommer resultatet att vara NaN, alltså Not a Number).
Om det andra fönstret också bekräftas med OK, skickar skriptet resultatet av multiplikationen som värde till output-fältet.
Fortsättningsvis med framstegsindikatorer med progress
En framstegsindikator kan skapas med hjälp av progress-elementet. Det är intressant att använda det till exempel i samband med nedladdning av filer..gif "HTML & CSS för nybörjare (Del 16): Formulär (4)")
Google tolkar detta element redan. Andra webbläsare som inte känner igen elementet visar dess innehåll.
Ett exempel:
Nedladdningen pågår ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Progress-elementet har två attribut:
• max – Anger hur många steg som behövs totalt.
• value – Här anges hur många steg som redan har slutförts.progress-elementet blir egentligen riktigt intressant när JavaScript kommer in i bilden. Hur en kombination av progress och JavaScript kan användas bäst kan visas bäst med ett exempel.
I detta exempel utgår man från ett formulär som ska fyllas i i flera steg. Följande information efterfrågas i tur och ordning:
• Förnamn
• Efternamn
• Gata
• Postnummer
• Ort
Nu kan du naturligtvis fråga efter dessa få värden på en sida. Men vad händer om användaren måste lämna mycket information? Då kan omfattande formulär verka avskräckande. Det är därför bättre att dela upp formulären på flera sidor.
Antag att du öppnar formuläret.
Här kommer du att bli ombedd att ange ditt förnamn. Statusraden under fältet implementerades med hjälp av elementet progress.
<fieldset id="steg1" style="display: none;"> <p>Förnamn: <input type="text" name="fnamn" size="30"></p> <p><progress max="5" value="1">Steg 1 / 5</progress></p> <p><input type="button" value="Nästa" onclick="nästaSteg(2)"></p> </fieldset>
Väsentliga saker med denna syntax är flera. De enskilda fieldset-elementen sätts först osynliga. Trots att det inte ser ut så vid första anblicken, består formuläret faktiskt av en enda sida. De enskilda fälten har placerats i separata fieldset-element. Dessa fieldset-element (inklusive deras innehåll) är osynliga.
För att de egentligen dolda elementen ska bli synliga när de respektive Nästa- knapparna klickas på, används en JavaScript-switch-funktion. Hur det ser ut kommer att visas senare i den här handledningen.
För tillfället, tillbaka till formuläret. Genom att klicka på Nästa- knapparna guidas du genom formuläret. De progress-elementen visar hur långt du har kommit.
Förresten, det är inte så illa om en webbläsare inte tolkar progress-elementet. Eftersom dessa webbläsare helt enkelt visar innehållet i detta element.
<progress max="5" value="1">Steg 1 / 5</progress>
I stället för framstegsindikationen kan en text enligt schemat Steg 2 / 5 ses.
Formuläret ser ut så här:
<form method="post" action="#"> <fieldset id="steg1" style="display: none;"> <p>Förnamn: <input type="text" name="fnamn" size="30"></p> <p><progress max="5" value="1">Steg 1 / 5</progress></p> <p><input type="button" value="Nästa" onclick="nästaSteg(2)"></p> </fieldset> <fieldset id="steg2" style="display: none;"> <p>Efternamn: <input type="text" name="enamn" size="30"></p> <p><progress max="5" value="2">Steg 2 / 5</progress></p> <p><input type="button" value="Nästa" onclick="nästaSteg(3)"></p> </fieldset> <fieldset id="steg3" style="display: none;"> <p>Gata: <input type="text" name="gata" size="30"></p> <p><progress max="5" value="3">Steg 3 / 5</progress></p> <p><input type="button" value="Nästa" onclick="nästaSteg(4)"></p> </fieldset> <fieldset id="steg4" style="display: none;"> <p>Postnummer: <input type="text" name="postnummer" size="30"></p> <p><progress max="5" value="4">Steg 4 / 5</progress></p> <p><input type="button" value="Nästa" onclick="nästaSteg(5)"></p> </fieldset> <fieldset id="steg5" style="display: none;"> <p>Ort: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Steg 5 / 5</progress></p> <input type="submit" value="Slut"> </fieldset> </form>
Här är tre viktiga saker:
• Varje fieldset-element tilldelas en ID.
• Alla fieldset-element är satta till display: none.
• Funktionen nästaSteg(n) tilldelas knapparna.
Funktionen nästaSteg(n) ser ut så här:
<script>
/* <![CDATA[ */
function nästaSteg(n) {
switch(n) {
case 1:
document.getElementById('steg1').style.display = "block";
break;
case 2:
document.getElementById('steg1').style.display = "none";
document.getElementById('steg2').style.display = "block";
break;
case 3:
document.getElementById('steg2').style.display = "none";
document.getElementById('steg3').style.display = "block";
break;
case 4:
document.getElementById('steg3').style.display = "none";
document.getElementById('steg4').style.display = "block";
break;
case 5:
document.getElementById('steg4').style.display = "none";
document.getElementById('steg5').style.display = "block";
break
default: break;
}
}
nästaSteg(1);
/* ]]> */
</script>
Denna funktion visar det aktuella fieldset-elementet och döljer de andra fieldset-elementen. Se till att placera funktionen efter definitionen av fälten. Så det bästa är att placera den bakom det avslutande </form>.
