当前位置： 文江博客话题详情

W3C-重叠表单和 div 标签的验证问题

发布于 2024-09-28 08:56:03 字数 2260 浏览 6 评论 0原文

我在使用 W3 验证器验证此代码时遇到问题。 问题出在

标记上。 我需要 标记来重叠多个
和 标记，因为我有许多不同的输入字段，这样，但我还使用带有输入字段的 Form2 和 Form3 等，因此我需要在 Form2 之前使用 。但这在验证时给我带来了问题，因为它与
和 标签重叠。 我该怎么做才能使验证工作正常进行？

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

I'm having problems with validating this code with the W3 validator.
The problem is with the <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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

揪着可爱 2024-10-05 08:56:03

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

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

您要做的是，不要试图只包含您认为表单中的项目，而是包含 标签其形式及其容器。例如，您的代码应该如下所示：

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

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

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.

回复 原文
丢了幸福的猪 2024-10-05 08:56:03

XML（在本例中为 XHTML）需要格式良好。看看这个。您应该能够通过在树中向上移动

标签来解决该问题。

而不是

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

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>
回复 原文
~没有更多了~

关于作者

守护在此方

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文