HTTP-сервер ESP8266. Основы HTML разметки, Javascript, CSS | Пикабу

ESP32/ESP8266 Handle Input Fields on Web Page with HTML Form

Copy the following code to the Arduino IDE. Then, type your network credentials (SSID and password) to make it work for you.

Install ESP32/ESP8266 Board in Arduino IDE

We’ll program the ESP32 and ESP8266 using Arduino IDE. So, you must have the ESP32 or ESP8266 add-on installed. Follow one of the next tutorials to install the ESP add-on:

ESP32/ESP8266 Save Input Fields to SPIFFS

Now, let’s proceed to the second example. This example saves the data inserted on the input fields permanently on SPIFFS. We’ve also added placeholders on the web page to show the current values.

Copy the following sketch to Arduino IDE. Then, before uploading type your network credentials (SSID and password).

Installing Libraries

To build the asynchronous web server, you need to install these libraries.

These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.

Parts Required

To follow this tutorial you just need an ESP32 or ESP8266 (read ESP32 vs ESP8266). There’s no circuit for this project.

Accessing the variables

In the loop(), we demonstrate how you can access the variables.

For example, create a String variable called yourInputString that reads the content of the inputString.txt file on SPIFFS.

String yourInputString = readFile(SPIFFS, "/inputString.txt");

Then, print that variable in the Serial Monitor.


Connect to your network

In the setup(), connect to your local network.

WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
  Serial.println("WiFi Failed!");
Serial.print("IP Address: ");


After uploading code to your board, open your Arduino IDE Serial Monitor at a baud rate of 115200 to find the ESP IP address.

Open your browser and type the IP address. A similar web page should load (at first your current values will be blank).

Type a String in the first input field and press “Submit”, repeat the same process for the Int and Float input values. Every time you press the Submit button for a field, you’ll see an alert message like this:

Press the “OK” button to reload the web page and see the current values updated.

If you have your Arduino IDE Serial Monitor open, you’ll see that the stored values are being printed over and over again:

For a final project, you can delete all those lines in your loop() that print all stored values every 5 seconds, we just left them on purpose for debugging.

How the code works

This code is very similar with the previous one with a few tweaks. Let’s take a quick look at it and see how it works.

Похожее:  Dnevnik ru пароль и логин

Html form

In this example, when you submit the values, a window opens saying the value was saved to SPIFFS, instead of being redirected to another page as in the previous example.

For that, we need to a add a JavaScript function, in this case it’s called submitMessage() that pops an alert message saying the value was saved to SPIFFS. After that pop up, it reloads the web page so that it displays the current values.

The forms are also a bit different from the previous ones. Here’s the form for the first input.

In this case, the target attribute and an <iframe> are used so that you remain on the same page after submitting the form.

The name that shows up for the input field contains a placeholder %inputString% that will then be replaced by the current value of the inputString variable.

The onclick=”submitMessage()” calls the submitMessage() JavaScript function after clicking the “Submit” button.

Html forms and input fields

First, let’s take a look at the HTML that we need to display the input fields.

Including libraries

The code loads the following libraries if you’re using the ESP32. You need to load the SPIFFS library to write to SPIFFS.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include <SPIFFS.h>

If you’re using an ESP8266, you need to include the FS library to interface with SPIFFS.

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ESPAsyncTCP.h>
#include <Hash.h>
#include <FS.h>

Network credentials

Don’t forget to insert your network credentials in the following variables, so that the ESP32 or ESP8266 can connect to your network.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";


The processor() is responsible for searching for placeholders in the HTML text and replacing them with actual values saved on SPIFFS.

