Formuláre

1. Formuláre Telematické služby Ing. Marián Pecko, PhD.

2. <form> <p><label>Meno zákazníka:<input></label></p> <fieldset> <legend>Veľkosť pizze</legend> <p><label> <inputtype="radio"name="size">Malá</label></p> <p><label> <inputtype="radio"name="size">Stredná</label></p> <p><label> <inputtype="radio"name="size">Veľká</label></p> </fieldset> <fieldset> <legend>Prílohy</legend> <p><label> <inputtype="checkbox">Slanina</label></p> <p><label> <inputtype="checkbox">Extra syr</label></p> <p><label> <inputtype="checkbox">Cibuľa</label></p> <p><label> <inputtype="checkbox">Huby</label></p> </fieldset> </form> @MP/TMS 2012

3. HTML <form> tag • predstavuje súbor formulárových prvkov, z ktorých niektoré môžu predstavovať editovateľné hodnoty, ktoré môžu byť odoslané na server na spracovanie. • atribúty • globálne • accept-charset - kódovanie znakov, ktoré má byť použité pre odoslanie • action – URL kam sa posiela formulár na spracovanie • autocomplete – on, off (v predvolenom nastavení budú mať prvky input stav automatického doplňovania nastavené na vypnuté) • enctype - application/x-www-form-urlencoded (predvolene ak chýba), multipart/form-data, text/plain • method – get (predvolene ak chýba, dáta sa budú posielať ako súčasť URL), post (odosielané dáta nie sú vidieť, používa sa pri dlhších formulároch, citlivých údajoch,...) • name - meno formulára v rámci kolekcie formulárov. Hodnota nesmie byť prázdny reťazec, a hodnota musí byť jedinečná medzi formulárovými prvkami v kolekcii formulárov, v ktorej je, ak existuje. • novalidate – bool atribút; naznačuje, že formulár počas odosielania nebude validovaný • target – mená kontextu prehliadania <form action="http://www.google.com/search" method="get"> <label>Google: <input type="search" name="q"></label> <input type="submit" value="Hľadať..."> </form> @MP/TMS 2012

4. HTML <fieldset> tag • predstavuje súbor ovládacích prvkov formuláru voliteľne zoskupené pod spoločným názvom • atribúty • globálne • disabled – bool atribút; spôsobí, že všetci potomkovia prvku fieldset budú zakázaní, s výnimkou tých, ktoré sú potomkami prvku legend • form - pre explicitné spojenie prvku fieldset s jeho formulárovým vlastníkom • name - meno prvku <fieldsetname="clubfields" disabled> <legend> <label><inputtype="checkbox" name="club"> Použiť klubovú kartu</label> </legend> <p><label>Názov na karte: <inputname="clubname" required></label></p> <p><label>Číslo karty: <inputname="clubnum" required pattern="[-0-9]+"></label></p> <p><label>Dátum expirácie: <inputname="clubexp" type="month"></label></p> </fieldset> @MP/TMS 2012

5. HTML <legend> tag • predstavuje nadpis pre obsahu rodičovského prvku fieldset • atribúty • globálne @MP/TMS 2012

6. HTML <label> tag • predstavuje titulok v používateľskom rozhraní. Titulok môže byť spojený s konkrétnym ovládacím prvkom formulára, a to buď použitím atribútu for, alebo tým, že sa vloží ovládací prvok do vnútra prvku label • atribúty • globálne • form - pre explicitné spojenie prvku fieldset s jeho formulárovým vlastníkom • for - môže byť špecifikovaný pre označenie ovládacieho prvku formulára, s ktorým má byť titulok spojený. Ak je atribút daný, musí byť hodnota atribútu rovná hodnote idtitulkovaného prvku v rovnakom dokumente ako je popis prvku. <labelfor="male">Muž</label> <inputtype="radio" name="sex" id="male" value="male"><br> <labelfor="female">Žena</label> <inputtype="radio" name="sex" id="female" value="female"><br> @MP/TMS 2012

7. HTML <input> tag • predstavuje typové dátové pole, obvykle s ovládacím prvkom formulára pre umožnenie používateľovi upravovať dáta. • atribúty • globálne • autofocus- ovláda zameranie • disabled – ovládacie prvky sa stanú neaktívnymi a zabráni sa odoslaniu jeho hodnoty • checked – bool atribút, ktorý udáva predvolené zaškrtnutie prvku input. • form - sa používa pre explicitné spojenie prvku s jeho formulárovým vlastníkom • name - udáva meno prvku. • type - určuje typ dát prvku (a ich ovládanie). Chýbajúca hodnota je predvolená na text. • value - poskytuje predvolenú hodnotu prvku @MP/TMS 2012

