Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Inne elementy związane z folmularzami

Na koniec omówimy trzy elementy związane z operacjami na danych, w tym również z wysyłaniem danych poprzez formularze.

Element meter

Pozwala umieścić na stronie wskaźnik graficzny pokazujący daną wartość liczbową.

Ćwiczenie 2_6_7_1. Graficzna prezentacja liczby 10 w przedziale liczb 0..20 oraz wartości 10 w przedziale 0..100

Do wykonania zadania zastosuj następujacy kod:

<fieldset style="width:350px;">
  <legend>Graficzna prezentacji wartości liczbowych</legend>
  <meter min="0" max="20" value="10"></meter> Liczba 10 w przedziale 0..20<br /><br />
  <meter min="0" max="100" value="10"></meter> Liczba 10 w przedziale 0..100
</fieldset>

Tak powinna wyglądać wykonana strona:

  • Zapis style="width:350px;" definiuje poprzez CSS szerokośc elementu fieldset.
  • Zwróć uwagę, że pomimo iż oba elementy meter pokazują tą samą wartość 10, to jednak w pierwszym przypadku pokazana wartość stanowi 50% zakresu 0..20, natomiast w drugim tylko 10% zakresu 0..100.

Element progress

Pasek postępu - pozwala umieścić na stronie wskaźnik graficzny pokazujący procent wykonania jakiejś operacji przez JavaScript.

Ćwiczenie 2_6_7_2. Prezentacja paska postępu

Do wykonania zadania zastosuj następujacy kod:

<fieldset style="width:350px;"> 
  <legend> Prezentacja znacznika progress</legend> 
  <progress  id="p" max="100" value="30"> </progress>  Znacznik postępu
</fieldset>

Tak powinna wyglądać wykonana strona:

Element output - wynik, resultat

Element output służy do wyświetlania wyniku obliczenia, które jest wykonywane przez skrypty JavaScript. Jego działanie poznamy, dopiero po opanowaniu podstaw JavaSript.

Praca domowa

Przeanalizuj przykłady zaprezentowane w ćwiczeniach wykonanych podczas zajęć, sporządź na ten temat notatkę w zeszycie.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.