Атрибут name тега <output> — ім'я поля з результатом

HTML

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

CSS

body { 
                text-align:center; 
            }

HTML

<h3>Приклад з використанням атрибуту <code>name</code></h3>
<form id="range" oninput="a.value=parseInt(x.value)">
    <label for="x">Задайте число:</label>
    <input type="range" id="x" name="x" value="0">
</form>
<output form="range" name="a"></output>

CSS

body { 
                text-align:center; 
            }

HTML

<form class="calc">
    <fieldset>
        <legend>Замовлення</legend>

        <p class="row">
            <label for="q">Кількість</label>
            <input id="q" name="qty" type="number" value="3" min="1">
            <span class="tag sent">name="qty" — поїде на сервер</span>
        </p>

        <p class="row">
            <label for="p">Ціна</label>
            <input id="p" name="price" type="number" value="120" min="0">
            <span class="tag sent">name="price" — поїде на сервер</span>
        </p>

        <p class="row">
            <label for="total">Разом</label>
            <output id="total" name="total" for="q p">360</output>
            <span class="tag skipped">name="total" — НЕ поїде на сервер</span>
        </p>

        <p class="row">
            <label for="mirror">Той самий підсумок полем-двійником</label>
            <input id="mirror" name="total_sent" value="360" readonly>
            <span class="tag sent">name="total_sent" — поїде на сервер</span>
        </p>
    </fieldset>

    <p class="note">Порахувати 3 × 120 сам &lt;output&gt; не вміє — це семантичний
        контейнер, число в нього кладе скрипт. Атрибут <b>for</b> показує на
        <b>id</b> полів (q і p), а не на їхні <b>name</b>.</p>
</form>

<p class="lonely-row"><output class="lonely"></output> — порожній output; напис
    у ньому домальовано правилом output:empty::before.</p>

CSS

fieldset {
    max-width: 560px;
    padding: 10px 14px;
    border: 2px solid #b9c6d8;
    border-radius: 6px;
}

legend {
    padding: 0 6px;
    font-weight: 600;
}

.row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 4px 6px;
    border-radius: 4px;
    flex-wrap: wrap;
}

.row:focus-within {
    background: #f2f7ff;
}

label {
    min-width: 250px;
    font-weight: 600;
}

input {
    width: 90px;
    padding: 4px 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

output {
    display: inline-block;
    min-width: 90px;
    padding: 4px 6px;
    border: 2px dashed #d64545;
    border-radius: 4px;
    background: #fff4f4;
    font: inherit;
    text-align: right;
}

.tag {
    padding: 2px 8px;
    border-left: 5px solid;
    font-size: .85em;
}

.sent {
    border-color: #3a9a4f;
    color: #2b6d3a;
    background: #f3fbf4;
}

.skipped {
    border-color: #d64545;
    color: #a02a2a;
    background: #fff4f4;
}

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

.lonely-row {
    max-width: 560px;
    margin: 22px 0 0;
    color: #5a6472;
    font-size: .9em;
}

output:empty::before {
    content: "тут поки порожньо";
    color: #8a94a6;
}