YouTip LogoYouTip

Att Output Name

## HTML <output> name Attribute The `name` attribute of the `` element is used to define a unique name for the element. This name is primarily used to reference the element within JavaScript or to identify the output value when the containing form is submitted. --- ## Definition and Usage The `` element represents the result of a calculation or user action. The `name` attribute serves two main purposes: 1. **Form Submission:** It acts as the key (identifier) for the element's value when the form data is sent to a server. 2. **Scripting Reference:** It allows developers to easily reference and update the element's value using JavaScript via the form's elements collection (e.g., `form.elements['element_name']`). --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *name* | Specifies the name of the `` element. It must be a unique string within the form. | --- ## Code Example The following example demonstrates how to perform a calculation using two input fields and display the result in an `` element using the `name` attribute. ```html
0 100 + = 100
``` ### How it works: * The `
` element listens for the `oninput` event. * When either input `a` or `b` changes, the JavaScript expression `x.value=parseInt(a.value)+parseInt(b.value)` is executed. * `x` refers directly to the `` element because its `name` attribute is set to `"x"`. --- ## Browser Support The `` element and its `name` attribute are widely supported by modern web browsers: | Browser | Supported | | :--- | :--- | | **Google Chrome** | Yes | | **Mozilla Firefox** | Yes | | **Safari** | Yes | | **Opera** | Yes | | **Internet Explorer** | No | > **Note:** Internet Explorer does not support the `` tag. If you need to support legacy IE browsers, you should use a standard `` or `
` and update its content manually via JavaScript. --- ## Specifications and Differences * **HTML5 Standard:** The `` tag and its `name` attribute were introduced in HTML5. They do not exist in HTML 4.01 or XHTML 1.0. * **Semantic Value:** Using `` with a `name` attribute is semantically superior to using generic elements like `` or `
` for displaying calculation results, as it explicitly defines the relationship between inputs and outputs for assistive technologies (accessibility).
← Att P AlignAtt Output Form β†’

YouTip © 2024-2026 | Home | Learn Technology, Build Dreams!

All content is for educational and learning purposes only.