Pin Me

How to Code Simple Calculations in HTML

written by: Karishma Sundaram•edited by: Rebecca Scudder•updated: 5/20/2011

HTML code is intended for static display of information. However, there are a number of scenarios where the ability to perform simple calculations would be welcome. This article talks about how to make simple calculations by embedding dynamic code in static HTML.

  • slide 1 of 5

    A Brief Introduction to HTML

    HTML, or Hypertext Markup Language, is not a programming language in the strictest sense of the term. It is more of a formatting code which tells the browser how to display text. Because of this inherent nature of HTML, and the limitations it comes with, it is considered a static language.

    Static languages cannot perform operations, like modules or functions. This is where dynamic or scripting languages come in. Scripts are inserted within the HTML code and executed whenever there is a requirement. After execution, the output is generally in the form of HTML, which can then be formatted in accordance with the rest of the web page.

  • slide 2 of 5

    Scripting Languages: Client-side vs. Server-side

    There are a few options for scripting languages; they fall into one of the two categories: client-side scripting or server-side scripting. The difference between the two is that with client-side scripting, the scripts are executed on the user’s machine, rather than the server hosting the website.

    The advantage of client-side scripting is that the time taken to execute is significantly less, whereas server-side scripting takes a while to execute. Client-side scripting will also work without an Internet connection.

    The disadvantage with having scripts on the client machines is that there is a possibility that the scripting language execution may be turned off. With server-side scripts, the output is always HTML, so any browser can display the results.

    It is important to keep the circumstances in mind when deciding which kind of scripting language to choose.

  • slide 3 of 5

    A Simple Calculation Form with Server-side Scripting in PHP

    PHP is a form of server-side scripting, and requires an appropriate web server like Apache to run. However, coding PHP scripts is straightforward, and it can be done in one of two ways: either the PHP script and the HTML are coded into the same file, or the HTML can call the script from a completely separate PHP file.

    An example of a basic PHP calculator:

    <?PHP

    if(!$_POST['compute'])

    {

    echo '

    <FORM method="post" action="'.$_SERVER['PHP_SELF'].'">

    <INPUT type="text" name="value1" size="10">

    <SELECT name="act">

    <OPTION value="add">[ + ]</OPTION>

    <OPTION value="subtract">[ - ]</OPTION>

    <OPTION value="divide">[ / ]</OPTION>

    <OPTION value="multiply">[ * ]</OPTION>

    </SELECT>

    <INPUT type="text" name="value2" size="10">

    <INPUT type="submit" name="submit" value="Calculate">

    </FORM>

    ';

    }

    else

    {

    if($_POST[' compute '] == 'add')

    {

    $calc = ($_POST['value1']+$_POST['value2']);

    $op = '+';

    }

    if($_POST[' compute '] == 'subtract')

    {

    $calc = ($_POST['value1']-$_POST['value2']);

    $op = '-';

    }

    if($_POST[' compute '] == 'divide')

    {

    $calc = ($_POST['value1']/$_POST['value2']);

    $op = '/';

    }

    if($_POST[' compute '] == 'multiply')

    {

    $calc = ($_POST['value1']*$_POST['value2']);

    $op = '*';

    }

    echo $_POST['value1'].' '.$op.' '.$_POST['value2'].' = '.$calc;

    }

    ?>

    In the above example, there is a simple HTML form embedded with a PHP web page. The form has two text boxes, with a selection box in between (for the mathematical operation) and a submit button. Depending on the selection in the middle, the appropriate ‘if’ construct is executed, and the output is displayed on the screen. There are many ways to program mathematical operations in PHP – this program does not have checks or a system for error reporting.

  • slide 4 of 5

    Client-side Scripting with JavaScript

    JavaScript is a commonly used client-side scripting language, however there are a number of security concerns with allowing scripts to download and execute on a client machine. Therefore, there is the distinct possibility that a script may not execute at all, especially if the client machine has JavaScript disabled.

    That being said, JavaScript is still the quickest and most flexible way of executing small programs on a web page. As it is run locally, the results take significantly less time to display and an Internet connection is no longer necessary. Scripts are embedded within HTML pages.

    <HTML>

    <HEAD>

    <TITLE>Javascript Calculator</TITLE>

    <SCRIPT language="javascript" type="text/javascript">

    function multiply()

    {

    a=Number(document.calculator.number1.value);

    b=Number(document.calculator.number2.value);

    c=a*b;

    document.calculator.total.value=c;

    }

    </SCRIPT>

    <SCRIPT language="javascript" type="text/javascript">

    function addition()

    {

    a=Number(document.calculator.number1.value);

    b=Number(document.calculator.number2.value);

    c=a+b;

    document.calculator.total.value=c;

    }

    </SCRIPT>

    <SCRIPT language="javascript" type="text/javascript">

    function subtraction()

    {

    a=Number(document.calculator.number1.value);

    b=Number(document.calculator.number2.value);

    c=a-b;

    document.calculator.total.value=c;

    }

    </SCRIPT>

    <SCRIPT language="javascript" type="text/javascript">

    function division()

    {

    a=Number(document.calculator.number1.value);

    b=Number(document.calculator.number2.value);

    c=a/b;

    document.calculator.total.value=c;

    }

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM name="calculator">

    Number 1: <INPUT type="text" name="number1"> <br>

    Number 2: <INPUT type="text" name="number2"> <br>

    Get Result: <INPUT type="text" name="total"> <br>

    <INPUT type="button" value="Add" onclick="javascript:addition();">

    <INPUT type="button" value="Subtract" onclick="javascript:subtraction();">

    <INPUT type="button" value="Multiply" onclick="javascript:multiply();">

    <INPUT type="button" value="Divide" onclick="javascript:division();">

    </FORM>

    </BODY>

    </HTML>

    In the above example, the arithmetic operations are defined as functions in the head of the HTML web page, and an HTML form has been designed in the body. There are three text boxes in the form – two for input and one for the result. The rest of the form has four buttons, each for one arithmetic operation. When the appropriate button is pressed, the relevant function is executed, and the result is displayed in the third text box.

  • slide 5 of 5

    There are many scripting options available to a web designer, like JavaScript, PHP ASP, CGI, VBScript and Perl. Each one has their own advantages and disadvantages, like easy programming, security restrictions, and speed of output, among others. After carefully considering all the factors, the designer can pick the one that best suits their specific needs.