Interactive form in HTML and PHP

Asked

Viewed 2,667 times

1

I have an activity and I’m stuck on it:

Create a program in PHP, where the form has choices of geometric figures (triangle, square, rectangle and trapezoid). As soon as the user selects the figure, he can type 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 make this form. I know the basics, but this one with choice I don’t know. If anyone can just tell me 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>

php html form

  • If possible click [Edit] and add the code you have tried.

  • Please read this post https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

2 answers

1

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 so you can decide to do the two-step processing or you can use a little javascript to submit the form just once. If you use javascript you can create the fields to enter the values with select change event. If you want to do only with php you must edit the php page, there you will take the option with $_GET['way'] and assign to a variable and after that redirect to a page where the user can type the measurements in a new form, in the new form just do the processing using the formula.

Search for PHP variables, $_GET[], form action php, header("Location: "), PHP operations, PHP Basic, variable handling, variable types, operators.

If you want to leave more professional search on javascript and jquery.

If in addition to programming you want to improve the look use CSS.

  • Thank you very much!

1


PHP receives the data via POST and makes the appropriate calculations according to the conditional structure switch

<?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 calculation of areas

formulas de areas

  • Thank you very much, you’ve been a great help.

Browser other questions tagged php html form

You are not signed in. Login or sign up in order to post.