<
html
>
<
body
>
<
style
>
body {
text-align: center;
background-color: lightgreen;
font-size: 16px;
}
.btn {
background-color: #4caf50;
color: white;
padding: 12px 24px;
}
</
style
>
<
h1
style
=
"color: green"
>GeeksForGeeks</
h1
>
<
h2
>
How to specify one or more forms
the label belongs to?
</
h2
>
<
h3
>First Form</
h3
>
<
form
id
=
"form1"
>
<
label
for
=
"fname"
> First Name: </
label
>
<
input
type
=
"text"
id
=
"fname"
name
=
"fname"
/>
<
br
/><
br
/>
<
button
class
=
"btn"
type
=
"submit"
>Submit</
button
>
</
form
>
<
h3
>Second Form</
h3
>
<
form
id
=
"form2"
>
<
label
for
=
"state"
>State:</
label
>
<
input
type
=
"text"
id
=
"state"
name
=
"state"
/>
<
br
/><
br
/>
<
button
class
=
"btn"
type
=
"submit"
>Submit</
button
>
</
form
>
<
p
>
The "Last Name" label is not in the <
form
>
element but it is defined
as a part of first form.
</
p
>
<
label
for
=
"lname"
form
=
"form1"
> Last Name: </
label
>
<
input
type
=
"text"
id
=
"lname"
name
=
"lname"
form
=
"form1"
/>
<
p
>
The "City" label is not in the <
form
>
element but it is defined as a
part of second form.
</
p
>
<
label
for
=
"city"
form
=
"form2"
>City:</
label
>
<
input
type
=
"text"
id
=
"city"
name
=
"city"
form
=
"form2"
/>
</
body
>
</
html
>