A HTML5 tel egy mezőtípust biztosít, amely telefonos számokkal való használathoz lett kialakítva.
A telefonszámod: <input type="tel" name="telefon">
Okostelefonokon és tableteken a mezőre kattintva a telefonszám megadásához a számok billentyűzete jelenik meg.
Internetcím mezők url típussal
A url típusú mezők internetcímek megadására szolgálnak.
<input type="url" />
A URL mezők automatikusan validálódnak. A böngészőknek az ilyen típusú mezőknél ellenőrizniük kell, hogy valóban a helyes szintaktikájú URL-t adták-e meg.
Kimeneti mező output
Az output mezővel tartalmakat lehet kiírni. Például JavaScript használatával érdekes lehet. Ezzel a mezővel változók kiírására lehet használni. Emellett a mezőt azonban számított értékek kimenetére is lehet használni. A mező kizárólag az adatkimenet számára szolgál. Felhasználói bemeneteket nem lehet megadni.
Példa:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hello,"
wort2="Világ!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Ebben a példában két változót deklaráltak. Ezeknek a változóknak a tartalmát az output mezőben kell megjeleníteni.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Az Opera böngésző a kívánt értéket megjeleníti. Azok a böngészők, amelyek nem tudnak mit kezdeni az output mezővel, nem jelenítenek semmit.output ismeri a három attribútumot.
• form – Az űrlap, amelyben az output elem található.
• for – Hivatkozás a mezőkre vagy értékekre, amelyekre az output mező vonatkozik. Az értékeket és mezőket szóközzel kell elválasztani egymástól.
• name – Ha megad egy nevet, az űrlap elküldésekor a mező tartalma átkerül.
• value – Megadja a mező értékét.output természetesen alkalmas matematikai számításokhoz is. Például prompt mezők segítségével lehet értékeket bekérni és ezeket egymással megszorozni.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Szám 1.",0));
b=parseInt(prompt("Szám 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>A szorzás eredménye:</label>
<output name="result" />
</output>
</form>
</body>
</html>Ha meglátogatjuk az oldalt, megnyílik egy prompt ablak, amelyben az első értéket kell megadni.
Ha az első értéket a OK gombbal megerősítjük, megnyílik egy második ablak. (Az egyik vagy a két ablakban a Mégsem gombra kattintva az eredmény NaN, vagyis Nem szám lesz.)
Ha a második ablakot is a OK gombbal megerősítjük, a szkriptum a szorzás eredményét átadja az output mezőbe mint érték.
Előrehaladási jelzők progress
Az előrehaladási jelzőt a progress elem segítségével lehet megvalósítani. Például fájlok letöltésekor érdekes lehet..gif "HTML és CSS kezdőknek (16. rész): Űrlapok (4)")
A Google már értelmezi ezt az elemet. Más böngészők, amelyek nem ismerik, az elem tartalmát jelenítik meg.
Példa:
A letöltés folyamatban van ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
A progress elem ismer két attribútumot:
• max – Meghatározza, mennyi lépésre van szükség összesen.
• value – Megadja, hogy hány lépés van már teljesítve.
A progress elem igazán érdekessé válik, amikor bekapcsoljuk a JavaScript-et. Hogyan lehet kihasználni a progress és a JavaScript kombinációját, azt legjobban egy példán keresztül lehet bemutatni.
Ebben a példában egy űrlapból indulunk ki, amelyet több lépésben kell kitölteni. Sorban a következő információkat kérdezzük ki:
• Keresztnév
• Vezetéknév
• Utca
• Irányítószám
• Hely
Ezt a néhány értéket természetesen egy oldalon lehet lekérdezni. De mi van, ha a felhasználótól nagyon sok információt kell begyűjteni? Ekkor a bonyolult űrlapok inkább ijesztő hatást keltenek. Ezért jobb, ha az űrlapokat több oldalra osztjuk fel.
Feltételezve, hogy az űrlapot meghívjátok.
Itt megkérik a keresztnevedet. A mező alatt a progress-elemmel lett megvalósítva az állapotsor.
<fieldset id="lepes1" style="display: none;"> <p>Vezetéknév: <input type="text" name="vnev" size="30"></p> <p><progress max="5" value="1">1. lépés / 5</progress></p> <p><input type="button" value="Tovább" onclick="kovetkezoLepes(2)"></p> </fieldset>
Ezen a szintaxison több dolog is fontos. Az egyes fieldset-elemeket először láthatatlanná teszik. Mivel még ha első pillantásra nem is úgy néz ki, de valójában az űrlap csak egy oldalból áll. A különböző mezőket külön fieldset-elemekbe helyezték. És ezek a fieldset-elemek (és tartalmuk) nem láthatók.
Azért, hogy az igazából rejtett elemek kattintás után láthatóvá váljanak, egy JavaScript-switch-funkciót használnak. Hogy néz ki ez, azt a tutoriál további részében mutatjuk be.
Mellesleg nem is olyan vészes, ha a böngésző nem értelmezi a progress-elemet. Mert ezek a böngészők egyszerűen az elem tartalmát jelenítik meg.
<progress max="5" value="1">1. lépés / 5</progress>
Az előrehaladási jelző helyett egy olyan szöveg látható, mint például 2. lépés / 5.
Az űrlap így néz ki:
<form method="post" action="#"> <fieldset id="lepes1" style="display: none;"> <p>Vezetéknév: <input type="text" name="vnev" size="30"></p> <p><progress max="5" value="1">1. lépés / 5</progress></p> <p><input type="button" value="Tovább" onclick="kovetkezoLepes(2)"></p> </fieldset> <fieldset id="lepes2" style="display: none;"> <p>Keresztnév: <input type="text" name="knev" size="30"></p> <p><progress max="5" value="2">2. lépés / 5</progress></p> <p><input type="button" value="Tovább" onclick="kovetkezoLepes(3)"></p> </fieldset> <fieldset id="lepes3" style="display: none;"> <p>Utca: <input type="text" name="utca" size="30"></p> <p><progress max="5" value="3">3. lépés / 5</progress></p> <p><input type="button" value="Tovább" onclick="kovetkezoLepes(4)"></p> </fieldset> <fieldset id="lepes4" style="display: none;"> <p>Irányítószám: <input type="text" name="irsz" size="30"></p> <p><progress max="5" value="4">4. lépés / 5</progress></p> <p><input type="button" value="Tovább" onclick="kovetkezoLepes(5)"></p> </fieldset> <fieldset id="lepes5" style="display: none;"> <p>Város: <input type="text" name="varos" size="30"></p> <p><progress max="5" value="5">5. lépés / 5</progress></p> <input type="submit" value="Vége"> </fieldset> </form>
Itt három dolog a lényeges:
• Mindegyik fieldset-elemhez hozzárendelnek egy azonosítót.
• Minden fieldset-elemet láthatatlanná tesznek a display: none beállításával.
• A gombokhoz a kovetkezoLepes(n) függvény van hozzárendelve.
A kovetkezoLepes(n) függvény a következőképpen néz ki:
<script>
/* <![CDATA[ */
function kovetkezoLepes(n) {
switch(n) {
case 1:
document.getElementById('lepes1').style.display = "block";
break;
case 2:
document.getElementById('lepes1').style.display = "none";
document.getElementById('lepes2').style.display = "block";
break;
case 3:
document.getElementById('lepes2').style.display = "none";
document.getElementById('lepes3').style.display = "block";
break;
case 4:
document.getElementById('lepes3').style.display = "none";
document.getElementById('lepes4').style.display = "block";
break;
case 5:
document.getElementById('lepes4').style.display = "none";
document.getElementById('lepes5').style.display = "block";
break
default: break;
}
}
kovetkezoLepes(1);
/* ]]> */
</script>
Ez a függvény megjeleníti az aktuális fieldset-elemet, és elrejti a többi fieldset-elemet. Fontos, hogy figyeljétek meg, a függvényt az elrendelési mezők mögé tegyétek. Tehát legjobb, ha a záró </form> mögé teszitek el.