8. HTML <input> tagatribúty autocomplete • Používateľský agenti majú funkcie pre pomoc používateľom pri vypĺňaní formulárov, napríklad predvypĺňanie adresy používateľa na základe skoršieho zadávania používateľom. • Atribút má 2 stavy: • Stav off znamená, že buď vstupné dáta sú zvlášť citlivé (napr. aktivačný kód pre jadrové zbrane), alebo, že je to hodnota, ktorá nebude nikdy znovu použitá (napríklad jednorazový kľúč pre prihlásenie do banky) a používateľ bude preto musieť explicitne zadať údaje zakaždým, namiesto toho, aby sa mohol spoľahnúť na UI na predpisovanie hodnoty pre neho, alebo tým, že dokument poskytuje vlastný mechanizmus automatického dokončovania a nechce aby používateľský agent používal funkciu automatického dokončovania hodnôt. • stav on znamená, že hodnota nie je príliš citlivá a používateľ môže očakávať, že sa bude môcť spoľahnúť na svojho používateľského agenta na zapamätanie hodnoty, ktoré zadal pre tento ovládací prvok. @MP/TMS 2012

9. HTML <input> tagatribúty dirname • povoľuje odoslanie smerovania textu v prvku, a udáva názov poľa, ktoré obsahuje túto hodnotu počas odosielania formuláru. Ak je takýto atribút určený, jeho hodnota nesmie byť prázdny reťazec. • príklad: vyplní sa text • Hello • comment=Hello&comment.dir=ltr • مرحبًا • comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl list • používa sa pre označenie prvku, ktorý obsahuje zoznam preddefinovaných možností navrhovaných pre používateľov. Jeho hodnota musí byť ID prvku datalist v rovnakom dokumente. readonly • je bool atribút, ktorý kontroluje či užívateľ môže alebo nemôže upravovať prvky formulára. @MP/TMS 2012

10. HTML <input> tagatribúty size • udáva počet znakov, ktorý, pri vizuálnom zobrazení, používateľský agent umožňuje používateľovi vidieť počas úpravy hodnoty prvku. required • je bool atribút. Keď je zadaný, prvok je povinný. multiple • je bool atribút, ktorý určuje či používateľ bude mať možnosť zadať viac ako jednu hodnotu. maxlength • hodnota pola musí byť kratšia alebo rovná hodnote atribútu. @MP/TMS 2012

11. HTML <input> tagatribúty pattern • určuje regulárny výraz voči ktorému sa kontroluje hodnota ovládacieho prvku. Ak je zadaný, musí sa hodnota atribútu zhodovať s tvorením vzorov v JavaScripte. Ak je atribút zadaný, autor by mal zahrnúť aj atribút title kde zadá popis vzoru. min, max • udáva povolený rozsah hodnôt prvku. max nesmie byť menší ako min step • udáva zrnitosť hodnoty, ktorá sa očakáva (a požaduje), obmedzením povolených hodnôt. placeholder • predstavuje krátku nápovedu (slovo alebo krátku frázu), ktorej cieľom je pomôcť používateľovi pri vkladaní dát. Nápoveda môže byť jednoduchá hodnota alebo stručný popis očakávaného formátu. Pre dlhšiu nápovedu alebo iný pomocný text, je vhodnejšie použiť atribút title. @MP/TMS 2012

12. HTML <input> tagtype="hidden" • predstavuje hodnotu, ktorá nie je určená na prezretie alebo manipulovanie používateľom • atribúty - ak je prítomný atribút name a má hodnotu "_charset_", potom musí byť atribút value vynechaný; hodnota mu je automaticky priradená a je to kódovanie znakov pri odosielaní @MP/TMS 2012

13. HTML <input> tagtype="text", type="search" • predstavuje jeden riadok obyčajného textu ako hodnotu prvku • rozdiel medzi text a search je štylistický: na platformách, kde sú polia vyhľadávania odlíšené od bežných textových polí, výsledok search môže mať za následok rovnakú podobu ako vyhľadávacie pole. • atribúty - autocomplete, dirname, list, maxlength, pattern, placeholder, readonly, required, size <input type="search" name="googlesearch"> @MP/TMS 2012

