Belajar Element HTML: <output>
Tag <output> mewakili hasil perhitungan atau tindakan pengguna.
Termasuk menampilkan hasil perhitungan yang dilakukan oleh script, atau bisa menampilkan output dari interaksi pengguna dengan elemen form.
Syntax
Tag <output> ditulis seperti <output> </output> dengan konten yang disisipkan di antara tag pembuka dan penutup.
Atribut for dapat digunakan untuk menentukan hubungan eksplisit yang akan dibuat antara hasil perhitungan dan elemen-elemen yang mewakili nilai-nilai yang masuk ke dalam perhitungan atau yang sebaliknya mempengaruhi perhitungan.
Atribut form dapat ditentukan untuk mengaitkan elemen <output> dengan pemilik formnya.
Atribut name juga dapat digunakan untuk memberikan nama untuk elemen.
Seperti ini:
<output for="" form="" name=""></output>
<form
oninput="sum.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" name="a" value="4">
+
<input type="number" name="b" value="7">
=
<output name="sum">11</output>
</form><form onsubmit="return false" oninput="amount.value = (principal.valueAsNumber * rate.valueAsNumber) / 100">
<fieldset>
<legend style="font-weight:bold;">Interest Calculator</legend>
<label for="principal">Amount to invest: $</label>
<input type="number" min="0" id="principal" name="principal" value="1000">
<p><label for="rate">Interest Rate: </label>
<input type="range" min="0" max="20" id="rate" name="rate" value="0" oninput="thisRate.value = rate.value">
<output name="thisRate" for="range">0</output><span>%</span></p>
<p>Interest Received: <strong>$<output name="amount" for="principal rate">0</output></strong></p>
</fieldset>
</form>name
Menentukan pengidentifikasi unik untuk input tersebut di dalam formulir. Ini memungkinkan server untuk mengakses setiap input nilai saat dikirimkan.
"sum"
Nilai name harus unik dalam konteks <form> container.
Itu hanya dapat berisi karakter alfanumerik a-z A-Z 0-9 dan beberapa karakter khusus seperti - _ ... tetapi bukan spasi.
Pengaturan Default CSS
Sebagian besar browser menampilkan elemen <ooutput> dengan pengaturan CSS:
output {
display: inline;
}