CODEWITHSUNDEEP
html
Steve
Steve

Reputation: 3

Missing trailing elements after an HTML form?

I really hope this isn't a stupid question, but this HTML seems too simple to fail. Still, it fails.

I have a page that starts with a form, and after the form, I have some more elements. Those elements are never displayed! Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>CGI Test</title>
</head>
<body>
    <form enctype="multipart/form-data" method="post" action="/cgi-bin/upload.cgi" target="upload_target">
        <input type="hidden" name="cmd" value="uploadBackgroundFile" />
     <p>File Upload:
     <input type="file" name="file" value="" /> (Select A Local File)</p>
     <p><input type="submit" name="cgitest" value="Submit Request" /></p>
        <iframe id="upload_target" name="upload_target" src=""
            style="visibility: hidden; width: 500px; height: 300px; border: 2px solid black;" />
    </form>
    <p />
    <hr />
    <h1>List of uploaded files:</h1>
    <ul id="listBackgroundFiles">
        <li>(Nothing loaded yet)</li>
    </ul>
</body>
</html>

Also, if I call "document.getElementById('listBackgroundFiles')", it returns null. The elements after the form aren't just not displayed, they don't seem to exist at all!

This doesn't appear to be a browser issue...I get the same problem in Internet Explorer 7.0.6002.18005, Firefox 3.6.12, Chrome 5.0.375.99, Opera 10.60.3445, and Safari 5.0.2 (7533.18.5), all running (sadly) under Windows Vista. I ran the page through the W3C and WDG validators, and those didn't show any problems. Finally, if I move those elements above the form, they display just fine. It seems to be an issue with putting elements after the form.

Again, I apologize if this is a stupid question, but I'm baffled by how something this simple could fail so consistently.

Upvotes: 0

Views: 194

Answers (3)

Dan
Dan

Reputation: 2341

change 

<iframe id="upload_target" name="upload_target" src=""
            style="visibility: hidden; width: 500px; height: 300px; border: 2px solid black;" />

to

<iframe id="upload_target" name="upload_target" src=""
            style="visibility: hidden; width: 500px; height: 300px; border: 2px solid black;" ></iframe>

As far as I know, <iframes> and <scripts> should always be closed by writing another closing tag, not in a single tag.

Check this link for the a list of HTML Tags, only tags that are self closed in this list, can and SHOULD be self closed: List of HTML Tags

Although according to my experience, script and iframe tags are the most dangerous ones.

Upvotes: 2

Robusto
Robusto

Reputation: 31883

The iframe is not self-closing. Try it like this and it will work.

<iframe id="upload_target" name="upload_target" src=""
            style="visibility: hidden; width: 500px; height: 300px; border: 2px solid black;"></iframe>

Upvotes: 1

superfro
superfro

Reputation: 3302

Even though your code validates, the self closing iframe is the problem. Change <iframe /> to <iframe> </iframe>. Just like the script tag its one of those 'things'...

Upvotes: 0

Related Questions