CodeGym/Corsi/Frontend SELF IT/Form in HTML: <form>

Form in HTML: <form>

Disponibile

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:

HTML
<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>
HTML
<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:

HTML
<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:

HTML
<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:

HTML
<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>
HTML
<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:

HTML
<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>
HTML
<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:

HTML
<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:

HTML
<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:

HTML
<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>:

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

Esempio con <button>:

HTML
<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:

HTML
<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>
HTML
<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>
JavaScript
function submitForm() {
  document.getElementById('myForm').submit();
}
1
Compito
Frontend SELF IT,  livello 8lezione 1
Bloccato
Form per l'accesso
Form per l'accesso
1
Compito
Frontend SELF IT,  livello 8lezione 1
Bloccato
Modulo di ricerca
Modulo di ricerca
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti