HTML5: How to specify one or more forms the label belongs to?

Last update on February 10 2024 11:42:01 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title> How to specify one or more forms the label belongs to </title><!-- Sets the title of the document -->
</head>
<body>
<p>The label for the first radio button is outside the form, but still a part of the form.
Try clicking the text label to toggle the yes radio button.</p><!-- Displays a paragraph -->
<form method="post"  action="https://www.w3resource.com/html-css-exercise/basic/solution/label-answer-demo.php" id="form1"><!-- Begins a form element with the method attribute set to "post", indicating that form data will be submitted via HTTP POST method. The action attribute specifies the URL where the form data will be sent upon submission, and assigns an id "form1" to the form -->
<input type="radio" name="answer"  value="yes" checked><br><!-- Creates a radio button input element with name "answer" and value "yes". The "checked" attribute makes this radio button initially selected -->
<label for="no">No</label><!-- Creates a label element for the radio button with id "no". The "for" attribute associates the label with the input element with the same id -->
<input type="radio" name="answer"  value="no"><br><br><!-- Creates a radio button input element with name "answer" and value "no" -->
<input type="submit" value="Submit"><!-- Creates a submit button within the form -->
</form><!-- Ends the form element -->
<label for="yes"><!-- Creates a label element for the radio button with id "yes". The "for" attribute associates the label with the input element with the same id -->
<form="form1">Yes</label><!-- Associates the label with the form element with id "form1" -->
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Inside the <body> section, there's a <p> element displaying a paragraph.
Below the paragraph, there's a <form> element, which creates a form for user input. The method attribute is set to "post", indicating that form data will be submitted via HTTP POST method. The action attribute specifies the URL where the form data will be sent upon submission, and assigns an id "form1" to the form.
Within the form, there are two sets of <input> and <label> elements. The first <label> element is associated with the first radio button using the "for" attribute, and the second <label> element is associated with the form using the "for" attribute and the id of the form.
The radio buttons have names "answer" and values "yes" and "no", respectively. The radio button with the "checked" attribute is initially selected.
Finally, an <input> element with type "submit" is used to create a submit button within the form, allowing users to submit the form data.

Live Demo:

See the Pen label-form-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page