Un modulo di richiesta informazione parte II°

Infine, si inseriscono i controlli all’interno degli spazi definiti:

<form name="richiesta info" action="/cg-bin/inviamodulo.php">
<fieldset>
<legend>Dati Anagrafici</legend>
<table width="300">
<tr>
<td bgcolor="black" align="right" valign="top" width="250">
<font color="white">Nome</font>
</td>
<td><input type="text" name="nome">
</td>
</tr>
<tr>
<td bgcolor="black" align="right" valign="top" width="250">
<font color="white">Cognome</font></td>
<td><input type="text" name="cognome"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Le tue abitudini</legend>
<table width="500">
<tr>
<td bgcolor="black" align="right" valign="top" width="250">
<font color="white">Utilizzi occhiali da vista</font>
</td>
</tr>
<tr>
<input type="black" align="right" valign="top" width="250">
<font color="white">Utilizzi occhi da sole</font>
</td>
<td>
<input type="checkbox" name="sole" value="in montagna">In montagna<br>
<input type="checkbox" name="sole" value="al mare>al mare<br>
<input type="checkbox" name="sole" value="nel tempo libero>Nel tempo libero<br>
<input type="checkbox" name="sole" value="per guidare">Per guidare<br>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Le tue richieste</legend>
<textarea wrap="virtual" cols="30" rows="10" name="richiesta">
Scrivi qui il testo della tua richiesta.</textarea>
</filedset>
<fieldset>
<legend>Privacy policy</legend>
<p>Autorizzo i trattamento dei dati personali<br>
<input type="radio" checked name="privacy" value="si">Si<br>
<input type="radio" nme="privacy" value="no">No<br>
</fieldset>
<p align="center"><input type="submit" value="invia la tua richiesta"></p>
</form>

Un modulo di richiesta informazioni parte I°

Costruire un modulo di richiesta informazioni è il modo migliore per imparare a usare i controlli che compongono un form e vederli in azione tutti assieme. Inoltre, è utile anche per comprendere come possono essere organizzati visivamente i diversi elementi all’interno della pagina.
Il modulo da costruire è il file cattato.htm, all’interno della directory istituzione del sito http://www.acmespa.it. Il modulo verrà inviato via e-mail tramite uno script apposito (/cgi-bin/inviamodulo.php) che consentirà di definire tre variabili all’interno del modulo:
  • l’indirizzo e-mail del destinatario della richiesta di informazioni, in una variabile chiamata destinatario (davideonline@gmail.com);
  • l’oggetto del messaggio che verrà chiamato al destinatario, in una variabile chiamata oggetto;
  • l’URL della pagina verso qui si verrà rediretti nel momento in cui il modulo sarà inviato con successo, una variabile chiamata redirect.
All’interno del modulo dovranno essere predisposti i seguenti campi:
  • dati anagrafici;
  • informazioni sul comportamento d’acquisto;
  • testo della richiesta di informazioni;
  • autorizzazione al trattamento dei dati personali;
Per cominciare, si definisce il tag form:


<form name="richiesta info" action="/cgi-bin/inviamodulo.php">
</form>

All’interno del form si creano le aree per i quattro gruppi di controlli:


<form name="richiesta info" action="/cgi-bin/inviamodulo.php">
<fieldset>
<legend>Dati Anagrafici</legend>
</fieldset>
<fieldset>
<legend>Le tue abitudini</legend>
</fieldset>
<fieldset>Le tue richieste</legend>
</fieldset>
<fieldset>
<legend>Privacy Policy</legend>
</fieldset>
</form>

Gli elementi fieldset e legend

Esistono due elementi specifici dei form che permettono di organizzare la visualizzazione dei vari campi. Non hanno funzioni specifiche per l’invio dei dati, ma influenzano esclusivamente dell’interfaccia. L’elemento fieldset è un contenitore, all’interno del quale si possono inserire alcuni campi del form raggruppandoli in modo logico insieme all’elemento legend , che funge da etichetta del set. Ecco un esempio di codice:


<form action="inviomodulo.php">
<fieldset>
<legend>Dati anagrafici</legend>
Nome: <input type="text" name="nome"><br>
Cognome: <input type="text" name="cognome"><br>
Età: <input type="text" name="età"><br>
</fieldset>
</fieldset>
<legend>Indirizzo</legend>
Via; <input type="text" name="via"><br>
Città: <input type="text" name="cognome"><br>
CAP: <input type="text" name="eta" size="5" maxlenght="5"><br>
</fieldset>
</form>

Utilizzando questi tag gli elementi inclusi nel fieldset vengono inseriti in un riquadro con angoli arrotondati, e la legend viene utilizzata come etichetta.

L’elemento textarea

L’ultimo elemento da considerare per la composizione dei moduli è textarea (<textarea> … </textarea>), che permette di inserire nel modulo un campo di testo multiriga. In particolare, si utilizza per l’inserimento di test piuttosto estesi, come commenti, messaggi o simi. Non vi sono limiti per la quantità di testo e per la dimensione di visualizzazione. Le parole inserite tra il tag di apertura e il tag di chiusura vengono utilizzati come testo predefinito. Textarea può avere i seguenti attributi:
  • cols definisce larghezza dell’area di testo in numero di caratteri;
  • rows definisce l’altezza in dell’area di testo numero di righe;
  • name definisce il nome della variabile a cui sarò assegnato il testo come valore;
  • wrap definisce il tipo di interruzione di linea che verrà utilizzato nel testo. Può assumere due valori:
  • con off non vengono inserite interruzioni di linea automatiche il testo inserito andrà a capo solo quando l’utente premerà il tasto Invio;
  • con virtual il testo andrà a capo automaticamente all’interno della casella di testo.
Ecco un esempio di forma che utilizza aree di testo:


<form action=" " method="post" enctype"multipart/form-data" name="form1">
<h1>Textarea</h1>
<p>
<textarea name="textarea" cols="20" rows=5"
wrpa="OFF">Testo predefinito</textarea>
<textarea name="textarea2" cols="30" rows="10"
wrap="VIRTUAL">Testo predefinito</textarea>
</p>
</form>

Due aree di testo con al loro interno il testo predefinito.

Esempio 3. Menu di slezione a scelta multipla, con quattro righe visibili:


<select name="select" size="4" multiple>
<option selected>scelta uno</option>
<option>scelta due</option>
<option>scelta tre</option>
<option>scelta quattro</option>
<option>scelta cinque<option>
</select>

i due menu a discesa derivano dallo stesso codice; il secondo è aperto; I due mnu di selezione differiscono solo per la possibilità della selezione multipla.