:HEADER-ARGS:html: :tangle w05/index.html :HEADER-ARGS:css: :tangle w05/css/style.css :HEADER-ARGS:js: :tangle w05/js/main.js

Prepare the environment

mkdir -p w05/{css,js,media}
touch w05/index.html
touch w05/css/style.css
touch w05/js/main.js

Create the HTML template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  </head>
  <body>

The form structure

<main>
  <form action="login" method="GET">
    <div class="cont">
      <label for="field1">Field 1</label>
      <input id="field1" name="field1" type="text" value="">
    </div>
    <div class="cont">
      <label for="field2">Field 2</label>
      <input id="field2" name="field2" type="text" value="">
    </div>
    <div class="cont">
      <label for="field3">Field 3</label>
      <input id="field3" name="field3" type="text" value="">
    </div>
    <div class="cont">
      <input class="button" name="" type="submit" value="Enviar">
      <input class="button" name="" type="reset" value="Cancelar">
    </div>
  </form>
</main>

EOF

<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Give some style to the form

main {
      max-width: 1080px;
      width: 80%;
      padding: 2vw;
      margin: auto;
      box-shadow: 2px 2px 7px;
      form {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          .cont {
              margin: 2% 0%;
              display: flex;
              flex-direction: row;
              gap: 2%;
              width: 35%;
              input[type="text"] {
                  border: none;
                  outline: none;
                  &:focus {
                      border-bottom: 2px solid blue;
                  }
              }

          }
      }
  }

  div:last-child {
      display: flex;

      .button {

      }
}

Read the data from the form

Catch the events

let form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", function(e) {
    // check which was the triger
    let self = e.currentTarget;
    console.log(self);
    // get the elements value
    let keys = [1, 2, 3].map(n => "field" + n);
    console.log(keys);
    let values = keys.map(n => self[n].value);
    console.log(values);

    e.preventDefault();
    e.stopPropagation();
});