How to Create Simple Calculator in HTML Without JavaScript with Video Examples

Hello my friend! Today we learn together how to create Simple Calculator in HTML without writing separate JavaScript file, using pure HTML <form> and <output> tag — with video explanation in Khmer!

Watch Video Tutorial (Khmer)

Watch video first to see step-by-step how to build simple HTML calculator:

1. How HTML Calculator Works

You don't need to write external .js script! HTML5 form provides 3 awesome tags. Before building forms, you can review How to use Fieldsets with Radios and Checkbox in HTML Form:

• <form oninput="..."> : Automatically runs inline calculation when user types or changes numbers inside input fields.
• <input type="number"> : Input box that accepts number values only.
• <output> : Special HTML5 tag used to display calculation results. Read the official MDN Output Element Documentation.

2. Code Example: Addition Calculator

Here is full HTML code for simple calculator:

<form oninput="result.value = parseInt(num1.value || 0) + parseInt(num2.value || 0)">
  <label for="num1">First Number:</label>
  <input type="number" id="num1" name="num1" value="10" required />

  <span>+</span>

  <label for="num2">Second Number:</label>
  <input type="number" id="num2" name="num2" value="20" required />

  <span>=</span>

  <output name="result">30</output>
</form>

3. Explanation of Calculation Formula

The magic line is: oninput="result.value = parseInt(num1.value) + parseInt(num2.value)"

• num1.value gets value from first input box.
• parseInt() converts string text like "10" into real number 10.
• + adds two numbers together.
• result.value = ... updates <output name="result"> text automatically!

Bonus Tips for HTML Calculator

Here are 3 secret bonus tips to make your HTML calculator even better:

Tip 1: Use parseFloat() for Decimal Calculations

parseInt() only works with whole numbers (5 + 10). If user types decimals like 1.5 + 2.5, use parseFloat():

<form oninput="result.value = parseFloat(num1.value || 0) + parseFloat(num2.value || 0)">
  <input type="number" step="0.1" name="num1" value="1.5" />
  +
  <input type="number" step="0.1" name="num2" value="2.5" />
  =
  <output name="result">4</output>
</form>

Tip 2: Multiplication, Subtraction & Division

You can change + to any math operator:

• Subtraction: parseInt(num1.value) - parseInt(num2.value)
• Multiplication: parseInt(num1.value) * parseInt(num2.value)
• Division: parseInt(num1.value) / parseInt(num2.value)

Tip 3: Always Use <output> Tag for Accessibility

Don't use <div> or <span> for form calculations! The <output> tag is the official HTML5 element recognized by screen readers and accessibility tools for live calculated results.

💡 Next Lesson: Structure tabular data with How to Use HTML Table Tag!

Happy coding! Try building your own calculator in VS Code!