Mars Loo Mars Loo - 3 months ago 11
HTML Question

[HTML]how to upload values in the <fieldset> element if the <fieldset> tag is outside of the <form> tag

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form action="/check" id="demo" method="post" name="demo">
<input type="text" name="username" />username
<button type="button"
onclick="form.change_color.style.backgroundColor='#00FF00';">change
fieldset background</button>
<button type="button"
onclick="activateFieldset()">activate fieldset</button>
<input type="submit" value="submit" />
</form>
<fieldset form="demo" name="change_color">
<input type="password" name="password" />password
</fieldset>
<fieldset form="demo" disabled="disabled" name="license" id="license">
<input type="text" name="license_id" />license_id
</fieldset>
<script>
function activateFieldset(){
var e = document.getElementById("license");
e.disabled = "";
}
</script>
</body>
</html>


I fill in
a
,
b
and
c
into the
username
,
change_color
and
license_id
text box, but the browser only upload the data in
username
.

I tried Chrome/Opera/Firefox, they all worked like that.

Can anyone tell me why the browser doesn't upload the data in the element?

Thanks a lot!

Answer

Unlike some commenters state, it is very possible to have reassociateable elements out of a form, trough the use of an explicit FORM attribute, according to HTML5 RFC (though I agree that it is nicer to have them all grouped within the form).

And in your case, though you have specified well the form attribute in the fieldset, it happens that the elements which must have the form attribute are the INPUT ones.