请运行这个简短而基本的代码(https://furatena.miami/grid_without_form)：
没有FORM 的网格
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">@import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<div id="grid_container">
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl"><a href="#">Register!</a>
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>
你可以看到这是"；圣格里尔；CSS布局，运行"；完美的"；并且代码xHTML 1.1在上100%有效https://validator.w3.org
现在完全运行相同的代码，但只添加<form>和</form>(https://furatena.miami/grid_with_form)：
具有形式的网格
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">@import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<div id="grid_container">
<form>
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl"><a href="#">Register!</a>
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
</form>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>
继续作为代码xHTML 1.1 100%有效https://validator.w3.org但现在布局被破坏了
为什么<form> </form>会影响我的CSS网格布局？
添加其他<div>可以修复ERROR，但实际上没有。这是因为逻辑需要更多的标签/div来修复错误。
修复错误而不添加更多标签并且不丢失toggle-menu的一些想法？
请解释一下？
感谢
尝试将表单标记放在div#grid_container标记之外。
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">@import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<form>
<div id="grid_container">
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl"><a href="#">Register!</a>
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
</form>
<div id="pie">© furatena.miami</div></body></html>