Атрибут form тега <output> — до якої форми належить

HTML

<h3>Приклад з використанням атрибуту <code>form</code></h3>
<form oninput="l.value=2*Math.PI.toFixed(2)*parseInt(r.value)">
    <label for="r">Радіус кола:</label>
    <input type="number" id="r" name="r" value="0"><br><br>
    Довжина кола: <output name="l"></output>
</form>

CSS

body { 
                text-align:center; 
            } 
            h1 { 
                color:green; 
            }

HTML

<h3>Приклад з використанням атрибуту <code>form</code></h3>
<p>Множення чисел:</p>
		<form oninput = "d.value = e.valueAsNumber * f.valueAsNumber">
			<input type = "number" id = "e"> *
			<input type = "number" id = "f"> =
			<mark> <output  name = "d" for = "e f"> </output> </mark>
		</form>
		<p>Ділення чисел:</p>
		<form oninput = "z.value = g.valueAsNumber / h.valueAsNumber">
			<input type = "number" id = "g" step = "10" > /
			<input type = "number" id = "h" step = "5" > =
			<mark> <output  name = "z" for = "g h"> </output> </mark>
		</form>

CSS

body { 
                text-align:center; 
            } 
            h1 { 
                color:green; 
            }

HTML

<form id="rahunok" name="calc">
  <p class="head">Сума замовлення</p>
  <p>
    <input type="radio" name="suma" id="s1" checked><label for="s1">200 грн</label>
    <input type="radio" name="suma" id="s2"><label for="s2">500 грн</label>
    <input type="radio" name="suma" id="s3"><label for="s3">900 грн</label>
  </p>
</form>

<p class="res">Правильно, form="rahunok" — це id форми:<br>
  <output form="rahunok" for="s1 s2 s3" class="ok"></output></p>

<p class="res">Помилка: form="calc" — це ім'я форми, а не id:<br>
  <output form="calc" for="s1 s2 s3" class="zle"></output></p>

<p class="res">Помилка: неіснуючий id:<br>
  <output form="nemaje-takoji" for="s1 s2 s3" class="zle"></output></p>

<p class="note">Обидва зіпсовані записи однаково не належать жодній формі, і жодного
   повідомлення про це переглядач не дає.</p>

CSS

.head {
    margin: 0 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

form {
    max-width: 520px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

label {
    margin-right: 14px;
}

.res {
    max-width: 520px;
    margin: 12px 0;
}

output {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font: 700 16px/1.6 ui-monospace, monospace;
}

.ok {
    background: #f3fbf4;
    border: 2px solid #3a9a4f;
}

.zle {
    background: #fff4f4;
    border: 2px solid #d64545;
}

output::after {
    content: "  [form=" attr(form) "]";
    font: 400 12px/1 ui-monospace, monospace;
    color: #5a6472;
}

body:has(#s1:checked) .ok::before {
    content: "240,00 грн";
}

body:has(#s2:checked) .ok::before {
    content: "600,00 грн";
}

body:has(#s3:checked) .ok::before {
    content: "1 080,00 грн";
}

.zle::before {
    content: "порожньо — форма до цього елемента не дістанеться";
    font: 400 14px/1.6 system-ui, sans-serif;
    color: #c0392b;
}

.note {
    max-width: 520px;
    color: #5a6472;
    font-size: .9em;
}