14. HTML <input> tagtype="tel" • predstavuje telefónne číslo uvedené v hodnote prvku • atribúty - autocomplete, list, maxlength, pattern, placeholder, readonly, required, size <inputtype="tel" name="usrtel"> @MP/TMS 2012

15. HTML <input> tagtype="url" • predstavuje prvok pre editáciu jedinej absolútnej URL adresy uvedenej v hodnote prvku. • atribúty - autocomplete, list, maxlength, pattern, placeholder, readonly, required, size <input type="url" name="homepage"> @MP/TMS 2012

16. HTML <input> tagtype="email" • Ako funguje záleží na tom, či je atribút multiple daný alebo nie: • keď nie je daný - predstavuje pole pre editáciu e-mailovej adresy uvedenej v hodnote prvku. • keď je daný - predstavuje pole pre pridávanie, odstraňovanie a editáciu e-mailových adries uvedených v hodnote prvku. Atribút value, ak je daný, musí mať hodnotu čo je zoznam e-mailových adries oddelených čiarkou. • atribúty - autocomplete, list, maxlength, multiple, pattern, placeholder, readonly, required, size <input type="email" name="usremail"> @MP/TMS 2012

17. HTML <input> tagtype="password" • predstavuje jeden riadok obyčajného textu. Používateľský agent by mal zakrývať hodnotu tak, aby osoby, iné než je používateľ ju nemohli vidieť. • atribúty - autocomplete, maxlength, pattern, placeholder, readonly, required, size <input type="password" name="pwd"> @MP/TMS 2012

18. HTML <input> tagtype="datetime" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci globálny dátum a čas. • Atribút step je vyjadrený v sekundách. Predvolená hodnota je 60 sekúnd. • atribúty - autocomplete, list, max, min, readonly, required, step <inputtype="datetime" name="bdaytime"> @MP/TMS 2012

19. HTML <input> tagtype="date" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci určitý dátum. • Atribút step je vyjadrený v dňoch. Predvolená hodnota je 1 deň. • atribúty - autocomplete, list, max, min, readonly, required, step <input type="date" name="bday"> @MP/TMS 2012

20. HTML <input> tagtype="month" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci určitý mesiac. • Atribút step je vyjadrený v mesiacoch. Predvolená hodnota je 1 mesiac. • atribúty - autocomplete, list, max, min, readonly, required, step <input type="month" name="bdaymonth"> @MP/TMS 2012

21. HTML <input> tagtype="week" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci určitý týždeň v danom roku. • Atribút step je vyjadrený v týždňoch. Predvolená hodnota je 1 týždeň. • atribúty - autocomplete, list, max, min, readonly, required, step <input type="week" name="year_week"> @MP/TMS 2012

22. HTML <input> tagtype="time" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci určitý čas. • atribúty - autocomplete, list, max, min, readonly, required, step <input type="time" name="usr_time"> @MP/TMS 2012

23. HTML <input> tagtype="datetime-local" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci lokálny dátum a čas, bez informácie o časovom pásme. • Atribút step je vyjadrený v sekundách. Predvolená hodnota je 60 sekúnd. • atribúty - autocomplete, list, max, min, readonly, required, step <input type="datetime-local" name="bdaytime"> @MP/TMS 2012

24. HTML <input> tagtype="number" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci číslo • predvolená hodnota atribútu step je 1 • atribúty - autocomplete, list, max, min, placeholder, readonly, required, step <input type="number" name="quantity" min="1" max="5"> @MP/TMS 2012

25. HTML <input> tagtype="range" • predstavuje prvok pre nastavenie hodnoty prvku na reťazec predstavujúci číslo, ale s upozornením, že presná hodnota nie je dôležitá • UI by malo poskytnúť jednoduchšie rozhranie ako je pri type number • predvolená hodnota atribútu step je 1, min 0 a max 100 • predvolená hodnota atribútu valueje minimum + polovička medzi minimom a maximom, pokým maximum nie je menšie ako minimum, v takom prípade je predvolená hodnota minimum. • atribúty - autocomplete, list, max, min, step <input type="range" name="points" min="1" max="10"> @MP/TMS 2012

26. HTML <input> tagtype="color" • predstavuje farebný zdroj určený pre nastavovanie hodnoty prvku na reťazec predstavujúci jednoduchú farbu. • hodnota farby sa udáva v hexadecimálnom tvare - presne 7 znakov dlhá a prvý znak je # • atribúty - autocomplete, list <input type="color" name="favcolor"> @MP/TMS 2012

27. HTML <input> tagtype="checkbox" • predstavuje dva stavy, čo predstavuje stav zaškrtnutia prvku. Ak je stav true, ovládanie predstavuje pozitívny výber, a ak to je false, negatívny výber. • atribúty - checked, required <label><inputtype="checkbox" name="vehicle" value="Car" checked> Mám auto</label><br> <label><inputtype="checkbox" name="vehicle" value="Boat"> Mám loď</label> @MP/TMS 2012

28. HTML <input> tagtype="radio" • predstavuje ovládanie, ktoré pri použití v spojení s inými vstupnými prvkami, tvorí skupinu prepínačov, v ktorom len jeden ovládač môže mať jeho stav zaškrtnutia na true. Ak zaškrtnutie prvku je true, ovládač predstavuje vybraný ovládač v skupine, a ak je false, znamená ovládač v skupine, ktorý nie je vybraný. • atribúty - checked, required <label><inputtype="radio" name="gender" value="male" checked> Male</label><br> <label><inputtype="radio" name="gender" value="female"> Female</label> @MP/TMS 2012

