Skip to content
Related Articles

Related Articles

Improve Article

How to specify one or more forms the object belongs to ?

  • Last Updated : 16 Apr, 2021

The purpose of this article is to specify one or more forms the object belongs to. In simple words, we just have to create a form and then after creating an object we just have to specify that which form it belongs to. Form element is used to create an HTML form for user input. Object element is used to define a container for an external resource. 

form attribute is used to specify which form the object belongs to. This attribute is accepted by the object element.

Approach:

  • First, we will create an HTML page with a form element.
  • Create an object and specify which form it belongs to.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Form attribute </title>
    <style>
        body {
            text-align: center;
            background-color: lightgreen;
            font-size: 20px;
        }
          
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
  
<body>
  
    <h1 style="color:green">GeeksForGeeks</h1>
  
    <form id="form1">
        First name: <input type="text" name="fname">
        <br><br>
        <button>Submit</button>
  
    </form>
    <br><br>
    <object data="gfg.jpg" 
            width="350" 
            height="250" 
            form="form1">
    </object>
  
  
</body>
  
</html>

Output: In this example we have created the object separately, but it is also a part of the form.



Example 2:

gfg.html




<!DOCTYPE html>
<html>
  <head>
    <title>Form attribute</title>
    <style>
      body {
        text-align: center;
        background-color: lightgreen;
        font-size: 20px;
      }
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1 style="color: green">GeeksForGeeks</h1>
  
    <form id="form1">
      First name: <input type="text" name="fname" />
      <br /><br />
      <button>Submit</button>
    </form>
    <br /><br />
    <object data="new.html" width="550" 
            height="250" form="form1">
    </object>
  </body>
</html>

new.html




<!DOCTYPE html>
<html>
    <head>
        <title>
            Form attribute
        </title>
        <style>
                body{
                    text-align: center;
                    font-size: 20px;
                      
                }
        </style>
    </head>
  
    <body>
        <h1>
         It is the compter science portal for geeks.
        </h1>
    </body>
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up