HTML5 piedāvā tel lauka veidu, kas ir paredzēts telefonu numuru lietošanai.
Tavs telefona numurs: <input type="tel" name="telefon">
Uzklikšķinot uz lauka, uz smartphone un planšetdatora parādās ciparu tastatūra, lai ievadītu telefona numuru.
Lauki internetadresēm ar url
Lauki ar url tipu ir paredzēti internetadreses ievadei.
<input type="url" />
URL lauki tiek automātiski validēti. Pārlūki šādus laukus pārbauda, vai ir ievadīta sintaktiski pareiza URL.
Izvades lauks ar output
Ar output-lauku var izvadīt saturu. Tas ir interesanti, piemēram, saistībā ar JavaScript. Tātad šis lauks šeit var kalpot, lai izvadītu mainīgos. Taču lauks var būt izmantots arī, lai izvadītu aprēķinātus datus. Lauks ir paredzēts tikai datu izvadei. Tātad lietotāja ievades nav iespējamas.
Piemērs:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Sveiki,"
wort2="pasaulē!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Šajā piemērā tika deklarēti divi mainīgie. Šo mainīgo saturus vajadzētu parādīt output-laukā.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Pārlūki, piemēram, Opera, rāda vēlamo vērtību. Savukārt pārlūki, kas neko nesaprot par output, neko nerāda.output zina trīs atribūtus:
• form – Forma, kurā attiecīgais output elements ir iekļauts.
• for – Izveido saiti uz laukiem vai vērtībām, uz kurām attiecas output lauks. Vērtības un lauki ir atdalīti ar tukšumiem.
• name – Norādot nosaukumu, lauka saturs tiek pārsūtīts, iesniedzot formu.
• value – Norāda lauka vērtību.output protams noder arī matemātiskiem aprēķiniem. Piemēram, izmantojot Prompt laukus, varat pieprasīt vērtības un pēc tam tās savā starpā reizināt.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Cipars 1.",0));
b=parseInt(prompt("Cipars 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Reizināšanas rezultāts:</label>
<output name="result" />
</output>
</form>
</body>
</html>
Apstiprinot ievadi ar OK, atveras otrais logs. (Ja kādā no šiem logiem noklikšķiniet uz Atcelt, rezultāts būs NaN, t.i., Nav skaitlis).
Arī otro logu apstiprinot ar OK, skripts nodod reizināšanas rezultātu kā vērtību output-laukam.
Progress elements ar progress
Progresu var rādīt, izmantojot progress-elementu. Tas ir interesanti, piemēram, lejupielādes faila gadījumā..gif "HTML un CSS iesācējiem (16. daļa): Formas (4)")
Google šo elementu jau interpretē. Citi pārlūki, kas nezina šo elementu, rāda tā saturu.
Piemērs:
Lejupielāde norit ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>progress-elementam ir divi atribūti:
• max – Nosaka, cik kopā soļus nepieciešams.
• value – Norāda, cik soļi jau ir izdarīti.progress-elements tiešām kļūst interesants, kad iesaistās JavaScript. Kā var izmantot kombināciju no progress un JavaScript, aizvien labāk var parādīt, pielietojot piemēru.
Šajā piemērā iznāk, ka tiek pieņemts, ka formulārs jāaizpilda vairākiem soļiem. Pēc kārtas tiek pieprasīta šāda informācija:
• Vārds
• Uzvārds
• Iela
• Pasta indekss
• Pilsēta
Tagad, protams, šos retos vērtības varat pieprasīt vienā lapā. Bet ko darīt, ja lietotājam ir jāievāc daudz informācijas? Tad plašie veidlapas formi atbaida. Tāpēc ir labāk sadalīt formas daudzās lapās.
Pieņemsim, ka atverat formu.
Šeit tiks jautāts par jūsu vārdu. Progresu rindkopa zem lauka ir ieviesta ar progress-elementu.
<fieldset id="solis1" style="display: none;"> <p>Vārds: <input type="text" name="vards" size="30"></p> <p><progress max="5" value="1">Solis 1 / 5</progress></p> <p><input type="button" value="Tālāk" onclick="nakamaisSolis(2)"></p> </fieldset>
Šajā sintaksē svarīgi ir vairāki faktori. Katrs atsevišķais fieldset-elements vispirms tiek noslēpts. Jo, lai arī pirmajā acu uzmetienā tas var nebūt skaidrs, forma faktiski sastāv tikai no vienas lapas. Atsevišķie lauki ir ievietoti katrā savā fieldset-elementā. Un šie fieldset-elementi (ieskaitot to saturu) nav redzami.
Lai īsti paslēptie elementi pēc atbilstošo Tālāk- pogu noklikšķināšanas kļūtu redzami, tiek izmantota JavaScript switch-funkcija. Kā tā izskatās, tiks parādīts šīs pamācības turpmākajā gaitā.
Bet vispirms atgriežamies pie formas. Noklikšķinot uz Tālāk- pogām, jūs tiksiet vadīts caur formu. Progresu elementi parāda, cik tālu esat progresējis.
progress-elementu. Jo šie pārlūki vienkārši rādīs šī elementa saturu.
<progress max="5" value="1">Solis 1 / 5</progress>
Vietā progresa rādītāja patiešām redzams teksts pēc šāda shēmas - Solis 2 / 5.
Forma izskatās šādi:
<form method="post" action="#"> <fieldset id="solis1" style="display: none;"> <p>Vārds: <input type="text" name="vards" size="30"></p> <p><progress max="5" value="1">Solis 1 / 5</progress></p> <p><input type="button" value="Tālāk" onclick="nakamaisSolis(2)"></p> </fieldset> <fieldset id="solis2" style="display: none;"> <p>Uzvārds: <input type="text" name="uzvards" size="30"></p> <p><progress max="5" value="2">Solis 2 / 5</progress></p> <p><input type="button" value="Tālāk" onclick="nakamaisSolis(3)"></p> </fieldset> <fieldset id="solis3" style="display: none;"> <p>Iela: <input type="text" name="iela" size="30"></p> <p><progress max="5" value="3">Solis 3 / 5</progress></p> <p><input type="button" value="Tālāk" onclick="nakamaisSolis(4)"></p> </fieldset> <fieldset id="solis4" style="display: none;"> <p>>Pasta indekss: <input type="text" name="pasta_indekss" size="30"></p> <p><progress max="5" value="4">Solis 4 / 5</progress></p> <p><input type="button" value="Tālāk" onclick="nakamaisSolis(5)"></p> </fieldset> <fieldset id="solis5" style="display: none;"> <p>>Pilsēta: <input type="text" name="pilseta" size="30"></p> <p><progress max="5" value="5">Solis 5 / 5</progress></p> <input type="submit" value="Beigas"> </fieldset> </form>
Šeit svarīgi ir trīs faktori:
• Katram fieldset-elementam tiek piešķirta ID.
• Visiem fieldset-elementiem tiek noteikts display: none.
• Pogai tiek piešķirta funkcija nakamaisSolis(n).
Funkcija nakamaisSolis(n) izskatās šādi:
<script>
/* <![CDATA[ */
function nakamaisSolis(n) {
switch(n) {
case 1:
document.getElementById('solis1').style.display = "block";
break;
case 2:
document.getElementById('solis1').style.display = "none";
document.getElementById('solis2').style.display = "block";
break;
case 3:
document.getElementById('solis2').style.display = "none";
document.getElementById('solis3').style.display = "block";
break;
case 4:
document.getElementById('solis3').style.display = "none";
document.getElementById('solis4').style.display = "block";
break;
case 5:
document.getElementById('solis4').style.display = "none";
document.getElementById('solis5').style.display = "block";
break
default: break;
}
}
nakamaisSolis(1);
/* ]]> */
</script>
Šī funkcija parāda pašreizējo fieldset-elementu un paslēpj pārējos fieldset-elementus. Noteikti uzmanieties, lai funkciju ievietotu aiz lauka definīcijas. Tāpēc vislabāk to ievietojiet aiz aizverotā </form>.