29. HTML <input> tagtype="file" • predstavuje zoznam vybraných súborov, každý súbor sa skladá z názvu súboru, typu súboru, a tela súboru (obsah súboru). • atribúty - accept, multiple, required • Atribút accepturčuje, ktoré typy súborov budú uznané. Jeho hodnota je súbor čiarkou oddelených nasledujúcich možností: • audio/* - povolené sú zvukové súbory • video/* - povolené sú video súbory • image/* - povolené sú obrázkové súbory • validný MIME typ – povolené sú dané súbory <input type="file" name="img"> @MP/TMS 2012

30. HTML <input> tagtype="submit" • predstavuje tlačidlo, ktoré pri aktivácii odošle formulár • atribúty - formaction, formenctype, formmethod, formnovalidate, formtarget <inputtype="submit"> @MP/TMS 2012

31. HTML <input> tagtype="image" • predstavuje buď obrázok, z ktorého môže používateľ vybrať súradnicu a odoslať formulár, alebo alternatívne tlačidlo, z ktorého môže používateľ odoslať formulár • súradnica je odoslaná na server pri odoslaní formulára poslaním dvoch položiek odvodených od názvu ovládacieho prvku, ale s pridaním ". x" a ". y" k názvu s x a y zložkami súradníc. • Obrázok je daný atribútom src. Tento atribút musí byť daný, a musí obsahovať URL nie interaktívneho obrázkového zdroja. • Atribút alt poskytuje textový popis tlačidla a musí byť prítomný • atribúty - alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, src, width <inputtype="image" src="img_submit.gif" alt="Submit" width="48" height="48"> @MP/TMS 2012

32. HTML <input> tagtype= "reset" • predstavuje tlačidlo, ktoré po aktivácii obnoví formulár <inputtype="reset"> @MP/TMS 2012

33. HTML <input> tagtype="button" • predstavuje tlačidlo so žiadnym predvoleným správaním <input type="button" value="Kliknima"> @MP/TMS 2012

34. HTML <button> tag • predstavuje tlačidlo • atribúty • globálne • autofocus - kontroluje zameranie • disabled - sa používa aby bol ovládací prvok neaktívny a jeho hodnota nebude odosielaná • form - sa používa pre priradenie prvku k formuláru vlastníkovi • formaction - URL kam sa posiela formulár na spracovanie • formenctype - application/x-www-form-urlencoded (predvolene ak chýba), multipart/form-data, text/plain • formmethod - get (predvolene ak chýba), post • formnovalidate - môže byť použitý na to, aby tlačidlá na odosielanie odoslali formulár bez validácie. • formtarget - mená kontextu prehliadania • name - zadáva meno prvku • type - kontroluje správanie sa tlačidla keď je aktivované. 3 stavy – submit, reset, button. Ak hodnota chýba predvolené je submit • value - udáva hodnotu prvku pre účely odosielania formulára. Hodnota tlačidla sa pri odosielaní formulára vkladá len ak tlačidlo samotné bolo stlačené. <button type="button">Klikni ma</button> @MP/TMS 2012

35. HTML <select> tag • predstavuje výber medzi rôznymi možnosťami. • atribúty • globálne • autofocus - kontroluje zameranie. • disabled - sa používa aby bol ovládací prvok neaktívny a jeho hodnota nebude odosielaná. • form - sa používa pre priradenie prvku k formuláru vlastníkovi • multiple - je bool atribút. Ak je zadaný, potom prvok predstavuje výber žiadnej alebo viacerých možností so zoznamu možností. Pokiaľ atribút chýba, potom prvok predstavuje ovládanie pre výber iba jednej možnosti zo zoznamu možností. • name - zadáva meno prvku • required - je bool atribút. Ak je zadaný, používateľ musí vybrať možnosť pred odoslaním formulára. • size - udáva počet možností, ktoré sa ukážu používateľovi. Ak je zadaný musí mať ako hodnotou kladné číslo. @MP/TMS 2012

36. HTML <select> tag <p> <labelfor="allowedunits">Vyberte zoznam jednotiek, ktoré majú byť na tejto mape aktivované:</label> <selectid="allowedunits" name="allowedunits" multiple> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3"> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select> </p> @MP/TMS 2012

37. HTML <datalist> tag • predstavuje súbor prvkov option, ktoré predstavujú preddefinované možnosti pre ďalšie ovládacie prvky. • Prvok je prepojený s prvkom input použitím atribútu list v prvku input. • Každý prvok option, ktorý je potomkom prvku datalist, ktorý nie je disabled, a ktorého hodnota je reťazec, ktorý nie je prázdny, predstavuje návrh. Každý návrh má hodnotu a popis. • atribúty • globálne <inputlist="browsers"> <datalistid="browsers"> <optionvalue="Internet Explorer"> <optionvalue="Firefox"> <optionvalue="Chrome"> <optionvalue="Opera"> <optionvalue="Safari"> </datalist> @MP/TMS 2012

38. HTML <optgroup> tag • predstavuje skupinu prvkov option so spoločnou menovkou. Prvky option sú potomkami prvku optgroup. • atribúty • globálne • disabled- je bool atribút a môže sa použiť pre deaktivovanie celej skupiny • label - musí byť zadaný. Jeho hodnota je názov skupiny, pre účely používateľského rozhrania <select> <optgrouplabel="SwedishCars"> <optionvalue="volvo">Volvo</option> <optionvalue="saab">Saab</option> </optgroup> <optgrouplabel="GermanCars"> <optionvalue="mercedes">Mercedes</option> <optionvalue="audi">Audi</option> </optgroup> </select> @MP/TMS 2012

39. HTML <option> tag • predstavuje možnosť v prvku select alebo ako časť zoznamu návrhov s prvku datalist • atribúty • globálne • disabled - bool atribút a deaktivuje možnosť • label - poskytuje menovku prvku • selected - boolatribút. Predstavuje predvolené vybranie prvku. Ak prvok select nemá definovaný atribút multiple, nesmie byt viac ako jeden prvok option s atribútom selected • value - poskytuje hodnotu prvku @MP/TMS 2012

40. HTML <textarea> tag • predstavuje ovládací prvok pre viacriadkový obyčajný text. Obsah ovládacieho prvku predstavuje predvolenú hodnotu prvku. • atribúty • globálne • autofocus - kontroluje zameranie • cols - udáva predpokladaný maximálny počet znakov v riadku • dirname - povoľuje odoslanie smerovania textu v prvku, a udáva názov poľa, ktoré obsahuje túto hodnotu počas odosielania formuláru • disabled - sa používa aby bol ovládací prvok neaktívny a jeho hodnota nebude odosielaná • form - sa používa pre priradenie prvku k formuláru vlastníkovi • maxlength - udáva maximálne možný počet znakov v prvku • name - zadáva meno prvku • placeholder predstavuje krátku nápovedu (slovo alebo krátku frázu), ktorej cieľom je pomôcť používateľovi pri vkladaní dát. Nápoveda môže byť jednoduchá hodnota alebo stručný popis očakávaného formátu. Pre dlhšiu nápovedu alebo iný pomocný text, je vhodnejšie použiť atribút title. • readonly je bool atribút, ktorý sa používa na ovládanie či text môže byť používateľom menený alebo nie. • required je bool atribút. Ak je zadaný, používateľ musí pred odoslaním formulára zadať hodnotu • rows - udáva počet riadkov, ktoré sa zobrazujú • wrap - hodnoty: soft a hard. Ak hodnota chýba predvolené je soft. Stav soft znamená, že text v textarea nie je zalomený keď je odosielaný. Stav hard znamená, že text v textarea bude mať nové riadky pridané používateľským agentom tak, že text pri odosielaní bude zalomený. @MP/TMS 2012

41. HTML <textarea> tag <textarea rows="4" cols="50"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> @MP/TMS 2012

42. HTML <keygen> tag • predstavuje ovládací prvok pre generátor kľúčového páru. Keď je formulár s týmto prvkom odoslaný, súkromný kľúč je uložený v miestnom úložisku kľúčov, a verejný kľúč zabalený a odoslaný na server. • Predpokladá sa, že po prijatí kľúču, server vygeneruje klientský certifikát a ponúkne ho používateľovi na stiahnutie; tento certifikát, raz keď je stiahnutý a uložený v úložisku kľúčov so súkromným kľúčom, môže byť potom použitý na prihlasovanie k službám, ktoré používajú TLS a overovanie certifikátom. • atribúty • globálne • autofocus - kontroluje zameranie • challenge - môže byť zadaný. Jeho hodnota bude zabalená s odosielaným kľúčom • disabled - sa používa aby bol ovládací prvok neaktívny a jeho hodnota nebude odosielaná • form - sa používa pre priradenie prvku k formuláru vlastníkovi • keytype - má dva stavy. Neplatná hodnota je neznámy stav. Chýbajúca hodnota je RSA stav, ak je podporovaný, inak je neznámy stav • name - zadáva meno prvku <keygen name="security"> @MP/TMS 2012

43. HTML <output> tag • predstavuje výsledok výpočtu. • atribúty • globálne • for - umožňuje otvorený vzťah medzi výsledkom výpočtu a prvkami, ktoré predstavujú hodnoty, ktoré vošli do výpočtu alebo iným spôsobom ovplyvnili výpočet. Ak je zadaný musí obsahovať reťazec pozostávajúci z netriedeného súboru jedinečných medzerou oddelených symbolov, ktoré závisia na veľkosti písiem, z ktorých každý musí mať hodnotu ID prvku v rovnakom dokumente. • form - sa používa pre priradenie prvku k formuláru vlastníkovi • name - zadáva meno prvku <form> <input type=„number" name="a" value="50">+<input type="number" name="b" value="50"> =<output name="x" for="a b"></output> </form> @MP/TMS 2012

44. HTML <progress> tag • predstavuje pokrok v dokončení úlohy. Pokrok je buď neurčitý, čo naznačuje, že dochádza k pokroku, ale že nie je jasné, koľko práce je potrebné ešte vykonať pred dokončení úlohy (napr. preto, že úloha čaká na reakciu na vzdialenom počítači), alebo pokrok je číslo v rozsahu od nuly do maxima, čo podáva zlomok práce, ktorá bola doteraz vykonaná. • atribúty • globálne • value - určuje, aká veľká časť úlohy bola dokončená • max - určuje, koľko práce úloha vyžaduje celkom • Autorom sa odporúča vložiť aktuálnu hodnotu a maximálnu hodnotu inline ako text vo vnútri prvku, aby progress bol dostupný aj pre starších používateľských agentov. <p>Progres: <progress value="20" max="100">20%</progress></p> @MP/TMS 2012

45. HTML <meter> tag • predstavuje skalárne merania v rámci známeho rozsahu, alebo frakčnej hodnoty; napríklad pre zaplnenie disku, význam výsledku dotazu, alebo zlomok voličov, ktorí si vybrali konkrétneho kandidáta. • Neexistuje žiadny spôsob, ako určiť explicitne jednotky v tomto prvku, ale jednotky môžu byť uvedené v atribúte title ako voľne napísaný text. • atribúty • globálne • value - určuje hodnotu, ktorú uvádzame ako "nameranú" hodnotu • min - určuje spodnú hranicu rozsahu • max - určuje hornú hranicu • low - určuje rozsah, ktorý je považovaný za "nízku" časť • high - je považovaný za "vysokú" časť • optimum - určuje pozíciu, ktorá je "optimálna„ <meter min="0" max="20"value="12"title="centimetrov">12cm</meter> @MP/TMS 2012