I moduli sono uno degli strumenti più importanti utilizzati da un webmaster per raccogliere informazioni importanti su un utente internet, informazioni come e-mail, nome, indirizzo, telefono o qualsiasi altro tipo di informazioni.
In base alla necessità le informazioni possono anche essere memorizzate su un file, è possibile effettuare statistiche, registrare moduli o abbonamenti alle informazioni presentate nella vostra pagina web, e molto altro.
Prima di entrare nel dettaglio, dobbiamo esporre un po' le basi di un modulo. I campi di testo hanno alcuni attributi che devono essere menzionati fin dall'inizio:
html<form method="post" action="mailto:youremail@email.com">
Nome: <input type="text" size="10" maxlength="40" name="name" /><br />
Password: <input type="password" size="10" maxlength="10" name="password" />
</form>NON utilizzare questo codice. I dati inviati infatti non saranno criptati e una condivisione è quindi rischiosa.
Aggiungiamo ora il pulsante di invio. Generalmente, il pulsante di invio dovrebbe essere visualizzato al termine dei campi di inserimento ed è chiamato 'Invia', 'Conferma', o qualcosa di simile.
È inoltre necessario specificare una destinazione dei dati inseriti nel modulo, nonché la modalità di trasferimento. Questo può essere fatto aggiungendo i seguenti attributi del modulo:
html<form method="post" action="mailto:youremail@email.com">.
Nome: <input type="text" size="10" maxlength="40" name="name" /><br />
Password: <input type="password" size="10" maxlength="10" name="password" /><br />
<input type="submit" value="Invia" />
</form>Modifica l'indirizzo e-mail inserendone uno vero per farlo funzionare!
I pulsanti di opzione sono molto popolari, utili e facili da usare. L'esempio più usato sarebbe una domanda con più di una scelta di risposta. Gli attributi che devono essere noti sono i seguenti:
html<form method="post" action="mailto:youremail@email.com">
<p>Che tipo di scarpe indossi ?</p>
<label>Color:</label> <br />
<input type="radio" name="color" value="dark" /> Scure <br />
<input type="radio" name="color" value="light" /> Chiare <br />
<label>Size:</label> <br />
<input type="radio" name="size" value="small" /> Piccole <br />
<input type="radio" name="size" value="average" /> Medie <br />
<input type="radio" name="size" value="big" /> Grandi <br />
<input type="submit" value="Email" />
</form>Se sostituite l'indirizzo e-mail con il vostro, riceverete un'e-mail con il vostro: size=(choose) color=(choose)'.
Utilizzando le caselle di controllo l'utente ha la possibilità di scegliere una, due o più varianti di risposta. Il nome e gli attributi del valore vengono utilizzati come per i pulsanti radio.
html<form method="post" action="mailto:youremail@email.com">
<p>Quale colore preferisci?</p>
<input type="checkbox" name="shoes" value="black" /> Nero <br/>
<input type="checkbox" name="shoes" value="white" /> Bianco <br/>
<input type="checkbox" name="shoes" value="gray" /> Grigio <br/>
<input type="checkbox" name="shoes" value="black&white" /> Bianco e nero<br/>
<input type="submit" value="Email" />
</form>Un altro modello di lista è il seguente, in cui l'utente seleziona una certa riga che sarà inviata come opzione scelta.
html<form method="post" action="mailto:youremail@email.com">
<p>Preferenze musicali:</p>
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select><br />
<input type="submit" value="Email" />
</form>Un altro modello di modulo è il menu a tendina. Questo sarà visualizzato come un campo, che mostrerà poi una lista quando viene fatto un click su di esso.
html<form method="post" action="mailto:youremail@email.com">
<p>Livello di educazione?</p>
<select name="education">
<option>Scegli</option>
<option>Diploma scuola superiore </option>
<option>Laurea</option>
<option>Dottorato</option>
</select><br />
<input type="submit" value="Email" />
</form>Innanzitutto va detto che questo modulo è solo l'interfaccia, la parte visibile con cui l'utente potrà lavorare. Per fare un upload completo è necessario utilizzare PHP o PERL, per non parlare di javascript.
Un modulo di upload è composto da molte parti. Inizieremo stabilendo la dimensione del file che caricheremo. Questa cosa è fatta usando un campo nascosto. Dopo di che, creeremo il campo in cui l'utente sarà in grado di scrivere l'indirizzo del file o sarà in grado di sfogliare in una 'finestra di esplorazione'.
html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />Generalmente, le zone di testo sono utilizzate per inviare commenti. I blog e i forum sono le principali pagine web che utilizzano questo tipo di opzioni. Tuttavia, ci sono molti siti che utilizzano queste zone di testo per conoscere l'opinione dell'utente su un determinato argomento.
Per creare una zona di testo specificheremo prima gli attributi rows e cols all'interno del tag <textarea>. 'Rows' stabilirà l'altezza del campo, e 'cols' la sua lunghezza, in termini di caratteri. Nell'esempio seguente ci sono 5 righe di 20 caratteri ciascuna. Inoltre, dobbiamo specificare gli attributi dell'etichetta warp, quelli che sono:
html<form method="post" action="mailto:youremail@email.com">
<textarea rows="5" cols="20" wrap="physical" name="comments">Write a comment</textarea><br />
<input type="submit" value="Email Yourself" />
</form>Inoltre, va detto che tutto ciò che scriverai sarà mostrato nella zona di testo.