Element output

> Dodaj do ulubionych

Element HTML output reprezentuje wyniki obliczeń.

Kontekst u┼╝ycia

Modele tre┼Ťci HTML5tre┼Ť─ç og├│lna, syntagmatyczna, formularzowa (z listy, etykietowalna i resetowalna), wyczuwalna
Elementy nadrz─Ödneelementy tre┼Ťci og├│lnej
Elementy potomne

elementy tre┼Ťci og├│lnej

ZnacznikiZnaczniki otwieraj─ůcy i zamykaj─ůcy s─ů obowi─ůzkowe
NormyHTML 5 — podrozdzia┼é 4.10.15
Interfejs DOMHTMLOutputElement
R├│┼╝nice mi─Ödzy HTML 4.01 a HTML 5

Element output został dodany w języku HTML 5

Obs┼éuga przez przegl─ůdarki

FirefoxChromeOperaSafariInternet Explorer

Atrybuty obowi─ůzkowe

Element output nie ma atrybut├│w obowi─ůzkowych.

Atrybuty opcjonalne

Atrybuty globalne oraz:

AtrybutOpis
forS┼éu┼╝y do wi─ůzania wyniku oblicze┼ä z elementami reprezentuj─ůcymi warto┼Ťci, kt├│re zosta┼éy u┼╝yte w tych obliczeniach lub mia┼éy jakikolwiek wp┼éyw na ich wynik. Warto┼Ťci─ů tego atrybutu musi by─ç nieuporz─ůdkowana lista oddzielanych spacjami identyfikator├│w element├│w znajduj─ůcych si─Ö w tym samym dokumencie, co element output. Wielko┼Ť─ç liter ma znaczenie
formUmo┼╝liwia powi─ůzanie elementu output z formularzem
nameOkre┼Ťla nazw─Ö elementu output

Szczegółowy opis

Przegl─ůdaj─ůc internet znajdziesz wiele stron zawieraj─ůcych kalkulatory do obliczania wysoko┼Ťci rat kredytu, oprocentowania kredyt├│w hipotecznych, podatk├│w, ubezpiecze┼ä itp. Do tej pory nie mieli┼Ťmy ┼╝adnej mo┼╝liwo┼Ťci semantycznego oznaczenia wyniku tych oblicze┼ä. Ale w ko┼äcu powsta┼é element output! W tym artykule poka┼╝─Ö Ci jak u┼╝ywa─ç elementu output oraz kilka powi─ůzanych z nim trik├│w JavaScript. Zatem, do roboty.

Definicja

Element output, nowo┼Ť─ç w HTML5, jest u┼╝ywany w formularzach. W specyfikacji HTML WHATWG jego opis jest bardzo prosty:

Element output reprezentuje wynik obliczeń.

Specyfikacja WHATWG HTML

Opr├│cz standardowych atrybut├│w globalnych element output akceptuje r├│wnie┼╝ poni┼╝sze atrybuty:

for
Rozdzielana spacjami lista identyfikator├│w element├│w, kt├│rych warto┼Ťci wchodz─ů do oblicze┼ä.
form
┼ü─ůczy element output z formularza, do kt├│rego nale┼╝y. Warto┼Ťci─ů musi by─ç identyfikator formularza znajduj─ůcego si─Ö w tym samym dokumencie. Dzi─Öki temu element output mo┼╝na umie┼Ťci─ç poza elementem form, z kt├│rym jest on powi─ůzany.
name
Nazwa elementu.

Implementacja elementu output

Zaczniemy od prostego przyk┼éadu sumowania dw├│ch liczb ca┼ékowitych (rysunek 1). U┼╝yjemy nowego typu wej┼Ťciowego o nazwie number oraz funkcji JavaScritu parseInt przekszta┼écaj─ůcej ┼éa┼äcuchy w liczby ca┼ékowite:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
  <input name="a" type="number" step="any"> +
  <input name="b" type="number" step="any"> =
  <output name="o"></output>
</form>
Kalkulator utworzony za pomoc─ů elementu output
Rysunek 1. Prosty kalkulator wy┼Ťwietlony w Chrome

Poni┼╝ej przedstawiony jest dzia┼éaj─ůcy formularz z rysunku 1.

+ =


Jak mo┼╝na si─Ö by┼éo spodziewa─ç, je┼Ťli wprowadzisz tylko jedn─ů warto┼Ť─ç, funkcja zwraca warto┼Ť─ç NaN. Jest to spowodowane pr├│b─ů dodania do liczby niezdefiniowanej warto┼Ťci, a np. 1 + niezdefiniowana warto┼Ť─ç = warto┼Ť─ç niezdefiniowana.

Zastosowanie atrybutu for

