HTML没有按照正确的顺序显示提交按钮


HTML not displaying submit button in the correct order

我刚刚启动了一个php数独解算程序,其中的主页面有一个表单。在该表单中,php include语句调用一个函数,该函数用形成数独框的输入绘制网格。在HTML代码的下面,我放置了一个输入提交按钮。但是,它被放置在网站的网格上方,如图http://shodor.org/~amalani/sudoku.php所示。有人知道这是为什么吗?

主代码在这里

<html>
<head>
    <title>Sudoku Solver</title>
    <link rel='stylesheet' href='main.css' type='text/css'>
</head>
<body>
    <table>
        <form name='entry' method='POST' action='solve.php'>    
            <?php 
                include('grid.php');
            ?>
            <input type='submit' value='Submit!'></input>           
        </form>
    </table>
</body>
</html>

CSS在这里

td{
    border:1px solid black;
}input[type=number]{
    border:none;
    width:30px;
    height:30px;
}input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}table{
    border-collapse:collapse;
}.xborder{
    border-bottom:3px solid black;
}.bothborder{
    border-bottom:3px solid black;
    border-right:3px solid black;
}.yborder{
    border-right:3px solid black;
}

和网格抽屉代码在这里

<?php 
    for ($x=1;$x<=9;$x++){
echo '
            <tr>';
        for ($y=1;$y<=9;$y++){
            $name=$x.''.$y;
            if(($y==3||$y==6)&&($x==3||$x==6)){
                echo "
            <td class='bothborder' ><input type='number' name='$name'></input></td>";
            }
            else if ($y==3||$y==6){
                echo "
                <td class='yborder' ><input type='number' name='$name'></input></td>";
            }
            else if ($x==3||$x==6){
                echo "
            <td class='xborder' ><input type='number' name='$name'></input></td>";
            }
            else{
                echo "
                <td><input type='number' name='$name'></input></td>";
            }
        }
echo '
            </tr>';
    }
    ?>

谢谢

尝试将form元素移出表。

<form name='entry' method='POST' action='solve.php'>    
    <table>
        <?php 
            include('grid.php');
        ?>
    </table>
    <input type='submit' value='Submit!'></input>           
</form>

您正在生成无效的html: form不能是table元素的直接子元素。

您应该让表单封装表格并将按钮移动到表格下方,或者将其放在表格内网格下方的一行(或一列)中:

<form name='entry' method='POST' action='solve.php'>  
    <table>  
        <?php 
            include('grid.php');
        ?>
    </table>
    <input type='submit' value='Submit!'></input>           
</form>

只需将<input type='submit' value='Submit!'></input>放置在另一个<td></td>

您将form放在table标记中。你不能这么做,这是不确定的。这样做。

<form>
    <table>
        ....
    </table>
    <input type="submit" />
</form>

这样交换<form><table>:

<form name='entry' method='POST' action='solve.php'>    
    <table>
            <?php 
                include('grid.php');
            ?>
            <input type='submit' value='Submit!'></input>           
    </table>
 </form>

你可以把它放在table标签之外。

<input type='submit' value='Submit!'></input>
http://jsfiddle.net/8N6hE/

下面是一个简单的例子你不能把<div>放在<p>里,所以如果你这样做了,浏览器会修改你的代码

你不能把div (block element)放到p (inline element)中

所以如果你这样做

<p>
    <div>
    </div>
</p>
你的浏览器会把代码改成
<p>
</p>
<div>
</div>

<p>
</p>
<div>
</div>
<p>
</p>

表单和表格也是一样的,你应该先设置<form>然后再设置<table>

所有这些都说明如果你生成无效的HTML代码浏览器会编辑你的代码