WEB Form example for ESP-IDF.
ESP-IDF contains a lot of example code, but there is no example to create FORM on the WEB and input data from FORM.
This project reads value from FORM on the WEB and save in the NVS area.
No library other than ESP-IDF is required to read the data from the WEB page.
I referred here.
ESP-IDF V4.4/V5.x.
ESP-IDF V5.0 is required when using ESP32-C2.
ESP-IDF V5.1 is required when using ESP32-C6.
git clone https://github.com/nopnop2002/esp-idf-web-form
cd esp-idf-web-form
idf.py menuconfig
idf.py flash monitor
Set the following items using menuconfig.
You can use the mDNS hostname instead of the IP address.
- esp-idf V4.3 or earlier
You will need to manually change the mDNS strict mode according to this instruction. - esp-idf V4.4 or later
If you set CONFIG_MDNS_STRICT_MODE = y in sdkconfig.default, the firmware will be built with MDNS_STRICT_MODE = 1.
You can use static IP.
Open your brouser, and put address in address bar.
You can use the mDNS hostname instead of the IP address.
Default mDNS name is esp32-server.local.
Input text/checkbox/radio and submit.
The read data is saved in the NVS area.
You can clear the NVS area with this command:
idf.py erase_flash
HTML header is stored in html/head.html.
You can use your favorite CSS.
Even if there are image files in SPIFFS, the esp-idf http server does not support this:
httpd_resp_sendstr_chunk(req, "<img src=\"/spiffs/picture.png\">");
You need to convert the image file to base64 string.
httpd_resp_sendstr_chunk(req, "<img src=\"data:image/png;base64,");
httpd_resp_sendstr_chunk(req, (char *)BASE64_ENCODE_STRING);
httpd_resp_sendstr_chunk(req, "\">");
Images in png format are stored in the image folder.
Images in base64 format are stored in the html folder.
I converted using the base64 command.
$ base64 image/ESP-IDF.png > html/ESP-IDF.txt