HTML arduino bouttons

Bonjour, sur ma page html arduino j’ai des bouttons ( lol ) et j’aimerai faire en sorte que lorsque j’appui sur un bouton par exemple haut, que haut s’affiche dans le petit cadre juste en dessous pour montrer qu’on a bien selectionné ce choix pour ensuite le valider avec “enter” qui va envoyer l’information à l’arduino. est-ce que vous pourriez m’aiguiller ou me montrer comment y parvenir pour afficher le choix selectionné.

voici mon code :

#include <SPI.h>
#include <Ethernet2.h>

// @ MAC du shield Ethernet
byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0x2E, 0x7B };
// @ IP du shield
IPAddress ip(10,134,97,9);
// port utilisé (par défaut 80 pour le protocole HTTP)
EthernetServer server(80);

void setup() {
// configuration du port série pour la communication de l'Arduino avec le PC
  Serial.begin(9600);
  
  // démarrage de la connexion Ethernet
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
 Serial.println(Ethernet.localIP());
}

void loop() {
// crée un objet client basé sur le client connecté au serveur
  EthernetClient client = server.available();

  if (client) { // si le client existe
    // message d'accueil dans le Terminal Série
    Serial.println ("Client present !");

    while (client.connected()) { // tant que le client est connecté

      if (client.available()) { // si des octets sont disponibles en lecture
        // le test est vrai si il y a au moins 1 octet disponible
          char c = client.read(); // lit l'octet suivant reçu du client (pour vider le buffer au fur à mesure !)

      } // --- fin client.available

      else { // si pas de caractères disponibles = requete client terminée

          // message Terminal Serie      
        Serial.println ("Reception requete terminee");

        // envoi d'une entete standard de réponse http
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();

        // affiche chaines caractères simples
          client.println("<html>");
          client.println ("<head>");
          client.println ("<style> #Bouton_droite { background-color:yellow;} #Bouton_gauche {Background-color:orange;}</style>");
          client.println ("<style> #Bouton_haut { background-color:blue;} #Bouton_bas {Background-color:brown;}</style>");
          client.println ("<style> #Bouton_accelerer { background-color:green;} #Bouton_ralentir {Background-color:red;}</style>");
          client.println ("<h1>Controle de la direction des moteurs</h1>");
          client.println ("</head>");
          client.println ("<body>");
          client.println("<input type=button value= ENTER>");
          client.println("<input type=button value= droite id='Bouton_droite'>");
          client.println("<input type=button value= gauche id='Bouton_gauche'>");
          client.println("<input type=button value= haut id='Bouton_haut'>");
          client.println("<input type=button value= bas id='Bouton_bas'> ");
          client.println("<input type=button value= accelerer id='Bouton_accelerer'>");
          client.println("<input type=button value= ralentir id='Bouton_ralentir'>");
          client.println("
<hr />");
          client.println("
<hr />");
          client.println("</body></html>");
          break;
      }  
         
        client.println("<meta http-equiv=\"refresh\" content=\"1\">"); 

       
        
        // message Terminal Serie
        Serial.println ("Reponse envoyee au client");
        break; // on sort de la boucle while
      }
    }
    // on donne au navigateur le temps de recevoir les données
    delay(1);
    // fermeture de la connexion avec le client
    client.stop();
   }

screen page html.PNG

Bonjour

Commence déjà par coder ta page html sur ton PC, avec un simple éditeur de texte.
La solution simple serait de recharger intégralement la page par un get, mais le rendu ne sera pas fluide.
Le mieux est d'intégrer du javascript dans le page, pour aller modifier dynamiquement son contenu en fonction d'événements de type clic souris.
Tu trouveras plein de tutos là-dessus sur le net.
Personnellement j'aime bien ceux d'openclassroom.

Quand tu auras réussi à obtenir le résultat souhaité, alors tu pourras intégrer la page ton programme arduino.

D'accord merci de ton aide

et ton moteur PaP?