HTTP Get
#include <>
From: https://medium.com/@xavierprasetyo89/input-data-from-an-html-form-to-esp32-bb6cbf8f239d
Input data from an HTML Form to ESP32
How to input data from HTML form to an ESP32 board. This project only requires
a basic understanding of HTML form and ESP32 WiFi module. So let’s jump on it!
Creating HTML Form
Here’s the HTML form that we’re going to use.
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{ margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;
background-color: #2c257a;}
.box{ width: 70%; padding: 40px; position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%); background-color: #191919; color:
white; text-align: center; border-radius: 24px; box-shadow: 0px 1px
32px 0px rgba(0,227,197,0.59);}
h1{ text-transform: uppercase; font-weight: 500;}
input{ border: 0; display: block; background: none; margin: 20px auto;
text-align: center; border: 2px solid #4834d4; padding: 14px 10px;
width: 45%; outline: none; border-radius: 24px; color: white;
font-size: smaller; transition: 0.3s;}
input:focus{ width: 90%; border-color:#22a6b3 ;}
input[type='submit']{ border: 0; display: block; background: none; margin:
20px auto; text-align: center; border: 2px solid #22a6b3; padding: 14px
10px; width: 140px; outline: none; border-radius: 24px; color: white;
transition: 0.3s; cursor: pointer;}
input[type='submit']:hover{ background-color: #22a6b3;}
</style>
</head>
<body>
<form action="/get" class="box" id="my-form">
<h1>Register</h1>
<div class="part">
<input name="username" type="text" placeholder="Username"> </div>
<div class="part">
<input name="email" type="text" placeholder="Email"> </div>
<div class="part">
<input name="password" type="password" placeholder="Password"> </div>
<input type="submit" value="Register">
</form>
</body>
</html>
One form that has three input fields, a username, an email, and a password.
This form will have a button to submit. The form will have an action to “/get”
URL. I add a few styling to this form in the style block to make it look better.
Here’s how it will be displayed.
/*H********************************************************************
* The Code
**********************************************************************/
#include <Arduino.h>
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#else
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
//************************* DEFINES ************************************
//************************* PROTOTYPES ************************************
void notFound( AsyncWebServerRequest *request );
//************************* VARIABLES ************************************
AsyncWebServer server( 80 );
const char *ssid = Your WiFi SSID"; // REPLACE WITH YOUR NETWORK CREDENTIALS
const char *password = "Your WiFI Password";
const char* PARAM_1 = "username";
const char *PARAM_2 = "email";
const char *PARAM_3 = "password";
const String inputParam1 = "username";
const String inputParam2 = "email";
const String inputParam3 = "password";// HTML WEB PAGE TO HANDLE 3 INPUT FIELDS
// (input1, input2, input3)
const char index_html[] PROGMEM = R
"rawliteral( "COPY HTML FILE HERE")rawliteral";
/*F********************************************************************
*
**********************************************************************/
void
setup()
{
Serial.begin( BAUD );
WiFi.mode( WIFI_STA );
WiFi.begin( ssid, password );
if( WiFi.waitForConnectResult() != WL_CONNECTED )
{
Serial.println( "WiFi Failed!" );
return;
}
Serial.println();
Serial.print( "IP Address: " );
Serial.println( WiFi.localIP());// SND WEB PAGE & INPUT FIELDS TO CLIENT
server.on( "/", HTTP_GET, [](AsyncWebServerRequest *request )
{
request->send_P( 200, "text/html", index_html);
});// Send a GET request to <ESP_IP>/get?input1=<inputMessage>
server.on( "/get", HTTP_GET, [] (AsyncWebServerRequest *request)
{
String inputMessage1,inputMessage2,inputMessage3;
// GET input1 value on <ESP_IP>/get?input1=<inputMessage>
if( request->getParam( PARAM_1 )->value() != "")
inputMessage1 = request->getParam( PARAM_1 )->value();
else
inputMessage1 = "none";
// GET input2 value on <ESP_IP>/get?input2=<inputMessage>
if( request->getParam(PARAM_2)->value() != "")
inputMessage2 = request->getParam(PARAM_2)->value();
else
inputMessage2 = "none";
// GET input3 value on <ESP_IP>/get?input3=<inputMessage>
if( request->getParam(PARAM_3)->value() != "")
inputMessage3 = request->getParam( PARAM_3 )->value();
else
inputMessage3 = "none";
Serial.println( inputParam1 + ": " + inputMessage1);
Serial.println( inputParam2 + ": " + inputMessage2);
Serial.println( inputParam3 + ": " + inputMessage3);
request->send( 200, "text/html", "HTTP GET request sent to your ESP "
"on input field (" + inputParam1 + ") with value: " + inputMessage1 "
"+ ", (" + inputParam2 + ") with value: " + inputMessage2 + ", (" + "
"inputParam3 + ") with value: " + inputMessage3 + "<br><a href=\"/\">"
"Return to Home Page</a>");
});
server.onNotFound( notFound );
server.begin();
}
/*F********************************************************************
*
**********************************************************************/
void
loop()
{}
/*F********************************************************************
*
**********************************************************************/
void
notFound( AsyncWebServerRequest *request )
{
request->send(404, "text/plain", "Not found");
}
Here’s how the code works.
First, we set up our WiFi credentials as usual and what parameters the form will
have. In this case, the parameters are username, email, and password. Then in
this project, I put my HTML Form on the code so that we don’t have to use SPIFFS
to manage our file. Then, we command the board to listen on “/get” URL to get
the data that have been sent. We check the data if it’s valid or just an empty
string. If it is an empty string, we’ll replace it with “none”. After that, the
data will be printed on serial monitor and the board will send a response
containing the data. Here’s how it shloud look like.
I submitted the form two times so there are two datasets on the serial monitor
Conclusion
HTML Form can be used to exchange data from a device, to an ESP32 board. This
data could be a specific sensor’s request or data that needs to be logged. We
could also separate the HTML from the CSS file to make it a lot neater. Of
course, we must use SPIFFS to manage our files. We could even add a javascript
file to make it dynamic and more attractive.
That’s it for this project. Thank you for reading and see you on my next project!