Attributo action di HTML
L'attributo HTML action specifica dove inviare i dati del modulo quando viene inviato. Scopri su quale elemento puoi usare questo attributo.
L'attributo HTML action specifica l'URL a cui i dati del modulo devono essere inviati quando il modulo viene sottomesso. Il suo valore è la destinazione che elabora i dati inviati — di solito uno script lato server o un endpoint.
Puoi usare questo attributo solo sull'elemento <form>. Quando un utente attiva un controllo di invio, il browser raccoglie i campi con nome del modulo, li codifica e invia una richiesta all'indirizzo indicato in action. Questa pagina spiega come si comporta action, cosa succede quando viene omesso, come interagisce con altri attributi del modulo e come un singolo pulsante può sovrascriverlo con formaction.
Sintassi
<form action="URL"></form>L'URL può essere di due tipi:
- Assoluto — un URL completo che include lo schema e l'host, ad esempio
https://api.example.com/submit. Usalo quando il modulo deve inviare dati a un'origine diversa (un dominio, sottodominio o schema diverso). - Relativo — un percorso risolto rispetto all'URL del documento corrente, ad esempio
/form/submitosave.php. Questa è la scelta comune quando il modulo invia dati al proprio sito.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit">
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Qui utilizziamo un percorso relativo, quindi i dati vengono inviati a /form/submit sullo stesso dominio della pagina corrente. Per inviare a un altro dominio, usa un URL assoluto come https://example.com/some-page.
Cosa succede quando action viene omesso
Se ometti action (o lo imposti su una stringa vuota), il modulo viene inviato all'URL della pagina corrente. Questo è un pattern valido e comune: una pagina può servire il modulo e gestire anche il proprio invio.
<!-- Both of these submit back to the URL the form was loaded from -->
<form method="post">...</form>
<form action="" method="post">...</form>Tieni presente che inviare all'URL corrente con il metodo GET predefinito aggiunge i campi del modulo all'URL come stringa di query, il che ricarica la pagina con quei valori visibili nella barra degli indirizzi.
Come action interagisce con altri attributi del modulo
L'attributo action non funziona mai da solo — definisce dove vanno i dati, mentre altri attributi su <form> definiscono come ci arrivano:
method— sceglie il metodo HTTP. ConGET(il valore predefinito), i campi codificati vengono aggiunti all'URL diactioncome stringa di query, quindi l'URL diventaaction?name=value&.... ConPOST, i campi vengono inviati nel corpo della richiesta, mantenendo l'URL pulito.enctype— imposta come viene codificato il corpo e ha importanza solo conPOST. Il valore predefinitoapplication/x-www-form-urlencodedè adatto per il testo; è necessariomultipart/form-dataquando il modulo include il caricamento di un file (<input type="file">).target— decide dove viene mostrata la risposta, ad esempio_self(stessa scheda, valore predefinito),_blank(nuova scheda) o il nome di un<iframe>.
Puoi saperne di più su questi nella documentazione del tag <form> e nella guida più ampia sui moduli HTML.
URL assoluti vs. relativi: vantaggi e svantaggi
Scegliere tra un action assoluto e uno relativo va oltre una semplice preferenza di stile:
- URL relativi mantengono il modulo legato al sito che lo ha servito. Sopravvivono allo spostamento del sito su un nuovo dominio o al passaggio tra
httpehttps, e mantengono l'invio same-origin, evitando complicazioni di origine incrociata. - URL assoluti sono necessari quando si deve inviare a un'origine diversa (ad esempio un gestore di moduli di terze parti o un host API separato). Sii attento: un
POSTa un'altra origine è una richiesta cross-origin. Il server di destinazione deve accettarla e la richiesta potrebbe essere soggetta alle regole CORS per le parti con script della tua pagina.
Una nota sulla sicurezza: i moduli possono inviare dati a qualsiasi origine inserita in action, e i browser invieranno i cookie di quell'origine insieme alla richiesta. Questo è esattamente il meccanismo alla base del cross-site request forgery (CSRF) — una pagina malevola può ospitare un modulo che invia dati al tuo sito. Per questo motivo, imposta action solo su origini di cui ti fidi e proteggi qualsiasi endpoint che modifica lo stato con un token anti-CSRF validato sul server. Preferisci azioni relative (same-origin) a meno che tu non abbia un motivo concreto per inviare altrove.
Sovrascrivere action con formaction
Un singolo modulo può avere più di un pulsante di invio, e ognuno può inviare i dati in un posto diverso usando l'attributo formaction. Quando è presente sul pulsante o sull'input che ha attivato l'invio, formaction sovrascrive il action del modulo. (Gli attributi correlati formmethod, formenctype e formtarget sovrascrivono rispettivamente method, enctype e target allo stesso modo.)
<!DOCTYPE html>
<html>
<head>
<title>formaction example</title>
</head>
<body>
<form action="/articles/publish" method="post">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="My draft"/><br /><br />
<!-- Uses the form's action: /articles/publish -->
<button type="submit">Publish</button>
<!-- Overrides the action just for this button -->
<button type="submit" formaction="/articles/save-draft">Save draft</button>
</form>
</body>
</html>Entrambi i pulsanti inviano gli stessi campi, ma "Publish" invia a /articles/publish mentre "Save draft" invia a /articles/save-draft. formaction è supportato su <button type="submit"> e <input type="submit"> (e <input type="image">), e non ha effetto sui controlli non di invio.