I'm new to HTML and am wondering what the best practice is to structure a calculator that I'm coding. For example, When pressing the "calculate" button, all of the input forms shift to the right. How can I keep everything still?
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>
Try adding colspan="2" to <td>Your BMR is: <?php echo $answer?></td>
Also, format your HTML correctly!
<?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>
The forms moves to the right because the td that you display the BMI in has gotten wider. Just set the colspan to 4 like you did in calcheading.