Bazuj─ůc na wcze┼Ťniejszym przyk┼éadzie dodamy do naszego elementu output atrybut for (rysunek 2). Ka┼╝demu z powi─ůzanych element├│w input musimy nada─ç identyfikator, podobnie jakby┼Ťmy to zrobili w przypadku atrybutu for dla etykiet label:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
  <input name="a" id="a" type="number" step="any"> +
  <input name="b" id="b" type="number" step="any"> =
  <output name="o" for="a b"></output>
</form>

Listing 1. U┼╝ycie atrybutu for w elemencie output

Poni┼╝ej znajduje si─Ö dzia┼éaj─ůcy formularz utworzony przy u┼╝yciu kodu z listingu 1.

+ =

W┼éasno┼Ť─ç valueAsNumber

W HTML5 wprowadzono tak┼╝e w┼éasno┼Ť─ç valueAsNumber dla obiekt├│w wej┼Ťciowych JavaScript (m├│wi─ůc konkretnie dla element├│w typu number, date i range). Zwracaj─ů one warto┼Ť─ç liczbow─ů zamiast ┼éa┼äcucha znak├│w. Oznacza to, ┼╝e nie musimy ju┼╝ u┼╝ywa─ç funkcji parseInt ani parseFloat, a operator + dodaje, a nie ┼é─ůczy:

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
  <input name="a" id="a" type="number" step="any"> +
  <input name="b" id="b" type="number" step="any"> =
  <output name="o" for="a b"></output>
</form>

Listing 2. U┼╝ycie w┼éasno┼Ťci valueAsNumber do pobierania warto┼Ťci liczbowej

Poni┼╝ej znajduje si─Ö dzia┼éaj─ůcy formularz utworzony przy u┼╝yciu kodu z listingu 2.

+ =

Kalkulator fakturowania: zaawansowany przykład i plan awaryjny

Aby pokaza─ç bardziej realny przyk┼éad utworzymy kalkulator fakturowania, kt├│ry mno┼╝y liczb─Ö godzin przez stawk─Ö godzinow─ů oraz dodaje podatek, a potem podsumowuje to wszystko i zwraca nam wynik (rysunek 2):

<form onsubmit="return false" oninput="amount.value = (hours.valueAsNumber * rate.valueAsNumber) + ((hours.valueAsNumber * rate.valueAsNumber) * vat.valueAsNumber)">
  <legend>Faktura</legend>

  <p><label for="hours">Liczba godzin: </label>
  <input type="number" min="0" id="hours" name="hours"></p>

  <p><label for="rate">Stawka: </label>
  <span>PLN</span><input type="number" min="0" id="rate" name="rate"></p>

  <p><label for="vat">VAT: </label>
  <input type="number" min="0" id="vat" value="0.23" name="vat"></p>

  <p>Suma: <strong><output name="amount" for="hours rate vat">0</output> PLN</strong></p>
</form>
Kalkulator fakturowania, który podaje wynik końcowy w polu output
Rysunek 2. Kalkulator fakturowania, który podaje wynik końcowy w polu output

Poni┼╝ej znajduje si─Ö dzia┼éaj─ůcy formularz utworzony przy u┼╝yciu przedstawionego powy┼╝ej kodu.

Faktura

(PLN)

Nale┼╝no┼Ť─ç: PLN0

Nic skomplikowanego tam si─Ö nie dzieje. W rzeczywisto┼Ťci skrypt jest tak prosty, ┼╝e nawet ja mog┼éem go napisa─ç ­čśë

Inny, troch─Ö kontrowersyjny przyk┼éad u┼╝ycia elementu <input type=”range”>

W HTML5 wprowadzono tak┼╝e typ range, kt├│ry wy┼Ťwietlany jest jako suwak w obs┼éuguj─ůcych go przegl─ůdarkach. Przy u┼╝yciu element├│w tego typu u┼╝ytkownik mo┼╝e wprowadza─ç przybli┼╝on─ů warto┼Ť─ç z okre┼Ťlonego przedzia┼éu, bez konieczno┼Ťci podawania precyzyjnych danych lub wpisywania warto┼Ťci liczbowych. Dla zgodno┼Ťci r├│┼╝nych przegl─ůdarek mo┼╝na u┼╝y─ç metody, kt├│r─ů podaje Remy Sharp we wpisie na blogu Input range polyfill.

Szukaj─ůc materia┼é├│w do tego artyku┼éu, znalaz┼éem kilka przyk┼éad├│w wykorzystania elementu output w po┼é─ůczeniu z <input type="range">, podobnych do pokazanego na rysunku 3:

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
  <label for="flying">Wysoki poziom umiej─Ötno┼Ťci</label>
  <input name="flevel" id="flying" type="range" min="0" max="100" value="0"> 
  <output for="flying" name="level">0</output>/100
</form>
U┼╝ycie elementu input typu range z elementem wyj┼Ťciowym output
Rysunek 3. U┼╝ycie elementu <input type="range"> z elementem wyj┼Ťciowym output

