revision:
It can be used on the <label> and <output> elements.
When used together with the <label> element, the "for attribute" specifies which form element a label is bound to, i.e. to specify an "identifier" to the label element.
When used together with the <output> element, the "for attribute" specifies the relationship between the result of the calculation and the elements used in the calculation.
<label for="element_id">
<output for="element_id">
label: element_id: the id of the element the label is bound to.
output: element_id: specifies the relationship between the result of the calculation and the elements used in the calculation.
Click on one of the text labels to toggle the related radio button:
codes:
<p class="spec">Click on one of the text labels to toggle the related radio button:</p>
<form style="margin-left:5vw;" action="action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</labsel><br><br>
<input type="submit" value="Submit">
</form>
codes:
<form style="margin-left:5vw;" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
The value of this attribute must be equal to the id attribute of a <form> element in the same document.
The form attribute can be used on the following elements: <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>.
<element form="form_id">
The button below is outside the form element, but still part of the form.
codes:
<form style="margin-left:5vw;" action="action_page.php" method="get" id="nameform">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</form>
<p class="spec">The button below is outside the form element, but still part of the form.</p>
<button style="margin-left:5vw;" type="submit" form="nameform" value="Submit">Submit</button>
The fieldset below is outside the form, but still a part of the form.
codes:
<form style="margin-left:5vw;" action="action_page.php" method="get" id="form1">
<label for="favcolor">What is your favorite color?</label>
<input type="text" id="favcolor" name="favcolor">
<input type="submit">
</form>
<p class="spec">The fieldset below is outside the form, but still a part of the form.</p>
<fieldset style="margin-left:5vw;" form="form1">
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" form="form1"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</fieldset>
This attribute overrides the form's action attribute.
The formaction attribute is only used for <button> with type="submit" and <input> with type="submit" and type="image".
The formaction attribute works when there are two submit buttons in a form and you want both the buttons to work separately. Both the buttons send data to different pages.
<input type="submit/image " formaction="URL">
<button type="submit" formaction="URL">
URL specifies the URL of the file that will process the input control when the form is submitted.
Possible values: an absolute URL (i.e. the full address of a page) or a relative URL, which points to a file within the current site.
codes:
<form style="margin-left:5vw;" action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<button type="submit">Submit</button>
<button type="submit" formaction="/action_page2.php">Submit to another page</button>
HTML codes:
<form style="margin-left:5vw;" action="action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formaction="action_page2.php" value="Submit to another page">
</form>