Conoscere il linguaggio HTML permette di creare pagine web e contenuti per i device mobili. Inoltre, attraverso HTML è possibile creare dei form che sono degli strumenti utili per raccogliere i dati degli utenti, inoltrare richieste e supportare diverse funzionalità.

Vogliamo quindi vedere come creare un form in HTML, perché può tornare davvero molto utile e perché non è un’operazione così difficile come si può pensare. Tuttavia, si tratta di un’attività che richiede comunque una buona conoscenza di questo linguaggio di markup.

Inoltre, per creare form contatti html più complessi del semplice invio della posta elettronica, è necessario integrare l’HTML con script o framework che aggiungono funzionalità aggiuntive.

Come creare un form in HTML

La prima cosa da fare per sapere come creare un form in HTML è aprire il tag <form>. In questo modo, si crea un modulo input per l'inserimento dati.

É possibile nidificare i tag <form>, come altri elementi, ma è bene che ognuno di essi sia indipendenti.

HTML Form: gli attributi del tag <form>

Per essere funzionanti, i tag <form> devono essere arricchiti con altri attributi come action, method ed enctype e deve essere poi specificato il tag di chiusura </form>.

1. action, è l’attributo che specifica l'azione che deve essere compiuta al momento dell’invio. Solitamente, viene specificato un URL che fa riferimento a uno script o a un indirizzo email.
2. method, indica invece come avviene l’accesso all’URL dichiarato in action. Sono possibili due opzioni: post o get. Il metodo get viene utilizzato principalmente per moduli che non necessitano di elaborazioni esterne, mentre negli altri casi si adopera post.
3. enctype specifica la codifica per utilizzare i dati del modulo che, di default è di tipo MINE.

HTML Form: Il tag <input> e l’etichetta <label>

Il tag più significativo nella realizzazione di un form è il tag <input>. In questo modo, infatti, è possibile inserire i dati e specificare la diversa tipologia. Ad esempio, il campo si comporterà in modo diverso se si tratta di testo, numeri, email o password.

Inoltre, nella realizzazione di un form va inserito anche il tag <label>. Si tratta di un’etichetta che descrive il campo input e può essere abbinato all'attributo for che lo associa allo specifico campo.

Creare un form HTML: tutti i passaggi

Scopriamo nel dettaglio come creare un form in HTML con tutti i principali passaggi da seguire:

HTML Form: Costruire la struttura

1. Crea il tuo file .html utilizzando un editor specifico o Notepad.
2. Inserisci il tag <form> dove vuoi posizionare il modulo. Ricordati di chiudere il tag. All’interno andranno inseriti i vari elementi.
3. Aggiungi l'attributo "action=" al tag per specificare l’URL dello script a cui deve essere collegato o l’indirizzo email.
4. Scegli il metodo di invio dei dati: quindi, specifica con l'attributo method se si tratta di post o get. In caso di dati sensibili, come password e numeri di carte di credito, è necessario utilizzare post.

Adesso, il file HTML dovrebbe riportare qualcosa di simile

<form action="/cgi-bin/scriptmodulo.pl" method="post">.

HTML Form: specificare gli attributi

1. Crea il tag <input>: in questo modo, viene aggiunto uno spazio vuoto nel quale l’utente può inserire diverse informazioni. Si potrà specificare la tipologia dei dati utilizzando gli attributi giusti. Questo tag va aggiunto nella linea successiva, dopo il tag <form>
2. Bisogna specificare il valore "id=". Questo permette di assegnare un nome univoco all’input che sarà utile per i dati processati dal server.
3. Specificare l’attributo type: con questa indicazione si fornisce al server delle informazioni aggiuntive, utili per il rendering. Ad esempio, si potrà specificare password per inserire una chiave d’accesso che sarà nascosta alla vista durante la digitazione, email, per indicare al browser che si tratta di un indirizzo di posta elettronica oppure indicando radio, se si desidera creare una risposta con un’unica scelta. In questo caso, il nome di ogni elemento radio deve essere uguale.

Esempio:

Password: <input type="password" name="password" />

<input type="radio" name="colore preferito" value="rosso" /> Rosso

<input type="radio" name="colore preferito" value="blue" /> Blue

HTML Form: prevedere la chiusura inserendo un bottone

Inserire un pulsante Invia con il tag <button>: alla fine del form, una volta compilato, l’utente utilizzerà un pulsante per inviare i dati. Tra il tag di apertura d i chiusura è possibile inserire del testo che sarà visualizzato sul bottone.

Esempio:

<button type="submit">Invia i tuoi dati</button>

Chiudi il tag </form> al termine del modulo: in browser sarà che il form è completo. Tutti i suoi elementi devono essere compresi nei due tag <form> e </form>.

Vuoi scoprire molto di più sul linguaggio HTML? Scopri allora il corso di HTML, CSS, e Bootstrap diMusa Formazione per imparare come creare un form in HTML e lo sviluppo siti web da zero!