So, to fix this problem, without making so much stuff, i simply have done something like that (this is an example from my project):
String WebPage(){
String index = "";
index += "<!DOCTYPE html>";
index += "<html lang='en' class='js-focus-visible'>";
index += "";
index += "<title>ESP32 WebView</title>";
index += "";
index += "<style>";
index += ".resizedTextbox {";
index += "position: relative;";
index += "width: 400px;";
index += "height: 30px;";
index += "top: -5px;";
index += "}";
index += "table {";
index += "position: relative;";
index += "width:100%;";
index += "border-spacing: 0px;";
index += "}";
index += "tr {";
index += "border: 1px solid white;";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 20px;";
index += "}";
index += "th {";
index += "height: 20px;";
index += "padding: 3px 15px;";
index += "background-color: #343a40;";
index += "color: #FFFFFF !important;";
index += "}";
index += "td {";
index += "height: 20px;";
index += "padding: 3px 15px;";
index += "}";
index += ".tabledata {";
index += "font-size: 24px;";
index += "position: relative;";
index += "padding-left: 5px;";
index += "padding-top: 5px;";
index += "height: 25px;";
index += "border-radius: 5px;";
index += "color: #FFFFFF;";
index += "line-height: 20px;";
index += "transition: all 200ms ease-in-out;";
index += "background-color: #00AA00;";
index += "}";
index += ".fanrpmslider {";
index += "width: 30%;";
index += "height: 55px;";
index += "outline: none;";
index += "height: 25px;";
index += "}";
index += ".bodytext {";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 24px;";
index += "text-align: left;";
index += "font-weight: light;";
index += "border-radius: 5px;";
index += "display:inline;";
index += "}";
index += ".navbar {";
index += "width: 100%;";
index += "height: 50px;";
index += "margin: 0;";
index += "padding: 10px 0px;";
index += "background-color: #FFF;";
index += "color: #000000;";
index += "border-bottom: 5px solid #293578;";
index += "}";
index += ".fixed-top {";
index += "position: fixed;";
index += "top: 0;";
index += "right: 0;";
index += "left: 0;";
index += "z-index: 1030;";
index += "}";
index += ".navtitle {";
index += "float: left;";
index += "height: 50px;";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 50px;";
index += "font-weight: bold;";
index += "line-height: 50px;";
index += "padding-left: 20px;";
index += "}";
index += ".navheading {";
index += "position: fixed;";
index += "left: 60%;";
index += "height: 50px;";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 20px;";
index += "font-weight: bold;";
index += "line-height: 20px;";
index += "padding-right: 20px;";
index += "}";
index += ".navdata {";
index += "justify-content: flex-end;";
index += "position: fixed;";
index += "left: 70%;";
index += "height: 50px;";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 20px;";
index += "font-weight: bold;";
index += "line-height: 20px;";
index += "padding-right: 20px;";
index += "}";
index += ".category {";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-weight: bold;";
index += "font-size: 32px;";
index += "line-height: 50px;";
index += "padding: 20px 10px 0px 10px;";
index += "color: #000000;";
index += "}";
index += ".heading {";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-weight: normal;";
index += "font-size: 28px;";
index += "text-align: left;";
index += "}";
index += ".btn {";
index += "background-color: #444444;";
index += "border: none;";
index += "color: white;";
index += "padding: 10px 20px;";
index += "text-align: center;";
index += "text-decoration: none;";
index += "display: inline-block;";
index += "font-size: 16px;";
index += "margin: 4px 2px;";
index += "cursor: pointer;";
index += "}";
index += ".foot {";
index += "font-family: 'Verdana', 'Arial', sans-serif;";
index += "font-size: 20px;";
index += "position: relative;";
index += "height: 30px;";
index += "text-align: center; ";
index += "color: #AAAAAA;";
index += "line-height: 20px;";
index += "}";
index += ".container {";
index += "max-width: 1800px;";
index += "margin: 0 auto;";
index += "}";
index += "table tr:first-child th:first-child {";
index += "border-top-left-radius: 5px;";
index += "}";
index += "table tr:first-child th:last-child {";
index += "border-top-right-radius: 5px;";
index += "}";
index += "table tr:last-child td:first-child {";
index += "border-bottom-left-radius: 5px;";
index += "}";
index += "table tr:last-child td:last-child {";
index += "border-bottom-right-radius: 5px;";
index += "}";
index += ".button {";
index += "background-color: #4CAF50;";
index += "border: none;";
index += "color: white;";
index += "padding: 15px 32px;";
index += "text-align: center;";
index += "text-decoration: none;";
index += "display: inline-block;";
index += "font-size: 16px;";
index += "}";
index += "</style>";
index += "<body style='background-color: #efefef' onload='process()'>";
index += "<form action='/' method='POST'>";
index += "<header>";
index += "<div class='navbar fixed-top'>";
index += "<div class='container'>";
index += "<div class='navtitle'>ESP32 WebView</div>";
index += "<div class='navdata' id = 'date'>mm/dd/yyyy</div>";
index += "<div class='navheading'>DATE</div><br>";
index += "<div class='navdata' id = 'time'>00:00:00</div>";
index += "<div class='navheading'>TIME</div>";
index += "</div>";
index += "</div>";
index += "</header>";
index += "<main class='container' style='margin-top:70px'>";
index += "<div class='category'>Sensor Readings</div>";
index += "<div style='border-radius: 10px !important;'>";
index += "<table style='width:50%'>";
index += "<colgroup>";
index += "<col span='1' style='background-color:rgb(230,230,230); width: 20%; color:#000000 ;'>";
index += "<col span='1' style='background-color:rgb(200,200,200); width: 15%; color:#000000 ;'>";
index += "<col span='1' style='background-color:rgb(180,180,180); width: 15%; color:#000000 ;'>";
index += "</colgroup>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<tr>";
index += "<th colspan='1'><div class='heading'>BME280</div></th>";
index += "<th colspan='1'><div class='heading'>Last Value</div></th>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Temperature (C)</div></td>";
index += "<td><div class='tabledata'>";
index += String(data.t);
index += "</div></td>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Pressure (hPa)</div></td>";
index += "<td><div class='tabledata'>";
index += String(data.p);
index += "</div></td>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Humidity (%)</div></td>";
index += "<td><div class='tabledata'>";
index += String(data.h);
index += "</div></td>";
index += "</tr>";
index += "</table>";
index += "</div>";
index += "<br>";
index += "<div class='category'>General Settings</div>";
index += "<table style='width:50%'>";
index += "<colgroup>";
index += "<col span='1' style='background-color:rgb(230,230,230); width: 20%; color:#000000 ;'>";
index += "<col span='1' style='background-color:rgb(200,200,200); width: 15%; color:#000000 ;'>";
index += "<col span='1' style='background-color:rgb(180,180,180); width: 15%; color:#000000 ;'>";
index += "</colgroup>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<col span='2'style='background-color:rgb(0,0,0); color:#FFFFFF'>";
index += "<tr>";
index += "<th colspan='1'><div class='heading'>Setting</div></th>";
index += "<th colspan='1'><div class='heading'>New Value</div></th>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Set Background color (ex 0x0000)</div></td>";
index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_back' value='' class='resizedTextbox'></div></td>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Set Font color (ex 0x0000)</div></td>";
index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_font' value='' class='resizedTextbox'></div></td>";
index += "</tr>";
index += "<tr>";
index += "<td><div class='bodytext'>Set Time (dd/mm/yy/hh/min/ss)</div></td>";
index += "<td><div class='tabledata2'><INPUT type='textbox' name='txt_time' value='' class='resizedTextbox'></div></td>";
index += "</tr>";
index += "</table> <br> <br> <br> <br>";
index += "<INPUT class='button' type='submit' value='Save Changes'>";
index += "</main>";
index += "</body>";
index += "<script type = 'text/javascript'>";
// global variable visible to all java functions
index += "var xmlHttp=createXmlHttpObject();";
// function to create XML object
index += "function createXmlHttpObject(){";
index += "if(window.XMLHttpRequest){";
index += "xmlHttp=new XMLHttpRequest();";
index += "}";
index += "else{";
index += "xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');";
index += "}";
index += "return xmlHttp;";
index += "}";
index += "function response(){";
index += "var dt = new Date();";
// get host date and time
index += "document.getElementById('time').innerHTML = dt.toLocaleTimeString();";
index += "document.getElementById('date').innerHTML = dt.toLocaleDateString();";
index += "document.getElementById('b0').innerHTML='WebPage';";
index += "}";
index += "function process(){";
index += "if(xmlHttp.readyState==0 || xmlHttp.readyState==4) {";
index += "xmlHttp.open('PUT','xml',true);";
index += "xmlHttp.onreadystatechange=response;";
index += "xmlHttp.send(null);";
index += "} ";
index += "setTimeout('process()',100);";
index += "}";
index += "</script>";
index += "</html>";
return index;
}
The logic is make your own code like how i posted in the first post, AFTER have finished the code, you will need to add to this string line by line the code, and were you need, add, like in my project, the variable that you needed (like me with the data.t etc...).