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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!