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ı

Sıradaki ders: Özet - Ayarlar paneli

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler