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

Esempio 2. Menu di selezione a scelta singola, con quattro righe visibile:


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

Esempio 1. Menu a discesa:


<select name=”menu1″>
<option selected>scelta uno</option>
<option>scelta due</option>
<option>scelta tre</option>
</select>

Menu a discesa e a scelta multipla

Al di fuori degli elementi input esistono altre possibiità per definire valori di variabili che vengono inseriti nei moduli. Sono molto utilzzati i menu a discesa o a scelta multipla che, in HTML, si definiscono con gli stessi tag. Le opzioni di scelta devono essere inserite all’interno di un elemento select (<select> … </select>), che può essere i seguenti attributi:

• name, come nei tag di input, serve a formare le coppie nome-valore delle variabili insieme al modulo;
• align permette di determinare l’allineamento del menu rispetto al testo circostante; funziona come l’analogo attributo del tag <img>;
• multiple indica, senza bisogno di attribuirgli alcun valore, che è possibile selezionare più opzioni contemporaneamente;
• sizie indica il numero di righe visibili senza scorrere l’elenco.

All’interno dell’elemento select, per ogni opzione disponibile, bisogna inserire un elemento option (<option> … </option>), che può avere i seguenti attributi:

• selected indica che una voce è selezionata di default, senza bisogno di assegnarli un valore;
• value permette di attribuire il valore che assumerà la variabile se questa opzione viene selezionata dall’utente. Non è un attributo obbligatorio nel caso in cui omesso verrà utilizzato come valore il testo inserito fra <option> e </option>.

Qualche esempio renderà più chiare le possibilità di composizione di questi menu di selezione.

Text

Con questa definizione l’elemento input diventa un campo per l’immissione di testo su una sola riga. Se viene specificato anche l’attributo value è possibile inserire un testo predeterminato che appare come default. I tag <input> con type=text possono assumere anche gli attributi size e maxlenght, che indicano rispettivamente la lunghezza in caratteri del campo di testo visualizzato e per la quantità di battute che si possono inserire:


<form name=”modulo2″ action=”/cgi-bin/inviamodulo.php”>
<h1>Casella di testo <i>type=”text” </i></h1>
Nome:
<input name=”nome” type=”text” siz=”20″ maxlenght=”35″ value=”Alessandra”><br>
Cognome:
<input name=”cognome” type=”text” size=”20″ maxlenght=”35″>
</form>

Submit e Reset

Ogni modulo, per funzionare, deve avere un pulsante (o un’immagine) di invio. Il pulsante Submit, per l’appunto, serve ad attivare l’azione di invio impostata nel form. Il pulsante di reset,, non fondamentale, serve per cancellare tutti i dati inseriti (prima dell’invio). Per entrambi l’etichetta visualizzata nel modulo è il testo inserito nell’attributo value:


<form name=”modulo3″ action=”/cgi-bin/inviomodulo.php”>
<h1>Submit e Reset</h1>
<input name=”submit” type=”submit” value=”invia il modulo”><br><br>
<input name=”submit” type=”submit” value=”Cancella tutto”><br>
</form>