Form in HTML: <form>

1.1 Elemento <form>

Le form sono una parte importante dell'interazione dell'utente con i siti web. Con le form, gli utenti possono inserire dati, che vengono poi inviati al server per essere elaborati. In HTML, l'elemento <form> viene utilizzato per creare form.

Il tag <form> è utilizzato per creare una form sulla pagina web. Serve come contenitore per vari elementi della form, come campi di testo, bottoni, checkbox, ecc. Tutti i dati inseriti dall'utente possono essere inviati al server per l'elaborazione.

Esempio di utilizzo:

    
      <form action="/submit" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Invia</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Il tuo nome: ${userName.value}\n` + `La tua Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Invia</button>
      </form>
    
  

Attributi del tag <form>

L'attributo action specifica l'URL a cui i dati della form verranno inviati dopo aver cliccato sul bottone di invio. Se l'attributo action non è specificato, i dati della form verranno inviati all'URL corrente.

Esempio di utilizzo dell'attributo action:

    
      <form action="https://example.com/submit">
        <!-- elementi del form -->
      </form>
    
  

L'attributo method indica il metodo HTTP che verrà utilizzato per inviare i dati della form. Sono disponibili due valori: GET e POST.

1. GET: i dati della form sono inclusi nell'URL della richiesta come parametri. Questo metodo è adatto per inviare piccole quantità di dati e non deve essere utilizzato per inviare informazioni riservate.
2. POST: i dati della form vengono inviati nel corpo della richiesta HTTP. Questo metodo è adatto per inviare grandi quantità di dati e informazioni riservate.

Esempio di utilizzo dell'attributo method:

    
      <form action="/submit" method="post">
        <!-- elementi del form -->
      </form>
    
  

1.2 Metodi di invio dati

Metodo GET

Metodo GET invia i dati della form come parametri dell'URL. Questo metodo è utilizzato di default se l'attributo method non è specificato.

Esempio di utilizzo del metodo GET:

    
      <form action="/search" method="get">
        <label for="query">Ricerca:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Cerca</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Hai cercato: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Ricerca:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Cerca</button>
      </form>
    
  

Caratteristiche del metodo GET

• I dati della form sono visibili nell'URL, il che rende il metodo inadatto per trasmettere informazioni riservate
• Limitazione sulla dimensione dei dati, poiché l'URL ha una lunghezza limitata
• I dati possono essere facilmente memorizzati nella cache, e i segnalibri possono essere salvati nel browser

Metodo POST

Metodo POST invia i dati della form nel corpo della richiesta HTTP. Questo metodo è utilizzato per trasmettere grandi quantità di dati e informazioni riservate.

Esempio di utilizzo del metodo POST:

    
      <form action="/submit" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Invia</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Benvenuto, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Invia</button>
      </form>
    
  

Caratteristiche del metodo POST

• I dati della form non sono visibili nell'URL, il che rende il metodo adatto per trasmettere informazioni riservate
• Non ci sono limitazioni sulla dimensione dei dati, poiché i dati sono trasmessi nel corpo della richiesta
• I dati non sono memorizzati nella cache e non sono salvati nei segnalibri del browser

1.3 Attributi aggiuntivi

Attributo enctype

L'attributo enctype è utilizzato per specificare il metodo di codifica dei dati della form quando si utilizza il metodo POST. Il valore più comunemente usato è multipart/form-data, necessario per il caricamento dei file.

Esempio di utilizzo dell'attributo enctype:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Carica file:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Invia</button>
      </form>
    
  

Attributo target

L'attributo target indica dove verrà visualizzata la risposta del server dopo l'invio della form. I valori possibili sono:

• _self (di default): nella stessa finestra o scheda
• _blank: in una nuova finestra o scheda
• _parent: nel frame genitore
• _top: nel frame superiore (se vengono utilizzati i frame)

Esempio di utilizzo dell'attributo target:

    
      <form action="/submit" method="post" target="_blank">
        <!-- elementi del form -->
      </form>
    
  

Attributo novalidate

L'attributo novalidate disabilita la validazione delle form integrata nel browser.

Esempio di utilizzo dell'attributo novalidate:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Invia</button>
      </form>
    
  

1.4 Modi di invio dati

L'invio dei dati della form avviene tramite il bottone di invio: <input type="submit"> o <button type="submit">. Quando l'utente clicca su questo bottone, il browser invia i dati della form al server, utilizzando il metodo e l'URL specificati.

Ecco i principali modi di invio dei dati della form:

1. Bottone di invio: questo è il modo più comune per inviare i dati della form. Il bottone di invio può essere creato con l'elemento <input> o <button>.

Esempio con <input>:

    
      <input type="submit" value="Invia">
    
  

Esempio con <button>:

    
      <button type="submit">Invia</button>
    
  

2. Tasto Invio: nei campi di testo della form, premere il tasto Invio può anche attivare l'invio della form.

3. JavaScript: una form può essere inviata programmaticamente utilizzando JavaScript. Questo è utile quando è necessario eseguire controlli aggiuntivi o altre azioni prima di inviare i dati.

Esempio di utilizzo di JavaScript per inviare una form:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Invia</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Autorizzazione avvenuta con successo!\n" + "\n" + `Benvenuto, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Invia</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }