Autor publikacji
Virtual Patriot - Administrator

output

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu output

Element output reprezentuje zawartość, którą powinna być treść wynikowa.

Docelową treścią wynikową może być:

  • wynik działania na wartościach pochodzących od skryptu (np. skryptu języka programowania JavaScript)
  • wynik interakcji użytkownika z poszczególnymi elementami HTML

Dodatkowe artykuły związane z elementem output

brak

Informacje techniczne o elemencie output

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<fieldset>
  <legend>Operacja dodawania</legend>

  <label>Liczba x: <input id="x"></label>
  <label>Liczba y: <input id="y"></label>
  <label>Wynik x + y: <output for="x y"></output></label>

  <script src="skrypt-01.js"></script>
</fieldset>

Kontekstem zewnętrznym przykładowego elementu "output" jest element "label". Wspomniany element "label" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "label", jest prawidłowym kontekstem zewnętrznym dla elementu "output".

kontekst wewnętrzny

zawartość frazowana

Przykładowy Kod HTML

<fieldset>
  <legend>Operacja dodawania</legend>

  <label>Liczba x: <input id="x"></label>
  <label>Liczba y: <input id="y"></label>

  <label>
    Wynik:
    <output for="x y">
      <var>x</var>+<var>y</var>=<ins>?</ins>
    </output>
  </label>

  <script src="skrypt-01.js"></script>
</fieldset>

Kontekstem wewnętrznym przykładowego elementu "output" jest wyłącznie tekst oraz elementy HTML, które należą do kategorii zawartość frazowana, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "var", znak "+", element "var", znak "=" oraz element "ins", jest prawidłowym kontekstem wewnętrznym dla elementu "output".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<output> ... </output>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu output

/* brak */

Interpretacja elementu output

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu output

Atrybut Lokalny

for

Przeznaczenie atrybutu for

Atrybut for wykorzystany wraz z elementem output pozwala nam określić informację o tym, na podstawie którego elementu HTML została utworzona treść wynikowa reprezentowana przez zawartość danego elementu output.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu for

id

Należy podać wartość atrybutu id interesującego nas elementu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      Liczba wykonanych zadań: <span id="x1">12</span>
    </p>

    <p>
      Liczba pozostałych zadań: <output id="wynik-1" for="x1"></output>
    </p>

    <script>
      (function(){
          var suma = 20;
          var x1 = window.document.getElementById('x1').textContent;

          window.document.getElementById('wynik-1').textContent = suma - (+x1);
      })();
    </script>

  </body>
</html>

Rezultat

Liczba wykonanych zadań: 12

Liczba pozostałych zadań:

Ponieważ do przykładowego elementu "output" został dodany atrybut "for" wraz z wartością "x1", przykładowy element "output" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść wynikowa reprezentowana przez zawartość wspomnianego elementu "output" została utworzona na podstawie treści reprezentowanej przez zawartość elementu HTML posiadającego atrybut "id" o wartości "x1".

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu dany atrybut for będzie mógł posiadać informację o kilku docelowych elementach HTML jednocześnie.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <input type="text" id="x2" value="0"> +
    <input type="text" id="y2" value="0"> =
    <output id="wynik-2" for="x2 y2">0</output>

    <script>
      (function(){
          var x2 = window.document.getElementById('x2');
          var y2 = window.document.getElementById('y2');
          var wynik2 = window.document.getElementById('wynik-2');

          function dodawanie(){
              var rezultat = (+x2.value) + (+y2.value);

              wynik2.value = isNaN(rezultat) ? 'błąd' : rezultat;
          }

          x2.addEventListener('input', dodawanie);
          y2.addEventListener('input', dodawanie);
      })();
    </script>

  </body>
</html>

Rezultat

+ = 0

Ponieważ do przykładowego elementu "output" został dodany atrybut "for" wraz z następującą kombinacją wartości: "x2 y2", przykładowy element "output" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść wynikowa reprezentowana przez zawartość wspomnianego elementu "output" została utworzona na podstawie treści reprezentowanej przez zawartość elementu HTML posiadającego atrybut "id" o wartości "x2" oraz na podstawie treści reprezentowanej przez zawartość elementu HTML posiadającego atrybut "id" o wartości "y2".

Atrybut Lokalny

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem output pozwala nam określić informację o tym, z którym elementem form powinien zostać powiązany dany element output.

Domyślnie element "output" jest powiązany z najbliższym elementem przodkiem będącym elementem form, jeżeli taki istnieje.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

Należy podać wartość atrybutu id interesującego nas elementu form.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form id="formularz-1">
      <input type="text" name="x1" value="0"> +
      <input type="text" name="y1" value="0"> =
    </form>

    <output name="wynik" form="formularz-1">0</output>

    <script>
      (function(){
          var formularz = window.document.getElementById('formularz-1');
          var pola = formularz.getElementsByTagName('input');
          var wynik = formularz.wynik;

          function dodawanie(){
              var rezultat = (+pola.x1.value) + (+pola.y1.value);

              wynik.value = isNaN(rezultat) ? 'błąd' : rezultat;
          }

          pola.x1.addEventListener('input', dodawanie);
          pola.y1.addEventListener('input', dodawanie);
      })();
    </script>

  </body>
</html>

Rezultat

+ =
0

Przykładowy element "output" został powiązany z elementem "form" posiadającym atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "output" został dodany atrybut "form" wraz z wartością "formularz-1".

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem output pozwala nam określić nazwę, jaka powinna zostać przypisana do danego elementu output.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form id="formularz-2">
      <input type="text" name="x2" value="0"> +
      <input type="text" name="y2" value="0"> =
      <output name="wynik">0</output>
    </form>

    <script>
      (function(){
          var formularz = window.document.getElementById('formularz-2');
          var pola = formularz.getElementsByTagName('input');
          var wynik = formularz.wynik;

          function dodawanie(){
              var rezultat = (+pola.x2.value) + (+pola.y2.value);

              wynik.value = isNaN(rezultat) ? 'błąd' : rezultat;
          }

          pola.x2.addEventListener('input', dodawanie);
          pola.y2.addEventListener('input', dodawanie);
      })();
    </script>

  </body>
</html>

Rezultat

+ = 0

Nazwą, jaka została przypisana do przykładowego elementu "output", jest nazwa "wynik", ponieważ do wspomnianego elementu "output" został dodany atrybut "name" wraz z wartością "wynik".