Question

我在使用W3验证器验证此代码时遇到问题。问题出在<form>标记上。我需要<form>标记重叠多个<div>和<span>标记，因为我有许多不同的输入字段等等，但我也使用Form2和Form3以及输入字段等等我需要在Form2之前使用</form>。但是这在验证时会给我带来问题，因为它是重叠的<div>和<span>标签。我该怎么做才能使验证工作？

<!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>

Answer 1

XHTML不允许您重叠标签。例如，这是无效的：

<div><form></div></form>

您要做的不是尝试仅包含您认为在表单中的项目，而是包含形式的<input />标记以及< / em>他们的容器。例如，您的代码应该是这样的：

<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>

注意表单元素如何跨越所有输入标记的容器。

Answer 2

XML（本例中为XHTML）需要格式良好。看看this。您应该能够通过在树中移动<form> - 标记来解决该问题。

而不是

<div>
    <form action="/some_target" method="post">
        <input/>
</div>
<div>
        <input />
    </form>
</div>

执行以下操作（向上移动form元素，以便它包装输入及其容器）：

<form action="/some_target" method="post">
    <div>
        <input/>
    </div>
    <div>
        <input />
    </div>
</form>

重叠形式和div标签的W3C验证问题

2 个答案: