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

Question

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 1

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.

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

Sign up