Interactive form in HTML and PHP
I'm with an activity and I'm stuck on this question:
Create a program in PHP, where the form has options of choices of geometric figures (triangle, square, rectangle and trapezoid.). As soon as the user selects the figure, he can enter in the fields the values of the sides of the figure, and the system must calculate the value of the area.
I'm not asking for the answer, don't look at it like that, I want tips on how to draw up this form. The basics I I know how to do, but this with choice I do not know. If someone can tell me only the correct term that I should research, it will already be of great value.
<!DOCTYPE html>
<html>
<head>
<title>Valor Area</title>
<meta charset="utf-8">
</head>
<body>
<form action="valorArea.php">
<label>Escolha uma forma geométrica da lista para calcular a sua área:</label>
<select >
<option >Triângulo</option>
<option >Quadrado</option>
<option >Retângulo</option>
<option >Trap ézio</option>
</select>
<br><br>
<input type="submit" value="Calcular">
</form>
</body>
</html>2 answers
PHP receives the data via POST and makes the proper calculations according to the conditional structureswitch
<?php
$figura = $_POST['figura'];
switch ($figura) {
case "triangulo":
echo ($_POST['base']*$_POST['altura'])/2;
break;
case "quadrado":
echo pow($_POST['lado'], 2);
break;
case "retangulo":
echo $_POST['lado1']*$_POST['lado2'];
break;
case "trapesio":
echo (($_POST['base1']+$_POST['base2'])*$_POST['haltura'])/2;
break;
default:
//nada
}
?>
JavaScript - shows the inputs according to the selected option
<script language="javascript">
<!--
function show(aval) {
submeter.style.display='inline-block';
if (aval == "triangulo") {
hiddenDiv1.style.display='inline-block';
}
else{
hiddenDiv1.style.display='none';
}
if (aval == "quadrado") {
hiddenDiv2.style.display='inline-block';
}
else{
hiddenDiv2.style.display='none';
}
if (aval == "retangulo") {
hiddenDiv3.style.display='inline-block';
}
else{
hiddenDiv3.style.display='none';
}
if (aval == "trapesio") {
hiddenDiv4.style.display='inline-block';
}
else{
hiddenDiv4.style.display='none';
}
}
//-->
</script>
HTML
<form action="" method="post">
<div class="text-center">
<label>Escolha uma forma geométrica da lista para calcular a sua área:</label><br>
<select name="figura" onchange="java_script_:show(this.options[this.selectedIndex].value)">
<option>Selecione</option>
<option value="triangulo">Triângulo</option>
<option value="quadrado">Quadrado</option>
<option value="retangulo">Retângulo</option>
<option value="trapesio">Trapézio</option>
</select>
</div>
<div id="hiddenDiv1" style="display:none">
<p>base:
<input type="text" name="base" />
</p>
<p>altura:
<input type="text" name="altura" />
</p>
</div>
<div id="hiddenDiv2" style="display:none">
<p>lado:
<input type="text" name="lado" />
</p>
</div>
<div id="hiddenDiv3" style="display:none">
<p>Lado 1:
<input type="text" name="lado1" />
</p>
<p>lado 2:
<input type="text" name="lado2" />
</p>
</div>
<div id="hiddenDiv4" style="display:none">
<p>base 1:
<input type="text" name="base1" />
</p>
<p>base 2:
<input type="text" name="base2" />
</p>
<p>altura:
<input type="text" name="haltura" />
</p>
</div>
<div id="submeter" style="display:none">
<input type="submit" value="Calcular">
</div>
</form>
Formulas for calculating areas
First add values for each option in your form because only then will you know which option the user clicked.
<!DOCTYPE html>
<html>
<head>
<title>Valor Area</title>
<meta charset="utf-8">
</head>
<body>
<form action="valorArea.php" method="GET">
<label>Escolha uma forma geométrica da lista para calcular a sua área:</label>
<select name="forma">
<option value="1">Triângulo</option>
<option value="2">Quadrado</option>
<option value="3">Retângulo</option>
<option value="4">Trap ézio</option>
</select>
<br><br>
<input type="submit" value="Calcular">
</form>
</body>After leaving the form like this you can decide between doing the processing in two steps or you can use a little javascript to submit the form once. If you use javascript you can create the fields to be entered the values with Change event of select. If you want to do only with php you must edit the php page, there you take the option with $_GET ['form'] and assign it to a variable and after that redirect to a page where the user can type the measures in a new form, in the new form just do the processing using the formula.
Search for PHP variables, $_GET [], php form action, header("Location:"), PHP operations, basic PHP, variable handling, variable types, operators.
If you want to make more profitional search about javascript and jquery.
If in addition to programming you want to improve the look use CSS.