aiohttp_web_server_test/demo/templates/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Знакомство с aiohttp</title>
    <style>
      html {
        font-family: Verdana, "sans-serif";
      }

      body {
        min-height: 100vh;
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
      }
      h1{
        color: white;

      }
      p{
        color:white;
      }
      .container{
        margin-left: 20vw;
      }
      #submit{
        margin-top: 20px;
        border-radius: 10px;
        height: 50px;
        width:50vw;
        color:black;
      }
      #inputText{
        border-radius: 10px;
        height: 30px;
        width: 49.5vw;
      }
      .container_result{
        margin-top: 20px;
        min-height: 50px;
        text-align: center;
        width: 50vw;
        border: 3px solid white;
        border-radius: 5px;
        background-color: grey;
      }


    </style>
  </head>
  <body>
    <div class="container">
      <h1>Знакомство с aiohttp</h1>
      <div id="root">
        <div class="form">
          <form id="myForm">
            <input type="text" id="inputText" placeholder="Введите текст">
            <div class="form__button"><button id='submit'>Отправить</button></div>

          </form>
          <div class="container_result">
            <p id="response"></p>
          </div>
        </div>
    </div>
    </div>
  </body>
    <script>
        document.getElementById('myForm').addEventListener('submit', async function(event) {
            event.preventDefault(); // Предотвращаем отправку формы по умолчанию

            const inputText = document.getElementById('inputText').value;

            const response = await fetch('/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    'text': inputText
                })
            });

            const responseText = await response.text();
            document.getElementById('response').innerText = responseText;
        });
    </script>
</html>