HTML <object> name Property: Defining Object Names

The HTML <object> tag is used to embed various types of content within an HTML document, such as Flash movies, Java applets, or even other HTML pages. The name property allows you to assign a name to the embedded object, which can be useful for scripting and, more importantly, for including the object as part of a form submission. This guide will provide a detailed explanation of the name property, its syntax, practical examples, and its role in web development.

What is the name Property?

The name attribute specifies a name for an <object> element. This name can be used by JavaScript to reference the object or, more commonly, to include the object’s data in a form submission. When a form is submitted, named objects can contribute their data to the submitted data set, allowing embedded content to interact with server-side processes.

Syntax

The syntax for using the name property within the <object> tag is straightforward:

<object data="URL" type="MIME type" name="objectName">
  <!-- Fallback content -->
</object>

Here, objectName is the name you assign to the object.

Attributes Table

| Attribute | Type | Description |
| :——– | :—– | :———————————————————————————————————————————————————————— |
| name | String | Specifies a name for the <object> element. This name can be used to reference the object in JavaScript or to include the object’s data when the form is submitted. |

Practical Examples

Let’s explore some practical examples of how to use the name property with the <object> tag.

Basic Usage

In this example, we’ll embed a simple SVG file and assign it a name:

<form id="myForm_nameBasic">
  <object data="image.svg" type="image/svg+xml" name="mySvg"></object>
  <input type="submit" value="Submit" />
</form>

In this case, the object containing the SVG is named mySvg. While the SVG itself doesn’t directly contribute data to the form, this structure sets the stage for more complex interactions.

Including Object Data in Form Submissions

To demonstrate including object data in form submissions, let’s consider a scenario where the embedded object (e.g., a Flash movie or a custom JavaScript component) has a method to retrieve data. This data can then be included when the form is submitted.

<form id="myForm_nameSubmission" onsubmit="submitForm_name(event)">
  <object data="data.swf" type="application/x-shockwave-flash" name="myData">
    <param name="movie" value="data.swf" />
  </object>
  <input type="hidden" id="objectData_name" name="objectData" value="" />
  <input type="submit" value="Submit" />
</form>

<script>
  function submitForm_name(event) {
    event.preventDefault();
    const myFormElement = document.getElementById("myForm_nameSubmission");
    const objectDataElement = document.getElementById("objectData_name");
    const myDataObject = document.forms["myForm_nameSubmission"].elements[
      "myData"
    ];
    // Assume myDataObject has a method getData() that returns the data
    objectDataElement.value = myDataObject.getData();
    alert(
      "Form submitted with data: " + myFormElement.objectData_name.value
    );
  }
</script>

In this example, the submitForm_name function intercepts the form submission, retrieves data from the embedded Flash object using a hypothetical getData() method, and includes this data in a hidden input field before submitting the form.

Accessing the Object with JavaScript

The name property also allows you to access the embedded object using JavaScript for manipulation or interaction:

<object
  id="myObject_nameJs"
  data="external.html"
  type="text/html"
  name="extHtml"
></object>

<script>
  const myObjectElement = document.getElementById("myObject_nameJs");
  // Accessing the object by its name
  const externalHtmlObject = document.forms[0].elements["extHtml"];
  // You can now manipulate the object, for example, accessing its content
  // Note: Accessing content depends on the type of object and browser security restrictions
  console.log(externalHtmlObject);
</script>

Here, the embedded HTML content can be accessed via its name, allowing for dynamic manipulation or data retrieval, subject to cross-origin policies and the nature of the embedded content.

Complex Example: Interactive Form with Canvas Object

Consider an interactive canvas object that allows users to draw and the drawing needs to be submitted as part of a form.

<form id="myForm_nameCanvas" onsubmit="submitCanvasForm_name(event)">
  <canvas id="drawingCanvas_name" width="200" height="100"></canvas>
  <input
    type="hidden"
    id="canvasData_name"
    name="canvasData"
    value=""
  />
  <input type="submit" value="Submit" />
</form>

<script>
  const drawingCanvasElement = document.getElementById("drawingCanvas_name");
  const ctx_canvasName = drawingCanvasElement.getContext("2d");
  let drawing_name = false;

  drawingCanvasElement.addEventListener("mousedown", startDrawing_name);
  drawingCanvasElement.addEventListener("mouseup", stopDrawing_name);
  drawingCanvasElement.addEventListener("mouseout", stopDrawing_name);
  drawingCanvasElement.addEventListener("mousemove", draw_name);

  function startDrawing_name(e) {
    drawing_name = true;
    draw_name(e);
  }

  function stopDrawing_name() {
    drawing_name = false;
    ctx_canvasName.beginPath();
  }

  function draw_name(e) {
    if (!drawing_name) return;
    ctx_canvasName.lineWidth = 2;
    ctx_canvasName.lineCap = "round";
    ctx_canvasName.strokeStyle = "black";

    ctx_canvasName.lineTo(e.offsetX, e.offsetY);
    ctx_canvasName.stroke();
    ctx_canvasName.beginPath();
    ctx_canvasName.moveTo(e.offsetX, e.offsetY);
  }

  function submitCanvasForm_name(event) {
    event.preventDefault();
    const canvasDataElement = document.getElementById("canvasData_name");
    canvasDataElement.value = drawingCanvasElement.toDataURL();
    alert("Form submitted with canvas data!");
  }
</script>

In this scenario, the canvas allows users to draw, and when the form is submitted, the canvas content is converted to a data URL and included in the form data. This is a practical example of how the name property can be useful in real-world applications.

Tips and Notes

• The name property is most useful when you need to include data from an embedded object as part of a form submission.
• Ensure that the embedded object has a mechanism to retrieve the data you want to include in the form.
• Be mindful of cross-origin policies when accessing content from embedded objects, especially if they are from different domains.
• When working with canvas elements, the toDataURL() method is handy for including the canvas content in form submissions.

Browser Support

The name property is widely supported across all modern web browsers.

Conclusion

The name property of the HTML <object> tag is a valuable tool for including embedded objects in form submissions and for accessing these objects using JavaScript. By understanding its syntax and practical applications, you can create more interactive and dynamic web applications. Whether you’re embedding Flash movies, Java applets, or interactive canvas elements, the name property provides a way to integrate these objects seamlessly into your web forms.