Il modulo di inserimento dati in HTML

L'HTML mette a disposizione una serie di interessantissimi tag il cui scopo è quello di creare moduli con tanto di caselle di testo, opzioni, bottoni di invio ed altro ancora.

Il termine tecnico che riassume tutti questi elementi è form ed il loro scopo è quello di creare interazione e scambio dati tra gli utenti ed il sito. Più precisamente, attraverso un form HTML (o modulo che dir si voglia) è possibile "raccogliere" gli input degli utenti per poi inviarli ad un qualche sistema di elaborazione (normalmente uno script lato server).

I form HTML, infatti, permettono la realizzazione dell'interfaccia del modulo ma da soli non offrono il minimo controllo e la minima gestione sui dati inseriti dagli utenti. Per far ciò, come detto, sarà necessario utilizzare degli script in grado di ricevere i dati raccolti dal form per poi eseguirne una qualche elaborazione (ad esempio inserirli all'interno di un database oppure utilizzarli per inviare una mail).

Copia

Scopo di questo tag è di fare da contenitore ad una serie di tag (che vedremo tra poco) che costituiranno gli specifici controlli del modulo.

I principali attributi del tag form, come visto nell'esempio, sono i seguenti:

• method - specifica il metodo di invio dei dati ed accetta i valori get o post;
• action - specifica lo script che riceverà, controllerà ed elaborerà i dati.
• target - specifica se il frutto dell'elaborazione (effettuata dallo script indicato in action) verrà mostrata nella stessa finestra oppure in un altra.

I tag utilizzati per creare moduli HTML

Una volta definito un form mediante l'omonimo tag sarà necessario "popolarlo" con una serie di tag annidiati al suo interno. Attraverso i singoli tag (che andremo a vedere tra poco), infatti, sarà possibile creare i vari elementi per l'interazione con l'utente come, ad esempio, caselle di testo o menu di selezione.

Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:

• input - genera la maggior parte degli elementi dei form HTML, a seconda del type specificato. Gli input più utilizzati sono:
  • text - è utilizzato per creare caselle di testo in cui l'utente può scrivere del contenuto su "singola linea";
  • file - è utilizzato per creare caselle di selezione di file in locale al fine di poterli trasmettere al server remoto;
  • radio - permette di creare un gruppo di opzioni al cui interno deve essere fatta una scelta (non ammette scelte multiple);
  • checkbox - permette di creare un gruppo di opzioni al cui interno devono essere fatta delle scelte (ammette scelte multiple);
  • button - permette di creare bottoni "neutri" ai quali, cioè, può essere associata un'azione mediante Javascript;
  • submit - permette di creare bottoni di invio attraverso i quali viene, appunto inviato e processato il form;
  • image - permette di inserire immagini "attive" all'interno del modulo che fungeranno da bottoni;
  • reset - permette di creare bottoni per il reset del form (in sostanza vengono cancellate le scelte effettuate dall'utente ed il modulo torna al suo stato iniziale).
• select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;
• textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi piuttosto lunghi.

Vediamo un esempio di un ipotetico form HTML per la raccolta di dati anagrafici:

<form method="post" action="esegui.php">

  <!-- CASELLE DI TESTO -->
  Nome<br>
  <input type="text" name="nome"><br>
  Cognome<br>
  <input type="text" name="cognome"><br>
  
  <!-- SELECTBOX -->
  Paese<br>
  <select name="paese">
  <option value="I">Italia</option>
  <option value="E">Estero</option>
  </select><br>

  <!-- RADIO -->
  Sesso<br>
  <input type="radio" name="sesso" value="M"> M<br>
  <input type="radio" name="sesso" value="F"> F<br>

  <!-- CHECKBOX -->
  Hobby<br>
  <input type="checkbox" name="hobby" value="S"> Sport<br>
  <input type="checkbox" name="hobby" value="L"> Lettura<br>
  <input type="checkbox" name="hobby" value="C"> Cinema<br>
  <input type="checkbox" name="hobby" value="I"> Internet<br>

  <!-- TEXTAREA -->
  Commento<br>
  <textarea name="commento" rows="5" cols="30"></textarea>
  <br><br>

  <!-- SUBMIT -->
  <input type="submit" name="invia" value="Invia i dati">

</form>

Copia

Il risultato visivo (al netto di eventuali stilizzazioni CSS) è il seguente:

Alcune osservazioni in merito ai tag per la creazione di moduli

• ogni elemento dei form HTML ha una caratteristica in comune, ovvero la specifica del name che dev'essere diverso da elemento a elemento ed uguale solo per gruppi di elementi (come nel caso dei radiobutton e dei checkbox);
• i tag input prevedono (oltre a name) due attributi principali:
  • type: che definisce il tipo di input;
  • value: definisce il valore dell'input; nei campi "text" è facoltativo e, se previsto, rappresenta una sorta di valore predefinito che gli utenti potranno modificare (a meno che il campo non sia stato impostato come read only).
• gli input radio e checkbox ammettono l'attributo checked qualora il campo debba comparire come selezionato al momento del caricamento della pagina;
• il tag select prevede, oltre all'attributo name, gli atrributi size (che ne definisce le dimensioni in termini di linee mostrate, di default 1) e multiple (da specificare nel caso siano ammesse scelte multiple);
• all'interno del tag select vengono annidiati una sequenza di tag option contenenti le varie opzioni disponibili all'interno della selectbox; questi tag hanno, normalmente, un attributo value con il valore da inviare nel caso l'opzione venga selezionata;
• i tag option ammettono l'attributo facoltativo selected attraverso il quale effettuare una selezione di default al momeno del caricamento del modulo;
• il tag textarea prevede, oltre all'attributo name, gli attributi rows e cols che ne definiscono le dimensioni in termini di linee e colonne.

Inviare file attraverso un modulo

Come accennato poco sopra, tra i vari tipi di input esiste file: si tratta di un particolare campo attraverso il quale è possibile selezionare un file, presente in locale sul nostro computer, per poi inviarlo ad un server remoto. Vediamo un esempio di codice per un form HTML:

<form method="post" action="esegui.php" enctype="multipart/form-data">

  <!-- FILE -->
  Carica una foto:<br>
  <input type="file" name="foto">
  <br><br>
  
  <!-- SUBMIT -->
  <input type="submit" name="invia" value="Invia i dati">

</form>

Copia

Si noti come nell'esempio qui sopra il tag form sia stato arricchito di un nuovo attributo (enctype) con valore "multipart/form-data". Questa particolarità è essenziale se il nostro form deve consentire l'upload di file; in caso contrario l'upload non avrà successo.

Classificazione funzionale dei tag per i moduli HTML

I vari tag che abbiamo visto possono essere classificati da un punto di vista funzionale:

• inserimento di testo:
  • <input type="text">
  • <textarea>
• effettuazione di scelte:
  • <input type="radio">
  • <input type="checkbox">
  • <select>
• bottoni:
• <input type="button">
• <input type="submit">
• <input type="reset">
• <input type="image">

Nella action inserire il link <form action = "https://formspree.io/vostraemail" method = "POST" > e il contenuto del modulo arriverà direttamente nella vostra email.
Ovviamente questo è solo un esempio e dimostra come è possibile inviare informazioni ad un indirizzo email senza l'utilizzo di linguaggi Web come l'ASPX e PHP.
Attenzione: la prima volta che usate il "formspree.io" dovete confermare la registrazione.

Provatelo funziona correttamente!

fonte originale: https://www.mrwebmaster.it/html/form-moduli_9457.html