HTML5 poskytuje s tel typ pole, které je určeno k použití v souvislosti s telefonními čísly.
Vaše telefonní číslo: <input type="tel" name="telefon">
Na chytrých telefonech a tabletech se při klepnutí na pole otevře klávesnice pro zadání telefonního čísla.
Pole pro internetové adresy s url
Pole typu url jsou určena k zadávání internetových adres.
<input type="url" />
Pole URL se automaticky validují. Prohlížeče by u těchto polí měly ověřit, zda je skutečně zadána syntakticky správná adresa URL.
Výstupní pole s output
S polem output lze vypisovat obsah. To je zajímavé například v souvislosti s JavaScriptem. Takto může toto pole sloužit k výstupu proměnných. Pole lze však také použít k výstupu vypočtených hodnot. Pole je určeno výhradně k výstupu dat. Vstupy uživatele tedy nejsou možné.
Příklad:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Ahoj,"
wort2="světe!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>V tomto příkladu byly deklarovány dvě proměnné. Obsah těchto proměnných by měl být zobrazen v poli output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Prohlížeče jako Opera zobrazí požadovanou hodnotu. Prohlížeče, které s output neumí pracovat, však nic nezobrazí.output má tři atributy.
• form – Formulář, ve kterém je prvek output obsažen.
• for – Navazuje se na pole nebo hodnoty, na které se odkazuje výstupní pole. Hodnoty a pole musí být odděleny mezerou.
• name – Pokud je zde uvedeno jméno, je obsah pole odeslán spolu s odesláním formuláře.
• value – Udává hodnotu pole.output se samozřejmě hodí i pro matematické výpočty. Například by se pomocí dialogových oken Prompt dali získat hodnoty a ty pak mezi sebou vynásobit.
<!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ýsledek násobení:</label>
<output name="result" />
</output>
</form>
</body>
</html>Při zobrazení stránky se otevře dialogové okno, kterým se vyžaduje první hodnota.
Pokud je vstup potvrzen pomocí OK, otevře se druhé okno. (Pokud je jedno z oken zavřeno kliknutím na Zrušit, bude výsledek NaN, tedy Ne číslo).
Pokud je potvrzeno i druhé okno kliknutím na OK, skript předá výsledek násobení jako hodnotu do pole output.
Ukazatel průběhu s progress
Pokrok lze zobrazit pomocí prvku progress. To je zajímavé například při stahování souborů..gif "HTML a CSS pro začátečníky (část 16): Formuláře (4)")
Google již prvek interpretuje. Jiné prohlížeče, které prvek neznají, zobrazí jeho obsah.
Příklad:
Stahování probíhá ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Prvek progress zná dva atributy:
• max – Určuje, kolik celkově kroků je třeba.
• value – Tímto se určuje, kolik kroků již bylo provedeno.
Prvek progress je skutečně zajímavý, až když jde do hry JavaScript. Jak lze využít kombinaci progress a JavaScriptu, nejlépe ukáže na příkladu.
V tomto příkladu se vychází z formuláře, který má být vyplněn v několika krocích. Postupně se získávají následující informace:
• Křestní jméno
• Příjmení
• Ulice
• PSČ
• Město
Samozřejmě by bylo možné tyto málo hodnot získat na jedné stránce. Ale co když uživatel musí poskytnout velké množství informací? Pak rozsáhlé formuláře spíše odrazují. Lepší je tedy rozdělit formuláře do více stránek.
Předpokládejme, že otevřete formulář.
Zde budete požádáni o své křestní jméno. Požadovaný stavový řádek pod políčkem byl realizován pomocí prvku progress.
<fieldset id="schritt1" style="display: none;"> <p>>Křestní jméno: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Pokračovat" onclick="naechserSchritt(2)"></p> </fieldset>
Na této syntaxi jsou klíčové několik věcí. Jednotlivé prvky fieldset jsou nejprve nastaveny jako neviditelné. I když se to na první pohled nemusí zdát, formulář vlastně skládá jen z jedné stránky. Jednotlivá pole byla vložena do vlastních prvků fieldset. Tyto prvky fieldset (včetně jejich obsahu) nejsou viditelné.
Aby se vlastně skryté prvky staly viditelnými po kliknutí na příslušné tlačítka „Pokračovat”, je použita JavaScriptová funkce switch. Jak vypadá, je ukázáno v dalším průběhu tohoto tutoriálu.
Nejprve se však vraťme k formuláři. Při kliknutí na tlačítka „Pokračovat” budete navigováni formulářem. Prvky progress ukazují, jak daleko jste postoupili.
Ještě když není tak závažné, pokud prohlížeč prvek progress nerozumí. Tyto prohlížeče prostě zobrazí obsah tohoto prvku.
<progress max="5" value="1">Krok 1 / 5</progress>
Namísto zobrazování pokroku je tedy vidět text podle schématu Krok 2 / 5.
Formulář vypadá následovně:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Křestní jméno: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Krok 1 / 5</progress></p> <p><input type="button" value="Pokračovat" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Příjmení: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Krok 2 / 5</progress></p> <p><input type="button" value="Pokračovat" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Ulice: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Krok 3 / 5</progress></p> <p><input type="button" value="Pokračovat" 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="Pokračovat" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Město: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Krok 5 / 5</progress></p> <input type="submit" value="Konec"> </fieldset> </form>
Zde jsou tři důležité věci:
• Každému prvku fieldset je přiděleno ID.
• Všechny prvky fieldset jsou nastaveny na zobrazení: žádné.
• Tlačítkům je přiřazena funkce naechsterSchritt(n).
Funkce naechsterSchritt(n) vypadá následovně:
<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>
Tato funkce zobrazí aktuální prvek fieldset a skryje ostatní prvky fieldset. Ujistěte se, že tuto funkci umístíte za definici polí. Umístěte ji tedy nejlépe za uzavírací </form>.