String processor(const String& var){
  if(var == "inputString"){
    return readFile(SPIFFS, "/inputString.txt");
  else if(var == "inputInt"){
    return readFile(SPIFFS, "/inputInt.txt");
  else if(var == "inputFloat"){
    return readFile(SPIFFS, "/inputFloat.txt");
  return String();

Project overview

In this tutorial we’ll build an asynchronous web server using the ESPAsyncWebServer library that displays three input fields to pass values that you can use in your code to update variables.

We’ll take a look at two similar examples. The following figure illustrates how the first example works.

You have a web page with three input fields that you can access with any browser in your network. When you type a new value and press the “Submit” button, your ESP will update a variable with the new value.

If you ever needed to update a variable through an ESP web server, you should follow this project. With this method, you avoid hard coding variables because you can create an input field in a web page to update any variable with a new value. This can be specially useful to set threshold values, set SSID/password, change API Keys, etc…

Later, we’ll also show you how to save those variables permanently using SPIFFS and how to access them. Here’s how this second example works.

Похожее:  Обзор конструктора сайтов Vigbo - Avacym

This web page allows you to enter three types of variables: String, Int and Float. Then, every time you submit a new value, that value is stored in a SPIFFS file. This web page also contains a placeholder to show the current values.

To learn more about building a web server using SPIFFS, you can refer to the next tutorials:

Read and write to spiffs

Then, we have some functions to read and write from SPIFFS.

The readFile() reads the content from a file:

String readFile(fs::FS &fs, const char * path){
  Serial.printf("Reading file: %srn", path);
  File file =, "r");
  if(!file || file.isDirectory()){
    Serial.println("- empty file or failed to open file");
    return String();
  Serial.println("- read from file:");
  String fileContent;
    fileContent =String((char);
  return fileContent;

The writeFile() writes content to a file:

void writeFile(fs::FS &fs, const char * path, const char * message){
  Serial.printf("Writing file: %srn", path);
  File file =, "w");
    Serial.println("- failed to open file for writing");
    Serial.println("- file written");
  } else {
    Serial.println("- write failed");

Testing the server code

Since we are developing an end to end system composed of two distinct parts that may have errors, my recommendation is that you perform a quick test to the Flask server after finishing the code, before starting making requests with the ESP32. This way, we can find possible problems on the server beforehand.

The python code

The Python code for this tutorial will be exactly the same we have used in this previous tutorial. Thus, we will not cover it in much detail here.

So, we start by importing all the needed classes and objects from the flask module. Then, we will create an object of the Flask class, which will be the one used to configure the server.

from flask import Flask
from flask import request

app = Flask("my app")

Wrapping up

In this tutorial you’ve learned how to handle input fields in a web page to update the ESP variable values. You can modify this project to set thresholds, change API Key values, set a PWM value, change a timer, set SSID/password, etc.

Here’s other projects that you might like:

Learn more about the ESP32 with our best-selling course:

Thank you for reading.

Веб-сервер, защищенный паролем

В этом руководстве мы создадим на базе ESP8266веб-сервер, защищенный паролем. Доступ к нему можно будет получить с любого устройства, имеющего браузер. Это значит, что вы сможете управлять GPIO-контактами ESP8266 с ноутбука, смартфона, планшета и т.д.

Наш веб-сервер будет управлять двумя светодиодами. Но это лишь демонстрационный проект, и потом эти светодиоды можно будет заменить на устройство PowerSwitch Tail (это модуль управления питанием) или реле, и с их помощью управлять каким угодно электронным устройством.

Похожее:  Как защитить WhatsApp паролем и спрятать свои чаты от чужих глаз |

Загружаем код

Подключите ESP8266 к ПК и откройте IDE Arduino. Кликните по «Инструменты» > «Плата» (Tools > Board) и выберите подключенную плату.

Выберите COM-порт, к которому подключена ваша плата.

Проверив все настройки, нажмите на кнопку «Загрузка» (Upload):

Подождите несколько секунд, пока не увидите сообщение «Загрузка завершена» (Done uploading) в левом нижнем углу IDE Arduino.

Заходим на веб-сервер

Перед заходом на веб-сервер нужно сделать следующее:

После этого в браузере должно выскочить окно с запросом ввести имя пользователя и пароль:

В результате в браузере должна загрузиться примерно такая страница:

Как работает код

В самом начале скетча мы подключаем библиотеку «ESP8266WiFi», а в следующих двух строчках задаем SSID и пароль для своей WiFi-сети, чтобы ESP8266 мог к ней подключиться.

Далее создаем объект веб-сервера и задаем ему порт «8888»:

Создаем переменную «header» для хранения заголовка ответа на запрос, переменные «gpio5_state» и «gpio4_state» для хранения текущего состояния этих GPIO-контактов, а также переменные «gpio5_pin» и «gpio4_pin» для хранения номеров контактов GPIO4 и GPIO5.

Далее создаем блок setup(), код в котором будет запущен только раз – при запуске ESP8266.

Запускаем последовательную коммуникацию на скорости 115200 бод (для отладки). Переключаем оба GPIO-контакта в режим вывода данных (OUTPUT) и задаем им значение «LOW».

В следующем фрагменте кода запускаем подключение к WiFi-сети, ждем успешного подключения и печатаем в мониторе порта IDE ArduinoIP-адресESP8266.

Блок loop() отвечает за то, что будет происходить, когда новый клиент установит соединение с веб-сервером. То есть код в loop() будет постоянно прослушивать новых клиентов. Соответственно, если к веб-серверу подключится новый клиент, он начнет подключаться к нему.

Копируем ip-адрес esp8266

Загрузив веб-серверный скетч на ESP8266, кликните в IDE Arduino на «Инструменты» > «Монитор порта» (Tools > Serial Monitor). Монитор порта – это окно, где ESP8266, загрузившись, напечатает свой IP-адрес.

Мой IP-адрес – это «» (см. на скриншоте ниже). Ваш IP-адрес, скорее всего, будет другим. Сохраните его, т.к. позднее вы с его помощью перейдете на страницу веб-сервера.

Проблема – в мониторе порта не печатается ip-адрес

Если у вас возникла такая проблема, можно попробовать сделать следующее:

  1. Оставьте монитор порта открытым;
  2. ESP-12E (или FTDI-программатор) должен оставаться подключенным к ПК;
  3. Перезапустите ESP-12E, нажав на встроенную в него кнопку.

Спустя секунду ESP8266 должна напечатать в мониторе порта свой IP-адрес.


Устанавливаем программу для сканирования ip-адресов

Если IP-адрес в мониторе порта по-прежнему не появляется, то вам нужно будет установить на свой ПК программу для сканирования IP-адресов. Она будет искать все девайсы в вашей сети.

  1. Загрузите ее (это бесплатно). Можете выбрать между Advanced IP Scanner (Windows) и Angry IP Scanner (MAC OS X, Windows или Linux);
  2. Установите программу (в это время ESP8266 должен быть включен, и на нем должен работать скетч, написанный нами выше);
  3. Откройте программу для сканирования IP-адресов и нажмите на кнопку «Сканировать» (Scan);

Дайте процессу завершиться (это должно занять несколько минут).

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *