Form pesanan di Kedai Kopi Siti memuat kalkulator kecil: pengguna mengetik jumlah porsi, halaman menampilkan total harga. Tempat menampilkan total itu bukan span biasa — HTML menyediakan elemen khusus bernama output, penampung hasil perhitungan atau hasil tindakan pengguna. Elemen ini membawa dua keunggulan yang tidak terlihat mata: hubungan semantik dengan input yang terlibat, dan status wilayah hidup (live region) yang membuat pembaca layar ikut mengumumkan setiap perubahan hasil.

Chapter ini membahas anatomi output, atribut for, perilaku live region, dan contoh kalkulator porsi yang lengkap dengan pembaruan nilai.

Penampung Hasil Perhitungan #

Aturannya: output menampilkan hasil perhitungan atau hasil tindakan yang diperoleh dari elemen-elemen input lain. Isinya adalah nilai — teks yang mewakili angka, tanggal terpilih, atau ringkasan pilihan. Mekanismenya: output diperbarui dari JavaScript; elemen ini punya properti value seperti input, sehingga mengisi hasil semudah total.value = jumlah * harga, tanpa perlu menyentuh innerHTML.

Atribut for: menautkan input yang terlibat #

Atribut for berisi daftar id input yang berkontribusi pada hasil, dipisahkan spasi. Atribut ini membangun hubungan semantik: browser dan alat bantu dapat menelusuri bahwa hasil tertentu berasal dari input-input tertentu. Berbeda dengan label for yang merujuk satu kontrol, output for boleh merujuk banyak kontrol sekaligus.

Live region untuk pembaca layar #

Peran aksesibilitas bawaan output adalah status — sebuah live region. Saat kita mengganti isinya, pembaca layar mengumumkan nilai baru tanpa pengguna harus memindahkan fokus ke elemen tersebut. Manfaatnya nyata: pengguna yang mengetik jumlah porsi tetap mendengar total terbaru sambil fokusnya berada di kotak isian.

Contoh Kalkulator Porsi #

Kalkulator harga kopi susu, 18.000 rupiah per porsi:

html 
<form>
  <label for="porsi">Jumlah porsi kopi susu</label>
  <input type="number" id="porsi" name="porsi" min="1" max="20" value="2">
  <p>Total: <output id="total" for="porsi">36000</output></p>
</form>

<script>
  const porsi = document.getElementById("porsi");
  const total = document.getElementById("total");

  function hitung() {
    total.value = Number(porsi.value) * 18000;
  }

  porsi.addEventListener("input", hitung);
  hitung();
</script>

Mari kita telaah kode di atas:

  1. Baris 2–3 (label dan input): kotak isian jumlah porsi dengan label yang menyertainya — pasangan standar dari section Forms.
  2. Baris 4 (for="porsi"): mendeklarasikan bahwa hasil kalkulator ini berasal dari input ber-id="porsi"; hubungan semantik terbaca browser.
  3. Baris 4 (36000 di dalam output): nilai awal hasil — konten elemen adalah nilainya, dan nilainya bisa langsung terbaca meski skrip gagal berjalan.
  4. Baris 10 (total.value = ...): properti value milik output — mengisinya sama mudahnya dengan mengisi input; perubahan ini pula yang memicu pengumuman pembaca layar.
  5. Baris 13 (addEventListener("input", ...)): setiap ketikan pengguna memanggil ulang hitung() sehingga total selalu mutakhir.
  6. Baris 14 (hitung() tanpa argumen): dipanggil sekali saat halaman dimuat agar total cocok dengan value="2" bawaan sejak awal.

Hasil Render: form menampilkan kotak isian bernilai 2 dan teks “Total: 36000”; setiap perubahan angka pada kotak isian langsung mengganti total — 5 porsi menjadi 90000, dan seterusnya.

Ringkasan #

  • output menampung hasil perhitungan atau tindakan; isi elemennya adalah nilainya dan dapat diisi lewat properti .value.
  • Atribut for mendaftar id input yang berkontribusi pada hasil — hubungan semantik, bukan sekadar dekorasi.
  • Peran status menjadikan output live region: pembaca layar mengumumkan setiap perubahan nilai.
  • Nilai tetap diperbarui dari JavaScript — elemen ini mengurus makna dan pengumuman, bukan aritmetika.

Chapter berikutnya meninggalkan pelaporan keputusan pemilihan elemen yang paling mendasar dalam interaksi: kapan memakai button dan kapan memakai link.