2010-10-22 1 views
1

У меня возникли проблемы с проверкой этого кода с помощью валидатора W3. Проблема с тегом <form>. Мне нужен тег <form>, чтобы наложить несколько меток <div> и <span>, потому что у меня есть много разных полей ввода и т. Д., Но я также использую Form2 и Form3 с полями ввода и так, поэтому мне нужно использовать </form> перед Form2. Но это дает мне проблемы при проверке, потому что это перекрытие <div> и <span> тегов. Что я могу сделать, чтобы проверить работу?W3C-проблема проверки с перекрывающейся формой и div-тегами

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

Все тестовые теги, которые вы задали в своем вопросе, удаляются процессором дисплея. Вопрос будет более ясным, если они будут экранированы или каким-то иным образом сделаны видимыми - может помочь их использование в символах (блок кода). – pjmorse

+0

@pjmorse: Я исправил это. – jwueller

ответ

0

XML (XHTML в этом случае) должен быть хорошо сформирован. Взгляните на this. Вы должны устранить эту проблему, переместив <form> -tag в дерево.

Вместо

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

XHTML не позволяют перекрывать теги. Например, это недействительно:

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

Что вы будете хотеть, чтобы сделать это, а не пытаться только охватить те элементы, которые по Вашему мнению, в форме, охватывают <input /> тегов, которые находятся в форме , а также их контейнеры. Например, ваш код должен выглядеть следующим образом, вместо:

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

Обратите внимание, как элемент формы охватывает все контейнеры из входных тегов.