Here's two ways* I would consider (there are pros and cons to each):

1. HTML and Javascript (fast, client-side, but 10%± have JS turned off):

First number: 
<input type="text" id="num1"  />
Second number: 
<input type="text" id="num2"  />
Your answer:
<input type="text" id="answer" />
Add them:
<input type="button" value="Add" onclick="addthem();" />
[download]

or HTML for CGI handling, change last lines to:

Your answer:
<input type="text" id="answer" value="<tmpl_var answer>" />
<input type="submit" value="Add" />
[download]

Javascript:

function addthem() {
   var num1 = document.getElementById("num1");
   var num2 = document.getElementById("num2");
   var answer = num1 + num2;
   document.getElementById("answer").value = answer;
}
[download]

2. CGI and HTML::Template (doesn't require JS, but does require a module and a round robin to the server):

use HTML::Template;
use CGI;
my $query = new CGI;
my $num1 = $query->param('num1');
my $num2 = $query->param('num2');
my $template = HTML::Template -> new(filename => "addnumbers.tmpl");
$template->param( answer => $num1 + $num2 )
print "Content-type: text/html\n\n";
print $template->output();
[download]

Was the web page produced by a cgi script?

No the web page is not generated by CGI script..

1. It may be best to do this with jscript.

2. All cgi output goes to the browser as a new page. (except when your testing it on your local m/c)

The cgi doc is very helpful and includes an example using forms.

Doing it with pure CGI (ie, no Javascript), the entire page will need to be re-rendered to display the results. That may not be a big deal at all, however.

You might consider composing a CGI script that first renders the page if it discovers no input via the param() method. Next, after 'apply' has been clicked the same script will discover input on param(), and should perform the calculations, and output the page again, with the changes.

Using CGI.pm will simplify your life, of course.