Form Action Javascript

| | | | | | | | | | | | | | | | | | | | | | |

L’attributo di azione del modulo HTML definisce cosa dovrebbe accadere ai dati quando un modulo viene inviato su una pagina web. Il valore dell’attributo action dovrebbe essere l’URL della risorsa web che elaborerà i contenuti del modulo.

Quando crei moduli e richiedi dati sul tuo sito o applicazione web, dovrai spesso vuoi fare qualcosa con i tuoi dati, giusto? Qui è dove entra in gioco l’attributo form action.

Dovresti conoscere le basi della creare un form in HTML. In pratica, avvolgi i contenuti del modulo nel

elemento. Nel tag di apertura ci sono un paio di attributi che possiamo usare e uno di questi è l’azione.

L’attributo azione è usato per specificare dove vogliamo inviare i dati del modulo quando il modulo viene inviato. Quindi il valore dell’azione è la pagina che elaborerà il modulo.

Attributo dell’azione del modulo HTML

L’attributo dell’azione del modulo HTML indica l’URL che elaborerà il contenuto di un modulo. Dovresti assicurarti che la risorsa web a cui punta l’attributo dell’azione accetti qualsiasi metodo che hai specificato nel tuo "metodo" attributo.

Diamo un’occhiata alla sintassi dell’attributo azione:

L’attributo action appare tra la nostra apertura etichetta. Questo attributo viene spesso utilizzato con l’attributo method.

Per impostazione predefinita, l’attributo method è impostato su "get". Ciò significa che il tuo modulo invierà i dati su una richiesta HTTP GET quando viene inviato. Puoi modificare il metodo specificando "method=‚Äôpost’" nella tua apertura tag.

I dati di un modulo vengono inviati all’URL di "azione" quando si fa clic su un pulsante di invio.

Esempio HTML di azione modulo

Diamo un’occhiata a un esempio:

Sopra, l’azione invia il nome utente e i dati dell’email a una pagina denominata process.html. Il nome utente e i dati dell’email hanno l’input digitare "testo". Definiamo un pulsante con il tipo di input "invia". Quando cliccato, questo pulsante segnerà nd i nostri dati alla nostra "azione" URL.

Ora inserisci l’esempio di modulo sopra in un file HTML effettivo. Quindi crea un altro file chiamato process.html nella stessa cartella. Questo file dovrebbe avere il seguente contenuto:

Questo codice definisce una semplice pagina web che mostra un paragrafo di testo quando la pagina viene caricata. Torniamo al nostro modulo web che abbiamo definito in precedenza e compiliamo:

screen shot 2020/08/02 alle 10 34 02 PM

Con questo esempio si potrebbe pensare che questo non è molto utile. Questo è vero. Solitamente l’attributo action viene utilizzato per inviare il contenuto del modulo alle pagine del server. Ad esempio, potremmo usare un file PHP chiamato process.php.

Questo process.php quindi farà tutta la magia con i dati. Questa pagina potrebbe salvare i nostri dati in un database, o registrarti al tuo evento preferito, lo chiami. PHP è un potente linguaggio di scripting per server, spesso utilizzato nello sviluppo web. Se hai mai utilizzato WordPress, probabilmente i dati elaborati vengono elaborati tramite PHP.

Per saperne di più su PHP, consulta la nostra Guida all’apprendimento di PHP.

L’attributo dell’azione è obbligatorio?

In HTML4, la risposta sarebbe si. Al giorno d’oggi con HTML5, non è necessario specificare un attributo dell’azione. Se hai un tag form senza un attributo action allora i dati verranno inviati alla propria pagina.

Perché dovremmo farlo? Con la nascita delle applicazioni a pagina singola (SPA), abbiamo potremmo voler elaborare i dati del nostro modulo utilizzando JavaScript. Oppure potremmo voler elaborare i nostri dati utilizzando un altro framework come React / Angular.

Se utilizziamo JavaScript Vanilla, lo facciamo spesso aggiungendo un ascoltatore di eventi JavaScript a quando il modulo è stato inviato.

Conclusione

L’attributo di azione del modulo HTML definisce cosa succede ai contenuti di un modulo al momento della presentazione del modulo. L’attributo action accetta un URL come argomento.

Sei interessato a diventare uno sviluppatore web? Consulta la nostra Guida completa all’apprendimento dell’HTML. Troverai consigli di esperti sull’apprendimento dell’HTML, nonché un elenco dei migliori corsi online e risorse di apprendimento.