HTML5: How to specify a name for the output element?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML5 -->
<html><!-- Start of HTML document -->
<head><!-- Start of head section -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify a name for the output element</title><!-- Title of the document -->
</head><!-- End of head section -->
<body><!-- Start of body section -->
<form method="post" <!-- Start of form element with HTTP method POST -->
<form <!-- Nested form tag without attributes, likely a typo and should be removed -->
oninput="output.value=parseInt <!-- Define JavaScript function to calculate sum -->
(first.value)+parseInt
(second.value)">0 <!-- Initial value for the first input -->
<input type="range" id="first" <!-- Define input as a range slider -->
value="0">100 <!-- Maximum value for the range slider -->
+<input type="number" id="second" <!-- Define input as a number -->
value="50"><!-- Initial value for the number input -->
=<output name="output" for="first 
second"></output><!-- Output element to display the sum -->
</form><!-- End of form element -->
</body><!-- End of body section -->
</html><!-- End of HTML document -->

Explanation:

The HTML code demonstrates how to specify a name for the output element that displays the sum of two input values.
It includes a form with two input elements: a range slider (<input type="range">) and a number input (<input type="number">).
The sum of the values from these inputs is calculated using JavaScript (oninput event) and displayed in an output element (<output>).
However, there's a syntax error with a nested <form> tag without attributes, which seems to be a typo and should be removed for proper HTML structure.

Live Demo:

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page