Question

我是HTML的新手，我想知道构建我正在编码的计算器的最佳做法是什么。例如，当按下“计算”按钮时，所有输入形式都会向右移动。我怎样才能保持一切？

http://rgoo.co/calculators/bmr-calculator.php

<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";

if (isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv'])) {
    $agev = $_POST['agev'];
    $feetv = $_POST['feetv'];
    $inchesv = $_POST['inchesv'];
    $weightv = $_POST['weightv'];

    $totalheightv = $inchesv + ($feetv*12);
    $answer = 66 + (6.23*$weightv) + (12.7*$totalheightv) - (6.8*$agev);

}

echo <<<_END
<form method='post' action=''>
<table border='0' width='500px' cellpadding='2' cellspacing='1' class="table">
<tr class="calcheading"><td colspan="4" align="left"><strong>IIFYM test</strong></td></tr>
<tr class="calcrow"><td>Age:</td><td align="justify"><input type='text' name='agev' value="$agev"/>Years</td></tr>
<tr class="calcrow2"><td>Height:</td><td align="justify"><input type='text' name='feetv' value="$feetv"/>Ft<input type='text' name='inchesv' value="$inchesv"/>In</td></tr>
<tr class="calcrow"><td>Weight:</td><td align="left"><input type='text' name='weightv' value="$weightv"/>lbs</td></tr>
<tr class="submit"><td colspan="2"><input type='submit' value='Calculate'/></td></tr>
_END;
?>

<tr class="calcrow">
<td>Your BMR is: <?php echo $answer?></td>


</tr>
</table>
</form>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BMR Calculator</title>
</head>

<body>
BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate. Your BMR is represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.


</body>
</html>

Answer 1

尝试将colspan="2"添加到<td>Your BMR is: <?php echo $answer?></td>

另外，正确格式化HTML！

<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv'])) {
    $agev = $_POST['agev'];
    $feetv = $_POST['feetv'];
    $inchesv = $_POST['inchesv'];
    $weightv = $_POST['weightv'];

    $totalheightv = $inchesv + ($feetv*12);
    $answer = 66 + (6.23*$weightv) + (12.7*$totalheightv) - (6.8*$agev);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BMR Calculator</title>
</head>
<body>
<form method='post' action=''>
<table border='0' width='500px' cellpadding='2' cellspacing='1' class="table">
    <tr class="calcheading">
        <td colspan="2" align="left"><strong>IIFYM test</strong></td>
    </tr>
    <tr class="calcrow">
        <td>Age:</td>
        <td align="justify"><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
    </tr>
    <tr class="calcrow2">
        <td>Height:</td>
        <td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
    </tr>
    <tr class="calcrow">
        <td>Weight:</td>
        <td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
    </tr>
    <tr class="submit">
        <td colspan="2"><input type='submit' value='Calculate'/></td>
    </tr>
    <tr class="calcrow">
        <td colspan="2">Your BMR is: <?php echo $answer?></td>
    </tr>
</table>
</form>

BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate. Your BMR is represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</body>
</html>

Answer 2

表单向右移动，因为显示BMI的td变宽了。只需将colspan设置为4，就像在calcheading中一样。

HTML表格向右移动

2 个答案: