How to specify one or more forms the object belongs to ?
Last Updated :
05 Jun, 2023
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 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: In this example, we have created the object separately, but it is also a part of the form.
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:
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...