Атрибут for тега <output> — які поля дали цей результат

HTML

<h3>Приклад з використанням атрибуту <code>for</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 class="calc">
    <p><label for="cina">Ціна</label>
        <input id="cina" name="cina" type="number" value="120"></p>

    <p><label for="kilkist">Кількість</label>
        <input id="kilkist" name="kilkist" type="number" value="3"></p>

    <p class="res">Разом: <output for="cina kilkist" name="разом">360</output></p>

    <p class="res">Без for: <output name="bez">360</output></p>

    <p class="res">З неіснуючими id: <output for="cina2 kilkist2">жодної помилки не буде</output></p>
</form>

<p class="note">Підпис і результат дивляться в різні боки: у label for — це «до якого поля я
    належу», в output for — «з яких полів мене пораховано».</p>

CSS

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

label {
    display: inline-block;
    min-width: 110px;
    font-weight: 600;
}

input {
    padding: 5px 8px;
    font: 15px/1.4 ui-monospace, monospace;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.res {
    font-weight: 600;
}

output {
    padding: 2px 6px;
    border-radius: 3px;
    background: #eef3fb;
    font-family: ui-monospace, monospace;
}

label::after,
output::after {
    font-family: ui-monospace, monospace;
    font-size: .8em;
    font-weight: 400;
    color: #1b4f9c;
    content: " [for=" attr(for) "]";
}

output:not([for])::after {
    color: #c0392b;
    content: " [for немає — зв'язок ніде не записано]";
}

.note {
    max-width: 560px;
    margin-top: 14px;
    color: #5a6472;
    font-size: .9em;
}