tRikSonic
Tema

HTML output Tag

Terakhir diperbarui : 22 Mei 2018 - 06.54

Tutorial HTML <output>

Element html output mendefinisikan sebagai hasil keluaran/perhitungan atau hasil tindakan yang dilakukan oleh user.
html output
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>

<hr>

<p>
  Silahkan rubah value pada jumlah barang
</p>

</body>
</html>

Attribute HTML <output>

forAttribute 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>
Lihat Contoh
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>
  <!-- silahkan hapus attribute form, dan lihat perbedaannya -->
</p>

<p>
  Element Output berada diluar element form
</p>

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>

</body>
</html>
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>

</body>
</html>
<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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>

</body>
</html>

Browser Support HTML <output>

Desktop
ElementChromeSafariFirefoxOperaIEEdge
<output>105.1411-Ya
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<output>YaYaYa4Ya?Ya

Default CSS HTML <output>

Browser yang support dengan element <output>, mempunyai nilai default :
output {
    display: inline;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.