W3C-Validation problème avec chevauchement formulaire et div-tags

J'ai des problèmes avec la validation de ce code avec le validateur W3. Le problème est avec la balise <form>. J'ai besoin de la balise <form> pour chevaucher plusieurs balises <div> et <span> parce que j'ai beaucoup de différents champs d'entrée et ainsi de suite, mais j'utilise aussi les champs Form2 et Form3 avec des champs de saisie et ainsi j'ai besoin d'utiliser </form> avant le Form2. Mais cela me pose des problèmes lors de la validation, car il chevauche les étiquettes <div> et <span>. Que puis-je faire pour que la validation fonctionne?W3C-Validation problème avec chevauchement formulaire et div-tags

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

Source

2010-10-22 user484556

Toutes les étiquettes que vous avez insérées dans votre question sont supprimées par le processeur d'affichage. La question sera plus claire si elles sont échappées ou rendues visibles d'une manière ou d'une autre - en les entourant de caractères (le bloc de code) peut aider. – pjmorse

@pjmorse: J'ai corrigé ça. – jwueller

XML (XHTML dans ce cas) doit être bien formé. Jetez un oeil à this. Vous devriez être en mesure de résoudre ce problème en déplaçant le <form> dans l'arborescence.

Au lieu de

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

les instructions suivantes (déplacer l'élément form, de sorte que elle enveloppe les entrées ainsi que leurs conteneurs):

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

Source

2010-10-22 18:55:41 jwueller

XHTML ne vous laisse pas se chevaucher Mots clés. Par exemple, ce n'est pas valable:

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

Qu'est-ce que vous allez vouloir faire est, plutôt que d'essayer d'englober uniquement les éléments que vous jugez sous la forme, engloberait les <input /> balises qui sont sous la forme ainsi que leurs conteneurs. Par exemple, votre code devrait ressembler à ceci:

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

Remarquez comment l'élément de forme couvre tous les conteneurs des étiquettes d'entrée.

Source

2010-10-22 18:57:13 mattbasta

W3C-Validation problème avec chevauchement formulaire et div-tags

Répondre

Questions connexes