Question

我刚开始一个php sudoku解算器程序，其中主页面有一个表单。在该表单中，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>';
    }

    ?>

由于

Answer 1

尝试将表单元素移到表格之外。

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

Answer 2

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

您应该让表单封装表格并将按钮移动到表格下方，或者将其放在表格内网格下方的行（和列）中：

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

Answer 3

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

中

Answer 4

您已将form置于table标记内。你不能这样做，它处于不确定状态。做这个。

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

Answer 5

交换<form>和<table>，如下所示：

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

    </table>
 </form>

Answer 6

你可以将它留在表格标签之外。

<input type='submit' value='Submit!'></input>

http://jsfiddle.net/8N6hE/

Answer 7

这是一个简单的例子你不能在<div>中添加<p>，所以如果你这样做，你的浏览器会修改你的代码

你不能把div（块元素）放在p（内联元素）

中

所以，如果你这样做

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

您的浏览器会将代码更改为

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

或

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

所以这里与表格和表格相同，您应该在开始<form>之前启动<table>

所有这些都表明，如果您生成无效的HTML代码，浏览器将编辑您的代码

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

7 个答案: