Output ve form event
<output> ve form öznitelikleriyle hesap gösterimi öğrenirsin.
Output ve for özniteliği
<output> etiketi, bir hesabın sonucunu göstermek içindir. Daha önce görmüştün; şimdi iki yeni özniteliğiyle birleştireceğiz.
for özniteliği, output'un hangi input'lardan gelen veriyi izlediğini söyler. Değer, boşlukla ayrılmış id listesidir: <output for="a b">. Bu, output'un id="a" ve id="b" olan inputları izlediğini belirtir.
Tarayıcı, izlenen inputlar değiştiğinde output'u otomatik güncelleyebilir; özellikle form özniteliğiyle birlikte kullanılınca güçlü olur.
form özniteliği ile dış bağlantı
form özniteliği, bir input ya da output'u formun dışında bile olsa bir forma bağlar. Normalde input, içinde bulunduğu forma aittir. Ama bazen input'u yerleşim nedeniyle form dışında tutmak istersin.
Örnek: <form id="calc">...</form> ve sonra <input type="number" form="calc">. Bu input, form dışında olmasına rağmen forma dahil edilir.
Aynı şekilde output da form özniteliğiyle bir forma bağlanabilir; bu sayede hesap sonucu, formun herhangi bir yerinden gösterilebilir.
Uygulama Hesap makinesi formu yaz
Body içine bir <form id="calc"> ekle. Form içine bir <input type="number" id="a" name="a"> ve bir <output for="a b" name="result"></output> koy. Sonra formun DIŞINA bir <input type="number" id="b" name="b" form="calc"> ekle. Bu input, form="calc" özniteliğiyle forma bağlansın.
Örnek çözümü göster
<body>
<form id="calc">
<label for="a">Sayı 1</label>
<input type="number" id="a" name="a">
<output for="a b" name="result"></output>
</form>
<label for="b">Sayı 2</label>
<input type="number" id="b" name="b" form="calc">
</body>Kendini test et
-
<output> etiketinin temel amacı nedir?
- Hesap sonucunu göstermek
- Dosya yüklemek
- Renk seçmek
- Menü oluşturmak
Cevabı göster
Hesap sonucunu göstermek — Doğru. output, bir hesabın ya da hesaplamanın sonucunu gösterir.
-
Output'a for özniteliği ekle
<output for="____" name="result"></output>Cevabı göster
<output for="a b" name="result"></output> -
Özniteliği amacıyla eşleştir
- for (output)
- İzlenen input'lar
- form
- Dış form bağlantısı
- id
- Benzersiz kimlik
- name
- Form verisi adı