RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/output-form-answer.php below:

Website Navigation

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

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)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4