W3C-Validation problem with overlapping form and div-tags
I'm having problems with validating this code with the W3 validator.
The problem is with the &l开发者_运维百科t;form> tag.
I need the <form> tag to overlap several <div> and <span> tags because I have many different input fields and such, but I'm also using the Form2 and Form3 with input fields and such so I need to use </form> before the Form2. But this gives me problems when validating because it's overlapping <div> and <span> tags.
What can I do to make the validation work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv" xml:lang="sv" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="headerwrapper">
<div class="header alignleft">
<a href="index.html">Home</a>
</div>
<div class="header alignright">
<div id="searchfield">
Search
</div>
</div>
<div id="menu">
Menu
</div>
</div>
<div class="clear"></div>
<div class="content">
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
</form>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</div>
<div class="clear"></div>
<div class="divider800"></div>
<div id="footer">
Footer text
</div>
</div>
</body>
</html>
XHTML doesn't let you overlap tags. For example, this is invalid:
<div><form></div></form>
What you're going to want to do is, rather than trying to only encompass the items that you believe are in the form, encompass the <input /> tags that are in the form as well as their containers. For instance, your code should look like this instead:
<div class="content">
<form action="links.php" method="post"><input type="hidden" name="edit_page_check" value="yes" />
<div class="box alignleft">
<div class="boxtop"></div>
<div class="boxmiddle">
<p>
<span id="page_leftbox">Text</span>
</p>
</div>
<div class="boxbottom"></div>
</div>
<div class="column580 alignright">
<div class="header580">
<h2>Topic</h2><span class="headerdesc">Text</span>
</div>
<p>
<span id="page_info">Info</span>
</p>
<br/>
<div id="addlinkform" style="display: none;">
Form2
</div>
<div id="linkform" style="display: none;">
Form3
</div>
</div>
</form>
</div>
Notice how the form element spans ALL of the input tags' containers.
XML (XHTML in this case) needs to be well-formed. Take a look at this. You should be able to fix that problem by moving the <form>-tag up in the tree.
Instead of
<div>
<form action="/some_target" method="post">
<input/>
</div>
<div>
<input />
</form>
</div>
do the following (move the form element up, so that it wraps the inputs as well as their containers):
<form action="/some_target" method="post">
<div>
<input/>
</div>
<div>
<input />
</div>
</form>
加载中,请稍侯......
精彩评论