Musa Formazione

,

5 passaggi per creare il tuo form HTML

PUBBLICATO IL: 28/08/2021 DA: Silvia Faenza

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à.

Creare un form in HTML non è difficile, tuttavia, si tratta di un’operazione che richiede comunque una buona conoscenza di questo linguaggio di markup. Inoltre, per dar vita a form 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 HTML

La prima cosa da fare per creare un form in un documento 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.

1. 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>.

  • 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.
  • 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.
  • enctype specifica la codifica per utilizzare i dati del modulo che, di default è di tipo MINE.

2. 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.

250×250-Web-Banner-webdeveloper-Blog

Creare un form HTML in passaggi

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

3. Costruire il form

  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">.

4. 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

5. Chiudere il form 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 Musa Formazione in HTML, CSS, e Bootstrap per creare un sito web da zero!

Silvia Faenza

PARLANO DI NOI

crossmenu