HTML5, naudojamas tel laukų tipas, kuris skirtas naudoti su telefono numeriais.
Tavo telefono numeris: <input type="tel" name="telefon">
Ant išmaniuosius ir planšetinius įrenginius spustelėjus lauką atsidaro skaitmenų klaviatūra telefono numerio įvedimui.
Laukai interneto adresams su url
Laukai, kurie yra tipo url, skirti interneto adresų įvedimui.
<input type="url" />
URL laukai automatiškai patikrinami. Naršyklės turėtų patikrinti, ar įvestas sintaksiškai teisingas URL.
Išvesties laukas su output
Su output lauku galima išvesti turinį. Tai gali būti naudinga, pavyzdžiui, susiejant su JavaScript. Taip šis laukas gali būti naudojamas išvedant kintamuosius. Taip pat galima naudoti lauką skaičiuotų reikšmių išvedimui. Laukas skirtas tik duomenų išvedimui. Naudotojo įvestis neleidžiama.
Pavyzdys:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hallo,"
wort2="pasauli!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Šiame pavyzdyje deklaruoti du kintamieji. Šių kintamųjų turinys turėtų būti rodomas output lauke.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Naršyklės kaip „Opera“ rodo norimą reikšmę. Naršyklės, kurios negali suprasti output, nieko nerodo.output turi tris atributus.
• form – Forma, kurioje yra output-elementas.
• for – Suformuoja sąryšį su laukais ar vertėmis, į kuriuos nukreiptas output laukas. Vertės ir laukai turi būti atskirti tarpais.
• name – Nurodžius vardą, lauko turinys bus perduotas pateikiant formą.
• value – Nurodo lauko vertę.output taip pat tinka matematiniams skaičiavimams. Pavyzdžiui, galima paprašyti vartotojo įvesti reikšmes per prompt laukus ir tada juos sudauginti.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Įveskite skaičių 1.",0));
b=parseInt(prompt("Įveskite skaičių 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Sudauginimo rezultatas:</label>
<output name="result" />
</output>
</form>
</body>
</html>Puslapį atidarę, atsiranda Prompt langas, kuriame pirmoji reikšmė klausiama.
Potvrzdę atliekant Gerai, atsidaro antras langas. (Paspaudus bet kurį iš šių langų mygtuką Atšaukti, rezultatas bus NaN,, tai reiškia Ne skaičius).
Patvirtinus antrąjį langą taip pat su Gerai, skriptas perduoda daugybos rezultatą kaip output lauko reikšmę.
Progreso juostos su progress
Progreso juostą galima sukurti naudojant progress elementą. Tai gali būti naudinga, pavyzdžiui, atliekant failų atsisiuntimą..gif "HTML ir CSS pradedantiesiems (16 dalis): Formos (4)")
„Google“ jau interpretuoja šį elementą. Kiti naršyklės, kurios jo nežino, rodo jo turinį.
Pavyzdys:
Atsisiuntimas vyksta ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Progreso elementas turi du atributus:
• max – Nurodo, kiek iš viso yra žingsnių.
• value – Nurodo, kiek žingsnių jau atlikta.progress elementas iš tikrųjų tampa įdomus tik kai naudojamas JavaScript. Kaip kombinuoti progress ir JavaScript, geriausiai paaiškina pavyzdys.
Šiame pavyzdyje naudojama daugialipe forma, kuri turi būti užpildyta keliais etapais. Seka pagaldui informacija:
• Vardas
• Pavardė
• Gatvė
• Pašto kodas
• Miestas
Dabar, žinoma, galite paklausti šių nedaug kintamųjų viename puslapyje. Bet kas, jei norėtumėte gauti labai daug informacijos iš vartotojo? Tada išsami formos atrodo gan įbauginančios. Todėl geriau, jei formas padalintume į kelias skirtingas puslapiuose.
Pavyzdžiui, atidarote formą.
progress elementą.
<fieldset id="žingsnis1" style="display: none;"> <p>Vardas: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">žingsnis 1 / 5</progress></p> <p><input type="button" value="Toliau" onclick="pereitiZingsnį(2)"></p> </fieldset>
Svarbu šioje sintaksėje yra keli dalykai. Kiekvienas fieldset elementas iš pradžių yra nustatomas kaip nematomas. Nors tai iš pirmo žvilgsnio gali neatrodyti taip, forma iš tikrųjų yra tik vieno puslapio. Kiekvienas laukas pateiktas atskirame fieldset elemente. Ir šie fieldset elementai (kartu su jų turiniu) nėra matomi.
Toliau- mygtuką, yra naudojama JavaScript switch funkcija. Kaip ji atrodo, bus parodyta šio vadovo vėlesniuose etapuose.
Toliau- mygtukus, jus veda per formą. Progresai elementai rodo, kaip toli jūs esate pažengęs.
progress elemento. Kadangi tokių naršyklių, taip pat tiesiog rodo šio elemento turinį.
<progress max="5" value="1">žingsnis 1 / 5</progress>
žingsnis 2 / 5.
Forma atrodo taip:
<form method="post" action="#"> <fieldset id="žingsnis1" style="display: none;"> <p>Vardas: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">žingsnis 1 / 5</progress></p> <p><input type="button" value="Toliau" onclick="pereitiZingsnį(2)"></p> </fieldset> <fieldset id="žingsnis2" style="display: none;"> <p>Pavardė: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">žingsnis 2 / 5</progress></p> <p><input type="button" value="Toliau" onclick="pereitiZingsnį(3)"></p> </fieldset> <fieldset id="žingsnis3" style="display: none;"> <p>Gatvė: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">žingsnis 3 / 5</progress></p> <p><input type="button" value="Toliau" onclick="pereitiZingsnį(4)"></p> </fieldset> <fieldset id="žingsnis4" style="display: none;"> <p>Pašto kodas: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">žingsnis 4 / 5</progress></p> <p><input type="button" value="Toliau" onclick="pereitiZingsnį(5)"></p> </fieldset> <fieldset id="žingsnis5" style="display: none;"> <p>Miestas: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">žingsnis 5 / 5</progress></p> <input type="submit" value="Pabaiga"> </fieldset> </form>
Svarbu yra trys dalykai čia:
• Kiekvienam fieldset elementui yra suteikta ID.
• Visi fieldset elementai yra nustatyti kaip display: none.
• Mygtukams priskiriama funkcija pereitiZingsnį(n).
Funkcija pereitiZingsnį(n) atrodo taip:
<script>
/* <![CDATA[ */
function pereitiZingsnį(n) {
switch(n) {
case 1:
document.getElementById('žingsnis1').style.display = "block";
break;
case 2:
document.getElementById('žingsnis1').style.display = "none";
document.getElementById('žingsnis2').style.display = "block";
break;
case 3:
document.getElementById('žingsnis2').style.display = "none";
document.getElementById('žingsnis3').style.display = "block";
break;
case 4:
document.getElementById('žingsnis3').style.display = "none";
document.getElementById('žingsnis4').style.display = "block";
break;
case 5:
document.getElementById('žingsnis4').style.display = "none";
document.getElementById('žingsnis5').style.display = "block";
break
default: break;
}
}
pereitiZingsnį(1);
/* ]]> */
</script>
Ši funkcija rodo esamą fieldset elementą ir paslėpia kitus fieldset elementus. Būtinai atkreipkite dėmesį, kad funkciją turite įdėti po laukų apibrėžimo. Taigi, geriausiai ją įdėkite prie uždaromo </form> žymės.
