Как создать веб-калькулятор

Калькулятор на html

Создание веб-калькулятора не имеет под собой никакой звездочной сложности. Большинство людей смогут создать калькулятор для сайта.

1. Начало и конец формы

Начнем с HTML базы калькулятора и перво наперво запишем начальный код формы.







<form action = "" method = "POST">

</form>








– Где form является началом и концом формы.

– В кавычках Action указывается адрес страницы ведущую на результат счета. Но в нашем калькуляторе будет показываться результат там же, где производился счет. Поэтому ничего в кавычки не вставляется

Method свидетельствует о методе запроса. В роли запроса стоит POST, хотя существует и GET запрос. POST пересылает больше данных, чем GET и чаще используется веб-разработчиками.


2. Поля счета в HTML форме

В качестве результата <form> </form> получим следующее ⇓

А тут ничего нет! Форма создалась и у неё нет видимых данных. Так что давайте-ка создадим два number поля.




























<form action = "" method = "POST">

<input type = "number" name = "pervoe" placeholder = "Введите число для счета">
<input type = "number" name = "vtoroe" placeholder = "Введите число для счета">

</form>




























Input является начальным словом. Далее указывается тип поля  ( number). После вводятся названия полей – первое называется рандомным словом "pervoe", а второе зовется "vtoroe".

Остается  добавить внутренний текст при помощи placeholder и наблюдать за фантастическим результатом  smile

Числовые поля


3. Кнопка действия в HTML форме

Как происходит работа калькулятора? Вводятся числа в поля number и нажимается кнопка счета. Но нет кнопки счета, так что произведем её при помощи submit.

<input type="submit" value="Посчитать">

 

В качестве типа поля указана кнопка (submit), а в качестве видимого названия кнопки фигурирует слово "посчитать"  😎

Таким образом появился калькулятор:


























<form action="" method="POST"> 
<input type="number" name="pervoe" placeholder="Введите число для счета">
<input type="number" name="vtoroe" placeholder="Введите число для счета">
<input type="submit" value="Посчитать">
</form>


























Макет калькулятора


4. Создание результата

Теперь форму необходимо научить считать при помощи языка PHP.

Шаг 1

Первым делом переводим два поля number в ПХП среду.

Поле <input type="number" name="pervoe"> будет значиться в PHP как $_POST["pervoe"];

<input type="number" name="pervoe">  =  $_POST["pervoe"];

<input type="number" name="vtoroe">; = $_POST["vtoroe"];

 

Шаг 2

Знакомимся c переменными: Переменная – это выдуманное рандомное имя с началом в виде доллара $, например, $webznat.  Переменная может взять на себя роль HTML поля и тем самым сделать его активным в PHP сфере.

Пусть переменные $odin и $dva возьмут на себя роли HTML полей number:

$odin = $_POST["pervoe"];
$dva = $_POST["vtoroe"];

Получается, что <input type="number" name="pervoe"> является переменной $odin

 

Шаг 3

Закладываем результат счета в переменную $suma .

$suma = $odin + $dva;

 

Вот как это выглядит на самом деле: ⇓

<input name="pervoe"> + <input name="vtoroe"> = $suma

 

Шаг 4

Вывод результата счета на экран монитора.

echo $suma;

 

Шаг 5

Код калькулятора умеющего плюсовать:

<?php $odin = $_POST["pervoe"]; 

$dva = $_POST["vtoroe"]; 

$suma = $odin + $dva; 

echo $suma; 

?>

 

Плюсовой калькулятор на картинке ⇓


5. Выбор в калькуляторе

Современный калькулятор делит, умножает, минусует, плюсует числа. Поле выбора называется radio.

Добавим четыре выбора в HTML форму

<input type="radio" name="kopy" value="+" id="1"> <label for="1"> + </label>
<input type="radio" name="kopy" value="-" id="2"> <label for="2"> - </label>
<input type="radio" name="kopy" value="*" id="3"> <label for="3"> * </label>
<input type="radio" name="kopy" value="/" id="4"> <label for="4"> / </label>

Выбор PHP

Разберем код выбора

name="kopy" – это название поля. Все поля выбора имеют одинаковое имя, чтобы быть связанными друг с дружкой.

value="+" – знак счета свидетельствует о том, какую процедуру желает совершить пользователь: сложить, убавить, умножить или поделить.

id и label связывает поле выбора и текст между собой (если нажать на текст, который находится между label –  активируется поле выбора).

 


6. Связка выбора со счетом

Все поля-выборщики radio переводятся в PHP и тем самым становятся переменной $grom.

$grom = $_POST["kopy"];

 

Условия для опеределения выбора

if и elseif – означают “если”. Для первого “если” создается if, а для последующих elseif

“если” человек выберет плюс, то $odin + $dva

А если минус то $odin - $dva

 

Поля-выборщики содержат одинаковое название kopy, поэтому для идентификации каждого поля используется значение value.

if($grom == "+") {
echo $odin + $dva; }

elseif($grom == "-") {
echo $odin - $dva; }

elseif($grom == "/") {
echo $odin / $dva; }

elseif($grom =="*") {
echo $odin * $dva; }

 

Разберем вышеуказанный код

if($grom == "+") – если поле выбора равно value= “+”, то два поля number начинают сплюсовываться $odin + $dva;

Обратите внимание на знак равенства, он в ПХП указывается как ==

Итоговый код калькулятора

<form action="" method="POST"> 


<input type="number" name="pervoe" placeholder="Введите число для счета">
<input type="number" name="vtoroe" placeholder="Введите число для счета">




<input type="radio" name="kopy" value="+" id="1"> <label for="1"> + </label>
<input type="radio" name="kopy" value="-" id="2"> <label for="2"> - </label>
<input type="radio" name="kopy" value="*" id="3"> <label for="3"> * </label>
<input type="radio" name="kopy" value="/" id="4"> <label for="4"> / </label>




<input type="submit" value="Посчитать">

</form>


<?php $odin = $_POST["pervoe"];

 $dva = $_POST["vtoroe"]; 

$grom = $_POST["kopy"]; 

if($grom == "+") { echo $odin + $dva; } 

elseif($grom == "-") { echo $odin - $dva; } 

elseif($grom == "/") { echo $odin / $dva; } 

elseif($grom =="*") { echo $odin * $dva; }

 ?>

Калькулятор PHP

Испытать калькулятор в действии можно перейдя по ссылочке

Подпишись! И свежие статьи будут поступать прямо на твою электронную почту!


И не забывай про лайки...

Тематический контент

Фильтр:ВсеЖдет ответа
Феникс спросил 4 недели назад
145 просм.1 ответ.2 голос.