Ostatnio edytowany:

output

Autor: Virtual Patriot

Przeznaczenie elementu output

Element output reprezentuje zawartość, którą powinna być treść wynikowa. Treścią wynikową może być wynik działania na wartościach pochodzących od skryptu, np. skryptu języka JavaScript. Treścią wynikową może również być wynik interakcji użytkownika z poszczególnymi elementami HTML.

Dodatkowe techniczne informacje 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
składnia HTML
  • <output> ... </output>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline

Dodatkowe domyślne reguły CSS elementu output

/* brak */

Interpretacja elementu output

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Opis atrybutów elementu output

for

Przeznaczenie atrybutu for

Atrybut for wykorzystany wraz z elementem output określa elementy HTML, na podstawie których 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>
      Pierwsza liczba: <span id="x1">8</span>
    </p>

    <p>
      Druga liczba: <span id="x2">9</span>
    </p>

    <p>
      Wynik dodawania dwóch liczb: <output id="rezultat" for="x1 x2"></output>
    </p>

    <script>
    (function(){
          var liczba1 = window.document.getElementById('x1').textContent;
          var liczba2 = window.document.getElementById('x2').textContent;

          window.document.getElementById('rezultat').textContent = (+liczba1) + (+liczba2);
      })();
    </script>

  </body>
</html>

Rezultat

Pierwsza liczba: 8

Druga liczba: 9

Wynik dodawania dwóch liczb:

Ponieważ do przykładowego elementu "output" został dodany atrybut "for" wraz z wartością "x1 x2" wspomniany 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" oraz na podstawie treści reprezentowanej przez zawartość elementu HTML posiadającego atrybut "id" o wartości "x2".

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji.

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem output określa, z którym elementem form powinien zostać powiązany dany element output.

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="x2" value="0"> =
    </form>

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

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

        function dodawanie(){
            var wynik = (+pola.x1.value) + (+pola.x2.value);

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

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

  </body>
</html>

Rezultat

+ =
0

Mimo że przykładowy element "output" nie znajduje się w zawartości elementu "form", wspomniany element "output" został powiązany z formularzem HTML reprezentowanym przez wspomniany element "form" posiadający atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "output" został dodany atrybut "form" wraz z wartością "formularz-1".

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem output określa 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="x1" value="0"> +
      <input type="text" name="x2" value="0"> =
      <output name="rezultat">0</output>
    </form>

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

          function dodawanie(){
              var wynik = (+pola.x1.value) + (+pola.x2.value);

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

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

  </body>
</html>

Rezultat

+ = 0

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