Exemple de code d'interface utilisateur de calculatrice HTML

285 programme

Ouvrir dans l'éditeur Publiez votre code

Exemple de code d'interface utilisateur de calculatrice HTML

Recommandé

28 October 2025

Calculatrice et assistant mathématiques : HTML, CSS, JavaScript

25 March 2026

Injection de HTML/JS depuis un CDN : remplacement dynamique de page

18 March 2023

Formulaire de connexion moderne

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
body{
background-color: aquamarine;
  display: flex;
    justify-content: center;
    align-items: center;
}
  .di{
    width: 270px;
    background-color: rgb(31, 29, 29);
    height: 400px;

}
  .egale{
        padding: 20px;
    background-color: green;
    border-radius: 20px;
    margin: 5px;
  }
  input{
    width: 250px;
    height: 20px;
    margin: 5px;
  }
  .operation{
    padding: 20px;
    background-color: orange;
    border-radius: 20px;
    margin: 5px;

}
  .efface{
 background-color: red;
 width: 125px;
 border-radius: 20px;
 height: 20px;
  margin: 5px;
  text-align: center;
  }
  button{
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 20px;
     margin: 5px;
  }
</style>
</head>
<body>
  <div class="di">
  <input type="text" >
  <br>
   <button class="efface">c</button>
   <button class="operation">/</button>
   <button class="operation">*</button>
   <br>
   <button>9</button>
   <button>8</button>
   <button>7</button>
   <button class="operation">+</button>
<br>
   <button>6</button>
   <button>5</button>
   <button>4</button>
   <button class="operation">-</button>
<br>
   <button>3</button>
   <button>2</button>
   <button>1</button>
   <button class="egale">=</button>
<br>
<button>0</button>
<button>.</button>
</div>
</body>
</html>

CSS