HTML5 poskytuje typ pola tel, ktorý je určený pre použitie v súvislosti s telefónnymi číslami.
Tvoje telefónne číslo: <input type="tel" name="telefon">
Na smartfónoch a tabletách sa po kliknutí na pole zobrazí klávesnica na zadávanie telefónneho čísla.
Pole pre internetové adresy s url
Poly typu url sú určené na zadávanie internetových adries.
<input type="url" />
Poly URL sa automaticky validujú. Prehliadače by mali skontrolovať, či bola zadaná syntakticky správna adresa URL.
Výstupné pole s output
S poľom output je možné vypisovať obsah. Je to zaujímavé napríklad v kombinácii s JavaScriptom. Toto pole môže slúžiť na výstup premenných. Rovnako sa však pole môže použiť aj na výstup vypočítaných hodnôt. Pole je určené výhradne na výstup údajov. Vstup od používateľa nie je možný.
Príklad:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Ahoj,"
wort2="svet!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>V tomto príklade boli deklarované dve premenne. Obsahy týchto premenných by sa mali zobraziť v poli output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Prehliadače ako Opera zobrazia požadovanú hodnotu. Prehliadače, ktoré nevedia pracovať s output, naopak nič nezobrazia.output pozná tri atribúty.
• form – Formulár, v ktorom je obsiahnutý element output.
• for – Navŕže sa na polia alebo hodnoty, na ktoré sa odkazuje pole výstupu. Hodnoty a polia musia byť od seba oddelené medzerami.
• name – Ak je uvedený názov, obsah poľa sa odosle pri odosielaní formulára.
• value – Stanovuje hodnotu poľa.output je samozrejme vhodné aj na matematické výpočty. Napríklad pomocou okien Prompt môžete požiadať o hodnoty a tie potom navzájom vynásobiť.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Číslo 1.",0));
b=parseInt(prompt("Číslo 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Výsledok násobenia:</label>
<output name="result" />
</output>
</form>
</body>
</html>Keď prídete na stránku, otvorí sa okno Prompt, cez ktoré sa požiada o prvú hodnotu.
Pokiaľ potvrdíte vstup kliknutím na OK, otvorí sa druhé okno. (Ak kliknete na Zrušiť v jednom z týchto okien, výsledok bude NaN,, teda Not a Number).
Pokiaľ potvrdíte aj druhé okno kliknutím na OK,, skript prenesie výsledok násobenia do poľa output.
Ukazovatele priebehu s progress
Priebežný stav je možné zobraziť prostredníctvom prvku progress. Je to zaujímavé napríklad v súvislosti s prenosom súborov..gif "HTML & CSS pre začiatočníkov (časť 16): Formuláre (4)")
Google tento prvok už interpretuje. Iné prehliadače, ktoré tento prvok nepoznajú, zobrazia jeho obsah.
Príklad:
Sťahovanie prebieha ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Prvok progress pozná dva atribúty:
• max – Určuje, koľko celkových krokov je potrebných.
• value – Určuje, koľko krokov už bolo vykonaných.
Prvok progress je skutočne zaujímavý až vtedy, ak sa zapojí JavaScript. Ako možno využiť kombináciu progress a JavaScript sa najlepšie ukáže na príklade.
V tomto prípade sa ide z formulára, ktorý by mal byť vyplnený v niekoľkých krokoch. Postupne sa odpýtajú nasledujúce informácie:
• Meno
• Priezvisko
• Ulica
• PSČ
• Mesto
Teraz samozrejme môžete tieto niekoľko hodnôt získať na jednej stránke. Čo však, ak od používateľa treba získať veľmi veľa informácií? Rozsiahle formuláre pôsobia skôr odrádzajúco. Preto je lepšie rozdeliť formuláre na viacero stránok.
Predpokladajme, že ste otvorili formulár.
Tu sa budete pýtať na svoje krstné meno. Riadok stavu pod polom bol realizovaný pomocou prvku progress.
<fieldset id="schritt1" style="display: none;"> <p>Meno: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Ďalej" onclick="naechserSchritt(2)"></p> </fieldset>
Na tejto syntaxi sú dôležité niektoré veci. Jednotlivé prvky fieldset sú najprv nastavené na neviditeľné. Aj keď sa to na prvý pohľad nemusí zdať tak, formulár skutočne pozostáva len z jednej stránky. Jednotlivé polia boli vložené do vlastných prvkov fieldset. A tieto prvky fieldset (vrátane ich obsahu) nie sú viditeľné.
Aby sa v skutočnosti skryté prvky stali viditeľnými po kliknutí na príslušné tlačidlá Ďalej, používa sa funkcia JavaScriptového switch. Ako to vyzerá, sa ukáže v ďalšom priebehu tohto návodu.
Ale najprv sa vráťme späť k formuláru. Kliknutím na tlačidlá Ďalej sa prejdete formulárom. Prvky progress ukazujú, ako ďaleko ste pokročili.
V skutočnosti nie je veľmi zlé, ak prehliadač nepovolí prvok progress. Tieto prehliadače potom jednoducho zobrazia obsah tohto prvku.
<progress max="5" value="1">Krok 1 / 5</progress>
Namiesto zobrazenia pokroku sa zobrazí text podľa vzorca Krok 2 / 5.
Formulár vyzerá nasledovne:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Meno: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Ďalej" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Priezvisko: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Krok 2 / 5</progress></p> <p><input type="button" value="Ďalej" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Ulica: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Krok 3 / 5</progress></p> <p><input type="button" value="Ďalej" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>PSČ: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Krok 4 / 5</progress></p> <p><input type="button" value="Ďalej" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Mesto: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Krok 5 / 5</progress></p> <input type="submit" value="Koniec"> </fieldset> </form>
Je tu dôležitých troch vecí:
• Každému prvku fieldset je priradená identifikácia (ID).
• Všetky prvky fieldset sú nastavené na display: none.
• Tlačidlám je priradená funkcia naechsterSchritt(n).
Funkcia naechsterSchritt(n) vyzerá nasledovne:
<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áto funkcia zobrazí aktuálny prvok fieldset a skryje ostatné prvky fieldset. Dôležité je umiestniť túto funkciu za definíciu polí. Umiestnite ju teda najlepšie za uzatváraciu značku </form>.
