How to specify one or more forms the object belongs to ?
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:
Filename: gfg.html
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> |
Filename: new.html
html
<!DOCTYPE html> <html> <head> <title> Form attribute </title> <style> body{ text-align: center; font-size: 20px; } </style> </head> <body> <h1> It is the computer science portal for geeks. </h1> </body> </html> |
Output:
Please Login to comment...