我刚刚启动了一个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代码浏览器会编辑你的代码