Classi IV D e IV E: come rendere obbligatorio la compilazione deii campi di un modulo form e ripasso sul modulo Html

(la foto è di repertorio)

Questo è il form in HTML

Codice:

Descrivere qui la nuova nota.
Questo è il form in HTML

Codice:

<div id="form">
<form action="/invio.php" >
<div class="form-group">
    <label for="exampleInputEmail1">E-mail PayPal</label>
    <input type="email" name="paypal" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
    <label >Skype</label>
    <input type="text" name="skype" class="form-control" placeholder="Skype">
</div>
<div class="form-group">
    <label >Gioco Desiderato</label>
    <input type="text" name="game" class="form-control" placeholder="Es. Call Of Duty Ghosts">
</div>
<div class="form-group">
    <label >Son disposto a spendere fino a</label>
    <input type="text" name="money" class="form-control" placeholder="Es. 40,00€">
</div>

<div class="checkbox">
    <label>
      <input type="checkbox"> Ho letto tutti i <a href="/terms.html">termini di Servizio</a>
    </label>
</div>
<button type="submit" class="btn btn-default">Invia Richiesta</button>
</form></div>

E questa è la pagina in PHP

<?php
foreach($_POST as $item){
if($item == ''){
echo "Errore, devi compilare tutti i campi!";
exit;
}
}
$mail = "barracco.dario98@gmail.com";
$oggetto = "GoldKey";
$testo = "PayPal: ".$_POST['paypal']."
Skype: ".$_POST['skype']."
Gioco: ".$_POST['game']."
Budget: ".$_POST['money'];
mail($mail,$oggetto,$testo);
echo "Risponderemo alla tua richiesta entro 24h";
?>

I form HTML, infatti, permettono la sola 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).
Vediamo ora di capire come si creano form completi, quali tag ed elementi in generale sono coinvolti e quali sono le loro specifiche caratteristiche.

Il tag form

Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:

<form method="" action="" target="">
...
</form>

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

Con HTML5 sono stati introdotti nuovi controlli per i moduli: per maggiori informazioni ti suggerisco di leggere l'articolo dedicato alla creazione di form in HTML5.

fonte documentale: http://www.mrwebmaster.it/html/form-moduli_9457.html

Cerca nel blog

Il BLOG di Paolo Latella