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