Quem procura calculadora em HTML para site quer uma de duas coisas: o código para escrever a própria, ou algo pronto para colar e acabar. Esta guia entrega as duas, e diz com franqueza em que situação cada uma é a escolha certa. O critério é único: se a conta muda por lei ou por índice, o código copiado é um passivo.
Resposta rápida
- Conta fixa (porcentagem, IMC, área): escreva em HTML. O código está abaixo.
- Conta que muda (INSS, IRRF, Selic, FIPE): incorpore uma calculadora para site que se atualiza sozinha.
- Formate com toLocaleString em pt-BR, senão o real sai com ponto.
- Escreva o resultado com textContent, nunca com innerHTML.
O código completo de uma calculadora em HTML
Este é um exemplo funcional de calculadora de desconto: formulário, cálculo, validação e formatação em real. Cole num arquivo .html e abra no navegador. São menos de trinta linhas e não há dependência nenhuma.
<form id="calc">
<label>Valor <input type="number" id="valor" step="0.01" required></label>
<label>Desconto (%) <input type="number" id="pct" step="0.01" required></label>
<button type="submit">Calcular</button>
</form>
<p id="saida" role="status" aria-live="polite"></p>
<script>
document.getElementById("calc").addEventListener("submit", function (e) {
e.preventDefault();
var valor = parseFloat(document.getElementById("valor").value);
var pct = parseFloat(document.getElementById("pct").value);
if (!isFinite(valor) || !isFinite(pct)) {
document.getElementById("saida").textContent = "Preencha os dois campos.";
return;
}
var final = valor * (1 - pct / 100);
document.getElementById("saida").textContent =
"Preco final: " + final.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
});
</script>O que cada parte faz
O formulário usa type="number" com step, o que faz o celular abrir o teclado numérico e o navegador recusar letra sozinho. O preventDefault impede a página de recarregar ao enviar. O isFinite é a linha que separa uma calculadora publicável de uma que mostra NaN para o visitante: sem ele, campo vazio produz um resultado sem sentido.
O parágrafo de saída tem role="status" e aria-live="polite". Isso faz o leitor de tela anunciar o resultado quando ele aparece, sem interromper quem está no meio de outra leitura. É uma linha, e é a diferença entre uma calculadora que cega usa e uma que ela não percebe que respondeu.
Por que o código copiado envelhece
Pegue uma calculadora de INSS escrita em 2024 e publicada num repositório qualquer. Ela tem as quatro faixas daquele ano digitadas no meio do JavaScript. Em janeiro de 2025 o teto e as faixas mudaram; em janeiro de 2026, de novo. O código continua rodando, continua devolvendo um número com cara de certo, e ninguém recebe aviso nenhum. O visitante confia, o site perde credibilidade, e o dono do site só descobre quando alguém reclama.
Essa é a diferença entre uma conta e uma tabela. Porcentagem é conta: a fórmula de 1980 vale hoje. Desconto de INSS é tabela: a fórmula é estável, os números não. Antes de copiar qualquer código de calculadora, pergunte de qual dos dois tipos é a sua.
| Tipo de conta | Exemplos | Escreva em HTML? |
|---|---|---|
| Fórmula pura | Porcentagem, regra de três, IMC, área, conversão de unidade | Sim. Nunca desatualiza. |
| Fórmula com tabela anual | INSS, IRRF, salário mínimo, Simples Nacional, FGTS | Só com rotina de atualização em janeiro. |
| Fórmula com dado ao vivo | Selic, CDI, dólar, IPCA, tabela FIPE | Não. Precisa de fonte que atualiza sozinha. |
A versão que não pede manutenção
O código abaixo é o mesmo tipo de calculadora do exemplo, com uma diferença: o cálculo roda no ValorFinal, então a manutenção é nossa. Mexa nas opções e copie.
A alternativa em uma linha de HTML
Um iframe, um crédito opcional e nada para manter. O cálculo acompanha a regra vigente sozinho.
Calculadora de porcentagem
Pré-visualização
Código para incorporar
Erros comuns em calculadora feita à mão
- Somar como texto. Sem
parseFloat, o JavaScript concatena: 2 mais 3 vira 23. É o primeiro bug de quase todo mundo. - Confiar no arredondamento binário. Zero vírgula um mais zero vírgula dois não dá exatamente zero vírgula três em ponto flutuante. Para dinheiro, arredonde no fim com
toFixed(2)ou trabalhe em centavos. - Não tratar vírgula na entrada. O brasileiro digita 1,5. Se o campo é do tipo texto, troque a vírgula por ponto antes de converter.
- Escrever com innerHTML. Além do risco de injeção, quebra o anúncio do leitor de tela. Use
textContent. - Esquecer o teclado. Botão precisa ser alcançável por Tab e ter foco visível. Trocar o botão por uma div com onclick derruba as duas coisas.
Onde continuar
Esta guia faz parte da família de calculadoras para site. A página principal reúne o catálogo inteiro, o passo a passo de instalação em onze plataformas e a comparação com construtor pago e plugin.
- Criar calculadora para site: Quando vale montar a sua do zero e quando é desperdício de tempo.
- Como colocar calculadora no site: O passo a passo em onze plataformas, com o que fazer quando não aparece.
- Calculadora para WordPress: Bloco de HTML, plugin oficial ou plugin de terceiro: qual escolher.
Se o que você quer é dado que se atualiza sozinho (cotação, índice, resultado de loteria, tabela do Brasileirão) e não uma calculadora, o lugar é o catálogo de widgets gratuitos, e a lista comentada está em widgets grátis para site. Para WordPress, o plugin oficial fica em /embed/wordpress.
Fontes e referências
- MDN Web Docs: Number.prototype.toLocaleString: formatação de moeda e de número em pt-BR.
- MDN Web Docs: campo de entrada numérico: atributos step, min, max e o comportamento no teclado do celular.
- W3C ARIA Authoring Practices: região de status: como anunciar o resultado sem interromper o leitor de tela.
- OWASP: prevenção de Cross Site Scripting: por que textContent e não innerHTML ao mostrar dado digitado.