3E e 3I Sia: 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).

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>

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>

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

Cerca nel blog

Il BLOG di Paolo Latella