Poni┼╝ej znajduje si─Ö dzia┼éaj─ůcy formularz utworzony przy u┼╝yciu powy┼╝szego kodu.

0/100

U┼╝ycie elementu output do prezentacji bie┼╝─ůcej warto┼Ťci u┼╝ytkownikowi wydaje mi si─Ö rozs─ůdne, lecz taka warto┼Ť─ç nie jest „rezultatem oblicze┼ä” w rozumieniu specyfikacji. Nie rozmawia┼éem jeszcze o tym z HixieÔÇÖm, ale na IRC par─Ö os├│b si─Ö ze mn─ů zgodzi┼éo, dlatego przygotowa┼éem raport o b┼é─Ödzie z pro┼Ťb─ů o zmian─Ö definicji. Po napisaniu tego artyku┼éu problem zosta┼é rozwi─ůzany a definicja rozszerzona. Znaczy to tyle, ┼╝e to o czym pisz─Ö powy┼╝ej dotyczy aktualnego u┼╝ycia pola output. Hurra!

Obs┼éuga przez przegl─ůdarki i wype┼éniacze

Dobr─ů wiadomo┼Ťci─ů jest to, ┼╝e wszystkie nowoczesne przegl─ůdarki w pewnym stopniu obs┼éuguj─ů element output. Z┼é─ů jest to, ┼╝e wci─ů┼╝ czyha na nas kilka pu┼éapek.

Przegl─ůdarki obs┼éuguj─ůce element output:
Nazwa przegl─ůdarki:  Wersja:
Chrome13+
Safari5.1+
Firefox*6+
Opera9.20+
Internet Explorer10+

* Firefox obs┼éuguje element output i zdarzenie oninput, lecz nie obs┼éuguje w┼éasno┼Ťci valueAsNumber.

Wszystkie pokazane dotychczas przykłady powinny doskonale działać w Operze 11.5+, Safari 5.1+ oraz Chrome 13+. Internet Explorer, jak się spodziewasz, pozostaje trochę w tyle, ale obsługuje element output w wersji 10, natomiast zdarzenie oninput obsługiwał już IE9.

Aby obej┼Ť─ç ten problem w naszych prostych przyk┼éadach, musimy skorzysta─ç z wypr├│bowanej metody, polegaj─ůcej na u┼╝yciu funkcji getElementByID i parseFloat (listing 3):

<form onsubmit="return false" oninput="document.getElementById('o').innerHTML = parseFloat(document.getElementById('a').value) + parseFloat(document.getElementById('b').value)">
  <input name="a" id="a" type="number" step="any"> +
  <input name="b" id="b" type="number" step="any"> =
  <output name="o" id="o" for="a b"></output>
</form>

Listing 3. Zastosowanie metody getElementById dla starszych przegl─ůdarek

Rozwi─ůzanie nie jest mo┼╝e idealne, ale dzia┼éa w starszych przegl─ůdarkach i mo┼╝na je stosowa─ç dop├│ki nie umr─ů powoln─ů i bolesn─ů ┼Ťmierci─ů. Alternatywnie mo┼╝na u┼╝y─ç wype┼éniaczy, aby zape┼éni─ç luki.

Je┼Ťli chcesz sprawdzi─ç, jak radzi sobie twoja przegl─ůdarka, odwied┼║ stron─Ö testow─ů MikeÔÇÖa Taylora.

Wypełniacze

Do obs┼éugi mniej sprawnych wyszukiwarek mo┼╝emy u┼╝y─ç wype┼éniaczy takich jak HTML5 Widgets stworzone przez Zoltana ÔÇťDu LacÔÇŁ Hawryluka. Zoltan napisa┼é artyku┼é, w kt├│rym szczeg├│┼éowo opowiada, jak tworzy─ç formularze dzia┼éaj─ůce we wszystkich przegl─ůdarkach przy u┼╝yciu html5Widgets.

Podsumowanie

Prawdopodobnie elementu output nie b─Ödziesz u┼╝ywa┼é bardzo cz─Östo, ale jest wiele sytuacji, w kt├│rych mo┼╝e si─Ö on przyda─ç. Natychmiast przychodzi do g┼éowy przyk┼éad obliczania warto┼Ťci na stronach dotycz─ůcych finans├│w, wy┼Ťwietlanie bie┼╝─ůcej pozycji kursora myszy albo r├│┼╝nica bramek w tabeli dru┼╝yn sportowych. Jakie znasz inne mo┼╝liwo┼Ťci u┼╝ycia elementu output? Podaj przyk┼éady w komentarzach!

Autor: tekst na podstawie tłumaczenia artykułu Richarda Clarka

Źródło: http://html5doctor.com/the-output-element/

Tłumaczenie: Monika Wilusz

Tre┼Ť─ç tej strony jest dost─Öpna na zasadach licencji CC BY-NC 2.0 UK