0Pricing
HTML Academy · Lezione

L’elemento form: action, method ed enctype

Configurare un elemento form con action, method ed enctype

L’elemento form: action, method ed enctype è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cos'è un modulo?

I moduli HTML sono il modo principale con cui gli utenti inviano dati a un server:

  • Accesso e registrazione
  • Query di ricerca
  • Checkout e pagamento
  • Contatti e feedback

Ogni modulo inizia con l'elemento <form>.

L'elemento form

L'elemento <form> contiene tutti i controlli del modulo:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

L'attributo action

L'attributo action specifica la destinazione dei dati del modulo:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

L'attributo method

L'attributo method controlla il modo in cui vengono inviati i dati:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET e POST a confronto

GET e POST hanno caratteristiche diverse:

  • GET — dati nell'URL (lunghezza limitata), salvabile nei segnalibri, memorizzato nella cache, idempotente
  • POST — dati nel corpo della richiesta (senza limite), non salvabile nei segnalibri, non memorizzato nella cache, non idempotente

Regola generale: se l'invio non modifica lo stato del server → GET; se lo modifica → POST.

L'attributo enctype

L'attributo enctype controlla la codifica dei dati del modulo per le richieste POST:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

Attributo novalidate

L'attributo novalidate disabilita la convalida integrata del browser:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Attributo target nel form

L'attributo target controlla dove viene visualizzata la risposta:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

autocomplete nel form

L'attributo autocomplete controlla il completamento automatico del browser:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Invio del modulo con JavaScript

Prevenga l'invio predefinito e gestisca il modulo con JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

action e method insieme

Esempio completo di modulo con action e method corretti:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Verifica rapida

Quale metodo del modulo dovrebbe usare per caricare un file?

Riepilogo: elemento form

Elementi essenziali dei moduli:

  • action — URL che riceve i dati del modulo
  • method="get" — dati nell'URL (ricerche, filtri)
  • method="post" — dati nel corpo della richiesta (dati sensibili, modifiche dello stato)
  • enctype="multipart/form-data" — obbligatorio per il caricamento di file
  • novalidate — disabilita la convalida del browser

Domande Frequenti

La lezione «L’elemento form: action, method ed enctype» è gratuita?

Sì — il testo completo di «L’elemento form: action, method ed enctype» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «L’elemento form: action, method ed enctype»?

Configurare un elemento form con action, method ed enctype Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «L’elemento form: action, method ed enctype»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento form: action, method ed enctype
  2. Tipi di input: text, password, email, number e tel
  3. L’elemento label e l’accessibilità
  4. L’elemento button: submit, reset e button
← Torna a HTML Academy