Come funziona l’invio di un form HTML?

calendargiovedì 12 maggio 2022 · 2 min di lettura · html  ·
Condividi: linkedincopy

Questo è il post #29 di 31 nella serie “HTML 101 - Le basi”

In questo breve post vedremo cosa succede quando un form viene inviato al server e cercheremo di ricapitolare quanto già detto riguardo il funzionamento dei forms.

Innanzitutto prendiamo come esempio il form che abbiamo creato nel nostro ultimo post:

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Contact Form Example</title>
    </head>
  <link rel="stylesheet" href="./contact.css">
  <body>
    <div class="container">
    <div class="row header">
    <h1>CONTACT US</h1>
    <h3>Let us know your feedback!</h3>
    </div>
    <div class="row body">
      <form method="post" action="http://localhost:3000/form">
        <ul>
          <li>
            <div class="form-row">
            <label for="first_name">First name:</label>
            <input type="text" id="first_name" name="first_name" placeholder="John" />
            </div>
            <div class="form-row">
            <label for="last_name">Last name:</label>
            <input type="text" id="last_name" name="last_name" placeholder="Smith" />
            </div>
          </li>
          <li>
            <div class="form-row">
            <label for="email"><span class="req">*</span>Email:</label>
            <input type="email" id="email" name="email" placeholder="info@programmando.net" />
            </div>
          </li>
          <li>
            <div class="form-row">
            <label for="comments">Comments</label>
            <textarea cols="46" rows="3" id="comments" name="comments"></textarea>
            </div>
          </li>
          <li>
            <input class="btn btn-submit" type="submit" value="Submit" />
            <small>or press <strong>enter</strong></small>
          </li>
        </ul>
      </form>
    </div>
    </div>
  </body>
</html>

che sarà renderizzato dal browser nel seguente modo:

Esempio di un form di contatto

quindi il nostro form sarà costituito da quattro elementi d’input per il nome, cognome, emails ed eventuali commenti e un pulsante per l’invio del form.

La prima domanda da fare adesso è: dove sarà** inviato il contenuto del form?**

Come abbiamo visto in un post precedente, per sapere la destinazione e il metodo HTTP utilizzato, dobbiamo analizzare gli attributi method e action del tag form

<form method="post" action="http://localhost:3000/form">

quindi il contenuto del form verrà inviato all’ URL indicata come valore dell’attributo action usando il metodo HTTP POST.

Supponendo che il codice in ascolto lato server abbia quel determinato URL semplicemente stampi (in formato JSON) il contenuto del form ricevuto, nel caso che il form sia stato compilato nel seguente modo:

Esempio di un form di contatto compilato

il codice lato server stamperà questo:

Print del contenuto del form lato server

cioè una rappresentazione, in formato JSON, del contenuto del form inviato dove la chiave di ogni elemento rappresenta il valore assegnato all’attributo name del form e il valore per ogni data chiave è uguale al valore che abbiamo inserito nel form.