Tutorial HTML <output>
Element html
output
mendefinisikan sebagai hasil keluaran/perhitungan atau hasil tindakan yang dilakukan oleh user.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>
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> <!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> |
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
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; }