HTML output Tag

Tutorial HTML <output>

Element html output mendefinisikan sebagai hasil keluaran/perhitungan atau hasil tindakan yang dilakukan oleh user.

Image by pixabay.com - belajar html <output>

Contoh HTML <output>

<form onsubmit="return false" 
   oninput="total.value = jumlah.valueAsNumber * harga.value">
  <h2>Keranjang Belanja</h2>

  <p>
    <label for="jumlah">Jumlah Barang</label>
    <input type="number" min="0" max="10" id="jumlah" name="jumlah"/>
  </p>

  <p>
    <label for="harga">harga</label>
    <input readonly value="10000" id="harga" name="harga"/>
  </p>
  
  <p>Total: 
    <strong>IDR <output name="total" for="jumlah harga">0</output></strong>
  </p>
  
</form>

Attribute HTML <output>

for	Attribute ini berisi daftar attibute ID, dan mempunyai fungsi sebagai penentu hasil keluaran pada element <output>. Nilai atau value ini adalah element_id Penjelasannya dapat dilihat pada contoh berikut : <input id="jumlah"/> <input id="harga"/> <!-- perhatikan warna stabilo --> <output for="jumlah harga">xxxx</output>
form	Attribute memungkinkan element <output> berada diluar element <form> Nilai atau value attribute ini adalah Attribut ID element <form> Contoh : <form id="contoh">...</form> <output form="contoh">xxx</output> <form id="contoh" onsubmit="return false" oninput="total.value = jumlah.valueAsNumber * harga.value"> <h2>Keranjang Belanja</h2> <p> <label for="jumlah">Jumlah Barang</label> <input type="number" min="0" max="10" id="jumlah" name="jumlah"/> </p> <p> <label for="harga">harga</label> <input readonly value="10000" id="harga" name="harga"/> </p> </form> <hr> <p>Total: <strong>IDR <output form="contoh" name="total" for="jumlah harga">0</output></strong> </p>
name	Attribute ini digunakan untuk menentukan nama element <output> Nilai atau value attribute ini adalah name <form oninput="total.****> ** *** <output name="total">xxx</output> </form> Lihat Contoh

Contoh HTML <output>

Berikut beberapa contoh tambahan penggunaan HTML <output> :

<form onsubmit="return false" oninput="persentase.value = range.valueAsNumber">
  <b>Nilai Persentase</b>
  <input name="range" id="tes123" type="range" min="0" max="100" value="10"> 
  <output for="tes123" name="persentase">10</output>/100
</form>

<h2>Penambahan</h2>
<form onsubmit="return false" 
  oninput="hasil.value = parseInt(area1.value) + parseInt(area2.value)">
  <input name="area1" type="number"/> +
  <input name="area2" type="number"/> =
  <output name="hasil"></output>
</form>

<h2>Perkalian</h2>
<form onsubmit="return false" 
  oninput="hasilperkalian.value = parseInt(area3.value) * parseInt(area4.value)">
  <input name="area3" type="number"/> x
  <input name="area4" type="number"/> =
  <output name="hasilperkalian"></output>
</form>

<form oninput="tesDemo();">
  <input id="input1" type="number"/> +
  <input id="input2" type="number"/> =
  <output id="output"></output>
</form>

<script>
function tesDemo(){
  var e=document.getElementById("output"),
      t=document.getElementById("input1").value,
      n=document.getElementById("input2").value;
      e.innerHTML=parseFloat(""+t)+parseFloat(""+n)
}
</script>

Browser Support HTML <output>

Desktop

Element	Chrome	Safari	Firefox	Opera	IE	Edge
<output>	10	5.1	4	11	-	Ya

Mobile

Element	Android webview	Chrome Android	Edge mobile	Firefox Android	IE mobile	Opera Android	iOS Safari
<output>	Ya	Ya	Ya	4	Ya	?	Ya

Default CSS HTML <output>

Browser yang support dengan element <output>, mempunyai nilai default :

output {
    display: inline;
}