HTML5: How to specify one or more forms the output element belongs to?

Last update on February 12 2024 12:52:42 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify one or more forms the output element belongs to</title><!-- Title of the HTML document -->
</head>
<body>
<form oninput="second_output.value=parseInt(a.value)+parseInt(b.value)" id="MyForm"><!-- Form element with oninput attribute triggering calculation -->
<input type="range" name="b" value="50" /> + <!-- Range input field with default value 50 -->
<input type="number" name="a" value="10" /> = <!-- Number input field with default value 10 -->
</form>
<output form="MyForm" name="second_output" for="x y"></output><!-- Output field displaying the result, associated with form "MyForm" -->
</body>
</html>

Explanation:

This HTML code demonstrates how to specify one or more forms that an <output> element belongs to.
Here's the breakdown:
The document starts with the declaration of the document type and contains various elements.
The form with the ID MyForm contains two input elements: a range input and a number input.
JavaScript code within the oninput attribute of the form calculates the sum of the values entered into the input fields (after parsing them as integers).
The parseInt() function is used to convert the input values from strings to integers for proper addition.
The <input> elements are associated with the form MyForm through their respective name attributes.
The <output> element with the name second_output is associated with the form MyForm using the form attribute.

Live Demo:

See the Pen output-form-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page